A full-featured educational technology platform built with Next.js, designed for course management, student enrollment, and learning progress tracking.
Try the application live: https://fardins-test-assessment.vercel.app/
The live demo includes all features and is ready for testing. See the Demo Admin Credentials section below for test account information.
CourseMaster is a comprehensive EdTech platform that enables:
- Students to browse courses, enroll, track progress, complete assignments, and take quizzes
- Admins to manage courses, batches, enrollments, and review student submissions
This project is part of the MISUN Academy technical assessment and is being developed as a 4-day sprint.
- Framework: Next.js 16.0.6 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS v4
- UI Components: shadcn/ui (New York style)
- Icons: Lucide React
- State Management: Redux Toolkit
- Forms: React Hook Form with Zod validation
- Fonts: Geist Sans & Geist Mono
- Runtime: Next.js API Routes
- Database: MongoDB with Mongoose
- Authentication: JWT (JSON Web Tokens) with HTTP-only cookies
- Password Hashing: bcryptjs
- Validation: Zod v4
- HTTP Client: Axios with interceptors for security
- Linting: ESLint with Next.js config
- Formatting: Prettier
- Type Checking: TypeScript (strict mode)
- Course listing with pagination
- Search courses by title/instructor
- Filter courses by category/tags
- Sort courses by price or title
- View course details and syllabus
- User registration and login
- Student dashboard with enrolled courses
- Course player with video lectures
- Progress tracking per course
- Assignment submission (Google Drive links or text)
- Interactive quizzes with immediate scoring
- Lesson completion tracking
- Admin authentication with secret key
- Course CRUD operations with comprehensive form (lessons, assignments, quizzes)
- Batch management (create, edit, list batches)
- Enrollment management and viewing with filters
- Assignment review and grading interface
- Analytics dashboard with statistics
Before you begin, ensure you have the following installed:
- Node.js 18.x or higher
- npm, yarn, pnpm, or bun package manager
- MongoDB database (local or MongoDB Atlas)
- Redis (optional, for caching - application works without it)
-
Clone the repository
git clone <repository-url> cd misun-academy
-
Install dependencies
npm install # or yarn install # or pnpm install
-
Set up environment variables
Copy the
.env.examplefile to.env.localand fill in your values:# Copy the example file cp .env.example .env.localOr manually create a
.env.localfile in the root directory with the following environment variables:# ============================================ # Database Configuration # ============================================ # MongoDB connection string # For local MongoDB: mongodb://localhost:27017/coursemaster # For MongoDB Atlas: mongodb+srv://username:password@cluster.mongodb.net/coursemaster MONGODB_URI=your_mongodb_connection_string # ============================================ # JWT Authentication # ============================================ # Secret key for signing JWT tokens (use a strong random string) # Generate one with: openssl rand -base64 32 JWT_SECRET=your_jwt_secret_key_here # JWT token expiration time (default: 7d) # Options: 1h, 24h, 7d, 30d, etc. JWT_EXPIRES_IN=7d # ============================================ # Admin Configuration # ============================================ # Secret key required for admin login # This should be a strong, unique string known only to admins ADMIN_SECRET_KEY=your_admin_secret_key_here # ============================================ # Redis Configuration (Optional - for caching) # ============================================ # Redis connection URL for caching API responses # For local Redis: redis://localhost:6379 # For Redis Cloud: redis://username:password@host:port # If not provided, the application will work without caching (graceful degradation) # REDIS_URL=redis://localhost:6379 # Cache TTL (Time To Live) in seconds (optional, defaults to 300 seconds / 5 minutes) # REDIS_CACHE_TTL=300 # ============================================ # Email Configuration (Optional - for notifications) # ============================================ # SMTP settings for sending emails (welcome emails, notifications) # If not provided, emails will be skipped gracefully # SMTP_HOST=smtp.gmail.com # SMTP_PORT=587 # SMTP_USER=your-email@gmail.com # SMTP_PASSWORD=your-app-password # SMTP_FROM=noreply@coursemaster.com # ============================================ # Next.js Configuration # ============================================ # Public API URL (optional, defaults to /api) # Use this if your API is hosted on a different domain # NEXT_PUBLIC_API_URL=http://localhost:3000/api # Application URL (optional, for production) # NEXT_PUBLIC_APP_URL=http://localhost:3000
π Important Notes:
- Never commit
.env.localto version control (it's already in.gitignore) - JWT_SECRET: Use a strong, random string. See How to Generate JWT_SECRET below
- ADMIN_SECRET_KEY: Use the same method as JWT_SECRET to generate a secure key
- MONGODB_URI:
- Local MongoDB:
mongodb://localhost:27017/coursemaster - MongoDB Atlas: Get your connection string from the Atlas dashboard
- π Need help? See MongoDB Setup Guide below
- Local MongoDB:
Example
.env.localfor local development:MONGODB_URI=mongodb://localhost:27017/coursemaster JWT_SECRET=your_super_secret_jwt_key_change_this_in_production JWT_EXPIRES_IN=7d ADMIN_SECRET_KEY=your_admin_secret_key_change_this # Optional: Redis for caching (application works without it) REDIS_URL=redis://localhost:6379 REDIS_CACHE_TTL=300 # Optional: Email configuration (application works without it) # SMTP_HOST=smtp.gmail.com # SMTP_PORT=587 # SMTP_USER=your-email@gmail.com # SMTP_PASSWORD=your-app-password # SMTP_FROM=noreply@coursemaster.com
- Never commit
-
Run the development server
npm run dev # or yarn dev # or pnpm dev
-
Seed the database (Optional - for testing)
If you want to populate the database with sample data for testing, you can use the seed endpoint:
# Using curl curl -X POST http://localhost:3000/api/seed # Or using PowerShell (Windows) Invoke-WebRequest -Uri http://localhost:3000/api/seed -Method POST # Or use Postman/Thunder Client to make a POST request to: # http://localhost:3000/api/seed
Note: The seed endpoint only works in development mode. Make sure you have a
data/seed-data.jsonfile in the project root for seeding to work. If the file doesn't exist, you can create test data manually through the UI. -
Open your browser
Navigate to http://localhost:3000 to see the application.
-
Start Testing!
Ready to test? Jump to the Quick Start Testing Guide below to begin testing the application.
You can login directly to the live website using these credentials:
Live Website Admin Credentials:
- Website: https://fardins-test-assessment.vercel.app/admin-login
- Email:
mahadi@gmial.com - Password:
mahadi - Admin Secret Key:
admin-secret-key-12345
Steps to Login:
- Visit the admin login page
- Enter the email:
mahadi@gmial.com - Enter the password:
mahadi - Enter the admin secret key:
admin-secret-key-12345 - Click "Login" to access the admin dashboard
For local development and testing, you can use the following demo admin account. Note: This account must be created in your database first (see instructions below).
Demo Admin Account (for local setup):
- Email:
mahadi@gmail.com - Password:
mahadi - Admin Secret Key: Use the value from
ADMIN_SECRET_KEYin your.env.local
Option 1: Using MongoDB Compass (Easiest)
- Open MongoDB Compass and connect to your database
- Navigate to
coursemasterdatabase βuserscollection - Click "Insert Document"
- Add the following document:
Note: The password above is already hashed (for "mahadi"). If you need to hash a different password, you can register a student account first and copy the hashed password.
{ "name": "Mahadi Admin", "email": "mahadi@gmail.com", "password": "$2a$12$LQv3c1yqBWVHxkd0LHAkCOYz6TtxMQJqhN8/LewY5GyY5Y5Y5Y5Y5", "role": "admin" }
Option 2: Using MongoDB Shell
// Connect to your database
use coursemaster
// Insert admin user with hashed password
db.users.insertOne({
name: "Mahadi Admin",
email: "mahadi@gmail.com",
password: "$2a$12$LQv3c1yqBWVHxkd0LHAkCOYz6TtxMQJqhN8/LewY5GyY5Y5Y5Y5Y5", // "mahadi" hashed
role: "admin",
createdAt: new Date(),
updatedAt: new Date()
})Option 3: Convert a Student to Admin
- Register a student account via the UI with email
mahadi@gmail.comand passwordmahadi - Then update the role in MongoDB:
db.users.updateOne( { email: 'mahadi@gmail.com' }, { $set: { role: 'admin' } } );
After creating the admin account, you can login at /admin-login using:
- Email:
mahadi@gmail.com - Password:
mahadi - Admin Secret Key: (from your
ADMIN_SECRET_KEYin.env.local)
This section will help you quickly test the application after setup. For detailed testing procedures, see Testing Guide.
Quick Test Flow:
- β
Verify server is running at
http://localhost:3000 - β Register a student account or create one manually
- β Browse courses and enroll in one
- β Test student features (lessons, assignments, quizzes)
- β Login as admin (create admin account first)
- β Test admin features (create course, manage batches, review assignments)
Minimum Requirements for Testing:
- MongoDB connection working
- At least one student account (can register via UI)
- At least one admin account (create manually or via seed)
- At least one course (create as admin or via seed)
-
Check if the server is running
- Open http://localhost:3000
- You should see the CourseMaster homepage
-
Verify database connection
- Check the terminal/console for any MongoDB connection errors
- If you see connection errors, verify your
MONGODB_URIin.env.local
- Navigate to http://localhost:3000/register
- Fill in the registration form:
- Name: Test Student
- Email: student@test.com (or any email)
- Password: Test123! (or any password meeting requirements)
- Click "Register"
- You should be redirected to the student dashboard
Use the pre-configured demo admin account - See Demo Admin Credentials section above for details.
Quick Setup:
- Create the admin user in MongoDB (see instructions in Demo Admin Credentials section)
- Login at
/admin-loginwith:- Email:
mahadi@gmail.com - Password:
mahadi - Admin Secret Key: (from
ADMIN_SECRET_KEYin your.env.local)
- Email:
If you prefer to create your own admin account:
-
Register as student first:
- Register a student account via the UI (see Option A above)
-
Convert to admin in MongoDB:
Using MongoDB Compass:
- Open MongoDB Compass
- Connect to your database
- Navigate to
coursemasterdatabase βuserscollection - Find the user you just created
- Click "Update" and change
rolefrom"student"to"admin" - Save the changes
Using MongoDB Shell:
// Connect to your database use coursemaster // Update user role to admin (replace email with your registered email) db.users.updateOne( { email: "student@test.com" }, { $set: { role: "admin" } } )
-
Login as admin:
- Navigate to
/admin-login - Use the email and password you registered with
- Enter the
ADMIN_SECRET_KEYfrom your.env.local
- Navigate to
-
Browse Courses
- Navigate to the courses page
- Use search, filter, and sort features
- Click on a course to view details
-
Enroll in a Course
- Click "Enroll Now" on any course
- Verify the course appears in your dashboard (
/dashboard)
-
Access Course Content
- Go to your dashboard
- Click on an enrolled course
- Navigate to
/learn/[courseId]to access the course player - Try marking lessons as complete
-
Submit an Assignment (if course has assignments)
- Navigate to an assignment in the course
- Submit a Google Drive link or text answer
- Verify submission is recorded
-
Take a Quiz (if course has quizzes)
- Navigate to a quiz in the course
- Answer questions and submit
- Verify immediate score display
-
Admin Login
- Navigate to http://localhost:3000/admin-login
- Enter admin credentials:
- Email:
mahadi@gmail.com(or your custom admin email) - Password:
mahadi(or your custom admin password) - Admin Secret Key: (value from
ADMIN_SECRET_KEYin.env.local)
- Email:
- Click "Login"
- You should be redirected to the admin dashboard
-
Create a Course
- Navigate to
/admin/courses/new - Fill in course details:
- Title, description, price, category
- Add lessons with video URLs
- Add assignments (optional)
- Add quizzes (optional)
- Click "Create Course"
- Verify course appears in the courses list
- Navigate to
-
Manage Batches
- Navigate to
/admin/batches - Click "Create Batch"
- Fill in batch details and assign courses
- Verify batch is created
- Navigate to
-
View Enrollments
- Navigate to
/admin/enrollments - View all student enrollments
- Test filtering options
- Navigate to
-
Review Assignments
- Navigate to
/admin/assignments - View student submissions
- Grade an assignment with score and feedback
- Verify grade is saved
- Navigate to
-
View Analytics
- Navigate to
/admin/analytics - Verify statistics are displayed correctly
- Navigate to
Use this checklist to verify core functionality:
- Student registration works
- Student login works
- Admin login works (with secret key)
- Logout works
- Protected routes redirect when not authenticated
- Course listing displays courses
- Search functionality works
- Filter by category/level works
- Sort by price/title works
- Course details page displays correctly
- Student dashboard shows enrolled courses
- Can enroll in a course
- Course player loads and plays videos
- Can mark lessons as complete
- Progress tracking updates correctly
- Can submit assignments
- Can take quizzes and see scores
- Admin dashboard loads
- Can create/edit/delete courses
- Can create/edit/delete batches
- Can view enrollments
- Can review and grade assignments
- Analytics dashboard displays data
-
Error Handling
- Try logging in with wrong credentials (should show error)
- Try accessing
/admin/dashboardas a student (should redirect) - Try accessing
/dashboardwithout login (should redirect to login)
-
Data Persistence
- Enroll in a course, then refresh the page (enrollment should persist)
- Mark a lesson as complete, then refresh (progress should persist)
- Submit an assignment, then refresh (submission should persist)
-
Responsive Design
- Test on mobile viewport (320px, 375px)
- Test on tablet viewport (768px, 1024px)
- Test on desktop viewport (1280px+)
- Verify navigation works on all screen sizes
Can't connect to database:
- Verify MongoDB is running (local) or connection string is correct (Atlas)
- Check
MONGODB_URIin.env.local - Check terminal for connection error messages
Authentication not working:
- Verify
JWT_SECRETis set in.env.local - Clear browser cookies and try again
- Check browser console for errors
Admin login fails:
- Verify
ADMIN_SECRET_KEYmatches the one in.env.local - Verify admin user exists in database
- Check that admin user has
role: "admin"in database
API errors:
- Check browser console (F12) for error messages
- Check terminal/console for server errors
- Verify all environment variables are set correctly
No courses displayed:
- Create a course as admin, or
- Use the seed endpoint to populate test data
- Verify courses have
isPublished: truein database
Key URLs:
- Homepage:
http://localhost:3000 - Student Registration:
http://localhost:3000/register - Student Login:
http://localhost:3000/login - Student Dashboard:
http://localhost:3000/dashboard - Admin Login:
http://localhost:3000/admin-login - Admin Dashboard:
http://localhost:3000/admin/dashboard - Courses List:
http://localhost:3000/courses - Seed Endpoint:
POST http://localhost:3000/api/seed
Test Account Setup:
- Student Account: Register via
/registerpage - Admin Account:
- Live Website (Ready to Use): Login at
https://fardins-test-assessment.vercel.app/admin-login
with:
- Email:
mahadi@gmial.com - Password:
mahadi - Admin Secret Key:
admin-secret-key-12345
- Email:
- Local Development: Use demo admin
mahadi@gmail.com/mahadi(see Demo Admin Credentials) - Custom Option: Register as student, then update role to
"admin"in MongoDB
- Live Website (Ready to Use): Login at
https://fardins-test-assessment.vercel.app/admin-login
with:
- Admin Secret Key:
- Live Website:
admin-secret-key-12345 - Local Development: Use the value from
ADMIN_SECRET_KEYin.env.local
- Live Website:
Live Website Admin Login (Ready to Use - No Setup Required):
- Website: https://fardins-test-assessment.vercel.app/admin-login
- Email:
mahadi@gmial.com - Password:
mahadi - Admin Secret Key:
admin-secret-key-12345
Local Development Admin (requires setup):
- Email:
mahadi@gmail.com - Password:
mahadi - See Demo Admin Credentials section for setup instructions
Minimum Test Data Needed:
- β 1 Student account (register via UI)
- β 1 Admin account (convert student to admin)
- β 1 Course (create as admin or via seed)
- β Course should have at least 1 lesson for testing
Quick Test Flow:
1. Register Student β 2. Enroll in Course β 3. Access Course Player β
4. Mark Lesson Complete β 5. Submit Assignment β 6. Take Quiz β
7. Login as Admin β 8. Create Course β 9. Review Assignments
- Detailed Testing: See Testing Guide for comprehensive testing procedures
- API Testing: Use Postman, Thunder Client, or curl to test API endpoints
- Development: Start building new features or customizing existing ones
A JWT_SECRET is a cryptographic key used to sign and verify JWT tokens. It must be a strong, random string. Here are several methods to generate one:
node -e "console.log(require('crypto').randomBytes(32).toString('base64'))"This will output a secure random string like:
ywvscQHb/TKchjWrdyQKgshLW0fpWspakMnDUsLUfmE=
openssl rand -base64 32[Convert]::ToBase64String((1..32 | ForEach-Object { Get-Random -Minimum 0 -Maximum 256 }))Visit https://generate-secret.vercel.app/32 or use any secure random string generator.
python -c "import secrets; print(secrets.token_urlsafe(32))"Copy the generated string and paste it into your .env.local file:
JWT_SECRET=ywvscQHb/TKchjWrdyQKgshLW0fpWspakMnDUsLUfmE=- Use a different JWT_SECRET for production
- Never share your JWT_SECRET publicly
- Keep it secure and rotate it periodically
-
Install MongoDB on your machine:
- Windows: Download from MongoDB Download Center
- macOS:
brew install mongodb-community - Linux: Follow MongoDB Installation Guide
-
Start MongoDB service:
# Windows (as Administrator) net start MongoDB # macOS/Linux brew services start mongodb-community # or sudo systemctl start mongod
-
Use connection string:
MONGODB_URI=mongodb://localhost:27017/coursemaster
-
Create a free account at MongoDB Atlas
-
Create a new cluster (choose the free tier)
-
Create a database user:
- Go to "Database Access" β "Add New Database User"
- Choose "Password" authentication
- Save the username and password
-
Whitelist your IP address:
- Go to "Network Access" β "Add IP Address"
- Click "Allow Access from Anywhere" for development (or add your specific IP)
-
Get your connection string:
- Go to "Database" β "Connect" β "Connect your application"
- Copy the connection string
- Replace
<password>with your database user password - Replace
<dbname>withcoursemaster(or your preferred database name)
-
Add to
.env.local:MONGODB_URI=mongodb+srv://username:password@cluster0.xxxxx.mongodb.net/coursemaster?retryWrites=true&w=majority
After setting up MongoDB, start your development server. If the connection is successful, you'll see no errors in the console. If there are connection errors, check:
- MongoDB service is running (for local setup)
- Connection string is correct
- IP address is whitelisted (for Atlas)
- Database user credentials are correct
Redis is optional and used for caching API responses to improve performance. The application will work perfectly fine without Redis, but caching will improve response times for frequently accessed endpoints like the course listing API.
-
Install Redis on your machine:
- Windows: Download from Redis for Windows or use WSL
- macOS:
brew install redis - Linux:
sudo apt-get install redis-server(Ubuntu/Debian) orsudo yum install redis(CentOS/RHEL)
-
Start Redis service:
# Windows (using WSL or Redis service) redis-server # macOS brew services start redis # Linux sudo systemctl start redis # or redis-server
-
Use connection string:
REDIS_URL=redis://localhost:6379
-
Create a free account at Redis Cloud
-
Create a new database (free tier available)
-
Get your connection string:
- Copy the connection URL from your Redis Cloud dashboard
- It will look like:
redis://default:password@host:port
-
Add to
.env.local:REDIS_URL=redis://default:password@host:port REDIS_CACHE_TTL=300
- Cache TTL: Default is 300 seconds (5 minutes). You can customize this with
REDIS_CACHE_TTLenvironment variable. - Cache Invalidation: Cache is automatically invalidated when courses are created, updated, or deleted.
- Graceful Degradation: If Redis is unavailable, the application will continue to work normally, just without caching.
After setting up Redis, start your development server. If Redis is connected,
you'll see β
Redis Connected in the console. If Redis is unavailable, you'll
see a warning but the application will continue to work:
- Redis service is running (for local setup)
- Connection string is correct
- Network access is allowed (for Redis Cloud)
- Credentials are correct (for Redis Cloud)
Note: Redis connection failures are handled gracefully - the application will fall back to direct database queries if Redis is unavailable.
misun-academy/
βββ src/
β βββ app/ # Next.js App Router pages
β β βββ layout.tsx # Root layout
β β βββ page.tsx # Home page
β βββ components/ # React components
β β βββ admin/ # Admin-specific components
β β βββ auth/ # Authentication components
β β βββ course/ # Course-related components
β β βββ layout/ # Layout components (Navbar, Footer, etc.)
β β βββ shared/ # Shared/common components
β β βββ student/ # Student-specific components
β β βββ ui/ # shadcn/ui components
β βββ lib/ # Utility functions and helpers
β β βββ api/ # API client utilities
β β βββ validations/ # Zod validation schemas
β β βββ utils.ts # General utilities
β βββ models/ # Mongoose models
β βββ store/ # Redux store configuration
β β βββ slices/ # Redux slices
β βββ types/ # TypeScript type definitions
βββ docs/ # Documentation
β βββ PROGRESS.md # Development progress tracking
β βββ Technical Assessment_ Web Developer_MISUN Academy.pdf
βββ public/ # Static assets
βββ package.json # Dependencies and scripts
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLintnpm run lint:fix- Fix ESLint errors automatically
Current Progress: ~95% (All core features complete, testing and deployment remaining)
Current Phase: Phase 5 - Admin Features (Complete)
Status: π’ Nearly Complete
For detailed progress tracking, see docs/PROGRESS.md
- Next.js 16.0.6 project initialization
- TypeScript configuration
- Tailwind CSS v4 setup
- shadcn/ui initialization
- ESLint and Prettier configuration
- Core dependencies installation
- Project directory structure
- Authentication system (student & admin)
- Database models and connections
- Public course listing and details
- Student features (dashboard, course player, assignments, quizzes)
- Admin features (dashboard, course management, batch management, enrollment management, assignment review)
- Performance optimizations (database indexes, query optimization)
- UI components (Sidebar, Footer, ProgressTracker)
- Redux state management (auth, course, UI slices)
The platform supports two types of users:
- Students: Register and login with email/password
- Admins: Login with admin credentials and secret key
Authentication uses JWT tokens stored in HTTP-only cookies for security.
- JWT-based Authentication: Secure token-based authentication with HTTP-only cookies
- Role-Based Access Control: Automatic route protection based on user roles (student/admin)
- Middleware Protection: Automatic route protection via Next.js middleware
- Client-Side Hooks:
useAuth()hook for client-side authentication state - Server-Side Helpers: Utilities for protected API routes and server components
Routes are automatically protected by middleware:
- Public Routes:
/,/login,/register,/admin-login,/courses/[id] - Student Routes:
/dashboard,/courses/*(enrolled courses) - Admin Routes:
/admin/*
- Client-Side:
useAuth()hook provides user state, loading, and authentication status - Server-Side:
requireAuth(),requireAdmin(),requireStudent()helpers for API routes - Components:
<ProtectedRoute>component for client-side route protection
POST /api/auth/register- Student registrationPOST /api/auth/login- Student loginPOST /api/auth/admin-login- Admin loginPOST /api/auth/logout- Logout current userGET /api/auth/me- Get current authenticated user
GET /api/courses- List courses (with pagination, search, filter, sort)POST /api/courses- Create course (admin only)GET /api/courses/[id]- Get course detailsPUT /api/courses/[id]- Update course (admin only)DELETE /api/courses/[id]- Delete course (admin only)
POST /api/enrollments- Enroll in a courseGET /api/enrollments- List enrollments
POST /api/progress- Update learning progressGET /api/progress- Get progress data
POST /api/assignments- Submit assignment (student only)GET /api/assignments- List assignments (student only)GET /api/assignments/[id]- Get assignment details (student only)GET /api/assignments/admin- List all submissions (admin only)GET /api/assignments/admin/[id]- Get submission details (admin only)PUT /api/assignments/admin/[id]- Grade submission (admin only)POST /api/assignments/admin- Create assignment (admin only)PUT /api/assignments/admin/[id]- Update assignment (admin only)
GET /api/quizzes- List quizzes (student only)GET /api/quizzes/[id]- Get quiz detailsPOST /api/quizzes/[id]/submit- Submit quiz (student only)POST /api/quizzes/admin- Create quiz (admin only)PUT /api/quizzes/admin/[id]- Update quiz (admin only)
POST /api/lessons- Create lesson (admin only)PUT /api/lessons/[id]- Update lesson (admin only)DELETE /api/lessons/[id]- Delete lesson (admin only)
GET /api/batches- List batches (with filters)POST /api/batches- Create batch (admin only)GET /api/batches/[id]- Get batch detailsPUT /api/batches/[id]- Update batch (admin only)DELETE /api/batches/[id]- Delete batch (admin only)
GET /api/enrollments/admin- List all enrollments (admin only)
This project uses shadcn/ui components with the "New
York" style. Components are located in src/components/ui/ and can be
customized as needed.
Before deploying, ensure:
- All environment variables are set in your deployment platform
- MongoDB Atlas is configured (recommended for production)
- Production build succeeds (
pnpm build) - All tests pass (see Testing Guide)
- API documentation is reviewed (see API Documentation)
Set the following environment variables in your deployment platform:
MONGODB_URI=your_production_mongodb_connection_string
JWT_SECRET=your_production_jwt_secret_key
JWT_EXPIRES_IN=7d
ADMIN_SECRET_KEY=your_production_admin_secret_key
NEXT_PUBLIC_APP_URL=https://your-domain.comImportant: Use different secrets for production than development!
The easiest way to deploy this Next.js app is using Vercel:
-
Push your code to GitHub
git add . git commit -m "Ready for deployment" git push origin main
-
Import your repository on Vercel
- Go to Vercel Dashboard
- Click "Add New Project"
- Import your GitHub repository
-
Configure environment variables
- Go to Project Settings β Environment Variables
- Add all required environment variables (see above)
- Use different values for Production, Preview, and Development
-
Deploy!
- Vercel will automatically detect Next.js
- Build command:
pnpm build(ornpm run build) - Output directory:
.next - Framework preset: Next.js
-
Configure MongoDB Atlas
- Add Vercel's IP addresses to MongoDB Atlas Network Access
- Or allow access from anywhere (0.0.0.0/0) for development
This Next.js app can be deployed on any platform that supports Node.js:
- Netlify: Follow Next.js deployment guide
- Railway: Connect GitHub repo and set environment variables
- Render: Use Node.js environment and set build command to
pnpm build - Heroku: Use Node.js buildpack and set build command
Important: Make sure to set all required environment variables in your deployment platform.
After deployment:
-
Verify deployment
- Visit your live URL
- Test authentication flow
- Test API endpoints
- Check database connection
-
Monitor logs
- Check for any errors in deployment logs
- Monitor API response times
- Check database connection status
-
Set up monitoring (optional)
- Configure error tracking (e.g., Sentry)
- Set up uptime monitoring
- Configure database backups
Build fails:
- Check Node.js version (requires 18.x or higher)
- Verify all dependencies are installed
- Check for TypeScript errors (
pnpm buildlocally)
Database connection errors:
- Verify MongoDB Atlas IP whitelist includes deployment platform IPs
- Check connection string format
- Verify database user credentials
Authentication not working:
- Verify JWT_SECRET is set correctly
- Check cookie settings (HTTP-only, secure, same-site)
- Verify token expiration settings
API errors:
- Check API routes are accessible
- Verify middleware is working correctly
- Check CORS settings if accessing from different domain
- Development Progress - Detailed progress tracking
- API Documentation - Complete API reference
- Testing Guide - Testing checklist and procedures
- Technical Assessment - Project requirements
This is a technical assessment project for MISUN Academy. Development follows a structured 4-day timeline with specific phases and milestones.
This project is part of a technical assessment and is for evaluation purposes.
- Next.js Documentation
- Next.js Learn - Interactive tutorial
- shadcn/ui Documentation
- Tailwind CSS Documentation
- MongoDB Documentation
Last Updated: December 2, 2025