Modul praktis Level 2 VibeKoding: Proyek: Sistem Ujian Online & Panel Manajemen.Modul praktis Level 2 VibeKoding: Proyek: Sistem Ujian Online & Panel Manajemen.
This project requires you to build an online exam and management system from scratch, based on a real PRD. What makes this project special is its multi-role design — students and admins see different pages and can perform different actions. You'll use Express to build the backend, implementing the complete exam business pipeline.This project requires you to build an online exam and management system from scratch, based on a real PRD. What makes this project special is its multi-role design — students and admins see different pages and can perform different actions. You'll use Express to build the backend, implementing the complete exam business pipeline.
This is the comprehensive practical section of Stage 2. Multi-role permission systems are very common in real-world applications. Once you master this pattern, you'll be able to handle education, SaaS, and admin management scenarios of all kinds.This is the comprehensive practical section of Stage 2. Multi-role permission systems are very common in real-world applications. Once you master this pattern, you'll be able to handle education, SaaS, and admin management scenarios of all kinds.
Before starting this project, you should already be familiar with:Before starting this project, you should already be familiar with:
After completing this project, you will be able to:After completing this project, you will be able to:
You will build an online exam and management system with three subsystems:You will build an online exam and management system with three subsystems:
| Subsystem | Responsibility |
|---|---|
| Public Website | Platform introduction, login entry |
| Student Portal | Exam list, taking exams, submission, grade viewing |
| Admin Dashboard | Question bank management, exam management, submission records, grade statistics |
The backend uses Express and needs to support: login auth, role permissions, exam and question bank management, submission flow with auto-grading, and grade/statistics management.The backend uses Express and needs to support: login auth, role permissions, exam and question bank management, submission flow with auto-grading, and grade/statistics management.
The requirements document for this project is on GitHub: [View PRD](https://github.com/datawhalechina/easy-vibe/blob/main/docs/en/stage-2/assignments/exam-management-express/PRD.md)The requirements document for this project is on GitHub: [View PRD](https://github.com/datawhalechina/easy-vibe/blob/main/docs/en/stage-2/assignments/exam-management-express/PRD.md)
{ title: 'Scaffold', description: 'Use AI to generate student and admin page skeletons' },{ title: 'Scaffold', description: 'Use AI to generate student and admin page skeletons' }, { title: 'Backend', description: 'Connect login, exams, submission, and grading with Express' },{ title: 'Backend', description: 'Connect login, exams, submission, and grading with Express' }, { title: 'Launch', description: 'End-to-end testing, deploy, and prepare demo' }{ title: 'Launch', description: 'End-to-end testing, deploy, and prepare demo' } ]" />]" />
Open the PRD document and answer these key questions:Open the PRD document and answer these key questions:
If the above questions don't have clear answers, don't start coding. Unclear requirements are the most common cause of rework.If the above questions don't have clear answers, don't start coding. Unclear requirements are the most common cause of rework.
Map out the overall architecture based on the PRD:Map out the overall architecture based on the PRD:
mermaid flowchart TD prd["PRD"] --> web["Public Website"] prd --> student["Student Portal"] prd --> admin["Admin Dashboard"] student --> auth["Auth"] student --> exam["Exam & Answering"] exam --> db["Database"] admin --> question["Question Bank"] admin --> submission["Submissions & Grades"] question --> db submission --> db
Prompt reference:Prompt reference:
text Based on the current PRD, help me generate a frontend scaffold for an online exam and management system. Tech stack: - Next.js App Router - TypeScript - Tailwind CSS - shadcn/ui Page list: 1. Homepage / 2. Login page /login 3. Student exam list /student/exams 4. Student exam taking /student/exams/[id] 5. Student grades /student/history 6. Admin dashboard /admin 7. Exam management /admin/exams 8. Question bank /admin/questions 9. Submission records /admin/submissions Requirements: - Student pages should be clean, focused, and easy to answer questions on - Admin pages should use sidebar + top bar layout - Use mock data first, no real API integration - Ensure basic usability on both desktop and mobile
The exam-taking page is the core of the student portal. Focus on refining it:The exam-taking page is the core of the student portal. Focus on refining it:
text Continue refining the student exam-taking page. This is an exam-taking page for an online exam system, it should include: - Top bar: exam title, countdown timer, number of answered questions - Main area: question stem and options - Support three question types: single choice, true/false, short answer - Answer card on the left or top showing which questions have been answered - Confirmation dialog before submission Use mock data for interactions first, no real API. Requirements: - Clean interface, shouldn't look like a backend table page - Countdown should be prominent but not overly stressful - Include empty states and loading states
The first version of the admin dashboard focuses on three core areas:The first version of the admin dashboard focuses on three core areas:
Check each item:Check each item:
If you get stuck during frontend scaffolding, review these chapters:If you get stuck during frontend scaffolding, review these chapters:
text Treat me as a beginner and help me implement login and permission control for the online exam system. Backend: Express. Goals: 1. Both students and admins can log in 2. Login returns the user's role 3. Students can only access /student/* APIs 4. Admins can only access /admin/* APIs 5. Unauthenticated users accessing protected pages redirect to /login Requirements: - Suggest a clear directory structure - Explain what the middleware is responsible for - Don't hardcode environment variables - Explain how to verify permissions work after implementation
Recommended implementation by module:Recommended implementation by module:
| Module | Suggested APIs |
|---|---|
| Exam Management | GET /api/exams, POST /api/admin/exams, PATCH /api/admin/exams/:id |
| Question Bank | GET /api/admin/questions, POST /api/admin/questions |
| Start Exam | POST /api/submissions/start |
| Submit Exam | POST /api/submissions/:id/submit |
| Grade Records | GET /api/student/history, GET /api/admin/submissions |
Prompt reference:Prompt reference:
text Help me design and implement Express APIs for the online exam system. Scope: - Admin creates exams - Admin manages question bank - Students view published exams - Students start exam and create submission - Student submissions auto-grade multiple choice and true/false - Short answer questions marked as pending review - Students view their grade history - Admins view all submission records Requirements: - Clear API naming - Unified JSON response structure - Separate code into controller, service, middleware, and db layers - Explain how to test each API
Grading logic is the core business rule of the exam system:Grading logic is the core business rule of the exam system:
reviewed = falseShort Answer: First version just saves the answer, score is null, status is reviewed = falseIf you want to add AI capabilities, you could let admins enter "topic + difficulty" and have the model generate candidate questions for manual review before adding to the bank. But this is a bonus, not required.If you want to add AI capabilities, you could let admins enter "topic + difficulty" and have the model generate candidate questions for manual review before adding to the bank. But this is a bonus, not required.
At minimum, verify these scenarios:At minimum, verify these scenarios:
Pre-deployment checklist:Pre-deployment checklist:
After completing this project, submit the following:After completing this project, submit the following:
README should include at minimum: project overview, core page descriptions, tech stack, local setup steps, and environment variable list.README should include at minimum: project overview, core page descriptions, tech stack, local setup steps, and environment variable list.
| Dimension | Basic Requirements | Advanced Requirements |
|---|---|---|
| Page Completeness | Student and admin main pages are accessible | Unified page style, basic mobile responsiveness |
| Business Loop | Students can login, take exams, submit, and view grades | Admins can fully create and publish exams |
| Data Correctness | Submitted answers are saved to database, objective questions auto-graded | Short answers support manual review or AI assistance |
| Permission Control | Student and admin access boundaries are clear | Server-side APIs also have role verification |
| Engineering Delivery | Project runs and is deployable, README is clear | Has demo video and testing instructions |