Preparing a focused brutalist interface for projects, skills, writing, and product work.
TOEIC Captoc is a full-stack online TOEIC learning system built for Vietnamese learners. It combines a public SEO website, Google login, onboarding, full-format and part-based TOEIC practice, listening drills, vocabulary and grammar learning, progress dashboards, AI Roadmap personalization, payment upgrades, notifications, blog content, and admin data management.
TOEIC learners often need more than a static course page: they need to know their current level, practice by TOEIC structure, review results, track progress, build vocabulary and grammar habits, and follow a clear route toward a target score. The product also needs admin workflows for managing tests, questions, content, users, reports, and notifications.
Captoc separates a Next.js frontend from a NestJS API and uses PostgreSQL with Prisma to model users, sessions, tests, questions, vocabulary, grammar, blogs, reports, notifications, transactions, and roadmaps. The frontend exposes public SEO pages plus protected learner dashboards, while the backend owns authentication, learning data, content management, scheduled jobs, throttling, media, and payment integration.
The screens are grouped by the TOEIC learning journey: public course and SEO pages introduce the product, learner dashboards show practice workflows, and supporting screens cover login, onboarding, protected routes, and policy pages.
The public website introduces TOEIC Captoc, explains the TOEIC course, shows pricing and upgrades, exposes resources, blog posts, public vocabulary, public test entry points, roadmap information, leaderboard, FAQ, and contact pages.
Authenticated learners can follow study time, correct answers, tests completed, streak, target score, practice tasks, listening activities, vocabulary, grammar, tests, review sessions, achievements, profile, and notifications.
The backend and import scripts manage TOEIC practice data, test series, questions, groups, vocabulary topics and words, grammar categories, lessons, guides, listening material, blog content, and user reports.
The product includes personalized learning roadmap concepts backed by LLM providers, plus upgrade and payment workflows through Sepay integration for paid plans.
The repository is organized into a Next.js client and a NestJS server, with frontend requests proxied through `/api/*` and `/auth/*` to backend business modules.
PostgreSQL and Prisma store users, sessions, tests, questions, vocabulary, grammar, blogs, roadmaps, notifications, reports, transactions, and progress records.
Session cookies and role checks separate public pages, authenticated learner dashboards, and admin-only management routes.
Docker Compose and Nginx configuration in the provision layer support reproducible deployment for the frontend, backend, database, and reverse proxy.
A compact map of every important product screen, diagram, email, and deployment visual extracted from the report.
Public homepage introducing the TOEIC Captoc learning platform
Featured Screen
TOEIC course page explaining the learning offer
Interface Screen
Pricing page for learning plan comparison
Interface Screen
Upgrade flow connected to paid learning packages
Diagram
Public TOEIC test entry point
Interface Screen
Public vocabulary learning page
Interface Screen
TOEIC resource hub for learners
Interface Screen
Roadmap page for learning path positioning
Diagram
Leaderboard page for learner motivation
Interface Screen
TOEIC blog listing for SEO and learning content
Interface Screen
About page describing the TOEIC Captoc product
Interface Screen
FAQ page for common learner questions
Interface Screen
Contact page for learner support
Interface Screen
Google login entry for learner accounts
Interface Screen
Onboarding flow for learner goal setup
Diagram
Placement test entry during onboarding
Interface Screen
Dashboard overview with study progress and target score
Interface Screen
Practice dashboard for TOEIC drills and test preparation
Interface Screen
Listening dashboard for TOEIC listening practice
Interface Screen
Part-based listening practice screen
Interface Screen
Vocabulary dashboard for topic-based learning
Interface Screen
Grammar dashboard with lessons and practice
Interface Screen
Learner test session dashboard
Interface Screen
Protected dashboard route redirect state without a session
Interface Screen
Notifications page for learner updates
Interface Screen
Profile route state requiring authenticated learner data
Interface Screen
Privacy policy page
Interface Screen
Terms of use page
Interface Screen
Have an idea or project?
Let's build something amazing.アイデアやプロジェクトがありますか？素晴らしいものを一緒に作りましょう。