A modern, scalable ed-tech platform where parents and students can discover courses, enroll, pay online, and manage their learning journey. Built with Next.js, TypeScript, MongoDB, and integrated with Stripe for payments.

⚠️ Deployment Note: This application requires server-side rendering (SSR) and cannot be deployed on GitHub Pages. Please use Vercel (recommended), Netlify, or other platforms that support Next.js SSR.

🚀 Quick Deploy to Vercel: See VERCEL_DEPLOY.md for quick deployment instructions.

📋 Deployment Resources:

Quick Deploy Guide - Fast-track deployment

Deployment Checklist - Complete step-by-step guide

Environment Variables Reference - All required configuration

Deployment Summary - What's been done and what's needed

🎯 Features

Core Features

Modern Web Application: Built with Next.js 16 and React 19 for optimal performance and SEO
3S Philosophy: Skills, Science, and Success - our unique approach to education
Course Management: Browse and enroll in Robotics, Mathematics, and Chess courses
User Authentication: Secure JWT-based authentication system
Payment Integration: Stripe integration for secure online payments
User Dashboard: Manage profile, children, and enrolled courses
Responsive Design: Mobile-first design with Tailwind CSS
TypeScript: Full type safety across the application

Advanced Features (New!)

Multi-Child Discounts: Automatic discounts when enrolling multiple children (10-15% off)
Coupon System: Flexible coupon codes with percentage and fixed-amount discounts
Email Notifications: Automated emails for enrollment, payments, certificates, and more
Course Certificates: Auto-generated completion certificates with unique numbers
Progress Tracking: Track student progress through course lessons and modules
Video Lessons: Support for YouTube, Vimeo, and custom video hosting
Live Classes: Schedule and manage live online classes with meeting links
Assignments: Create and grade assignments with file and text submissions
Quizzes: Auto-graded quizzes with multiple question types and attempt limits

📖 For detailed information about advanced features, see FEATURES_GUIDE.md

🚀 Tech Stack

Frontend

Framework: Next.js 16 with App Router
Language: TypeScript
Styling: Tailwind CSS 4
Forms: React Hook Form
State Management: React hooks and local state

Backend

Runtime: Node.js
API Routes: Next.js API routes
Database: MongoDB with native driver
Authentication: JWT (JSON Web Tokens)
Password Hashing: bcryptjs

Payment

Payment Gateway: Stripe
Features: One-time course payments, webhooks support

📋 Prerequisites

Node.js 20 or higher
MongoDB (local installation or MongoDB Atlas account)
npm or yarn package manager
Stripe account (for payment processing)

🛠️ Installation

Clone the repository

git clone https://github.com/vparna/next-zen-stem-academy.git
cd next-zen-academy

Install dependencies
```
npm install
```

Set up environment variables

Copy the example environment file:

cp .env.example .env.local

Update .env.local with your configuration:

# MongoDB Connection
MONGODB_URI=mongodb://localhost:27017/NextGen
# For MongoDB Atlas:
# MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/NextGen?retryWrites=true&w=majority

# JWT Secret (generate a secure random string)
JWT_SECRET=your-super-secret-jwt-key-change-this-in-production

# Stripe Keys
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_your_key
STRIPE_SECRET_KEY=sk_test_your_key
STRIPE_WEBHOOK_SECRET=whsec_your_webhook_secret

# App URL
NEXT_PUBLIC_APP_URL=http://localhost:3000

Start MongoDB (if running locally)
```
mongod
```
Initialize the database (Required for first-time setup)
```
npm run init-db
```
This will:
- Create all required collections
- Set up indexes for optimized queries
- Seed initial data (courses and jobs)
Note: For MongoDB Atlas setup and troubleshooting, see MONGODB_SETUP_GUIDE.md
Run the development server
```
npm run dev
```
Open your browser

Navigate to http://localhost:3000

📁 Project Structure

next-zen-academy/
├── app/                          # Next.js app directory
│   ├── api/                      # API routes
│   │   ├── auth/                 # Authentication endpoints
│   │   ├── courses/              # Course management
│   │   ├── enrollments/          # Enrollment management
│   │   ├── profile/              # User profile
│   │   └── children/             # Children management
│   ├── about/                    # About page
│   ├── courses/                  # Courses listing page
│   ├── login/                    # Login page
│   ├── signup/                   # Signup page
│   ├── dashboard/                # User dashboard
│   ├── layout.tsx                # Root layout
│   ├── page.tsx                  # Home page
│   └── globals.css               # Global styles
├── components/                   # React components
│   ├── Navbar.tsx                # Navigation bar
│   └── Footer.tsx                # Footer component
├── lib/                          # Utility libraries
│   ├── db/                       # Database utilities
│   │   └── mongodb.ts            # MongoDB connection
│   └── auth/                     # Authentication utilities
│       └── jwt.ts                # JWT functions
├── models/                       # Data models
│   ├── User.ts                   # User model
│   ├── Course.ts                 # Course model
│   ├── Enrollment.ts             # Enrollment model
│   └── Child.ts                  # Child model
├── types/                        # TypeScript type definitions
│   └── index.ts                  # Shared types
├── middleware/                   # Custom middleware
│   └── auth.ts                   # Authentication middleware
├── public/                       # Static assets
├── .env.example                  # Environment variables template
├── package.json                  # Dependencies
├── tsconfig.json                 # TypeScript configuration
├── tailwind.config.ts            # Tailwind configuration
└── next.config.ts                # Next.js configuration

🔌 API Endpoints

Authentication

POST /api/auth/signup - Create new user account
POST /api/auth/login - Login user

Courses

GET /api/courses - Get all courses
GET /api/courses?category=Robotics - Filter courses by category
GET /api/courses/[id] - Get course details

Enrollments (Protected)

POST /api/enrollments - Create new enrollment

Profile (Protected)

GET /api/profile - Get user profile
PATCH /api/profile - Update user profile

Children (Protected)

GET /api/children - Get user's children
POST /api/children - Add a child

🗄️ Database Schema

The application uses MongoDB with the database name NextGen.

🎉 NEW: Automatic Database Deployment! All 16 database collections are now automatically created during the build/deployment process. No manual initialization required! See DATABASE_AUTO_DEPLOY.md for details.

The following collections are automatically created:

Core Collections

users - User accounts and authentication
courses - Available courses (Robotics, Maths, Chess)
enrollments - Student course enrollments
children - Parent-child relationships

Learning & Assessment

lessons - Course lessons and content
quizzes - Quiz questions and assessments
assignments - Course assignments
assignment_submissions - Student assignment submissions
progress - Student learning progress
certificates - Course completion certificates

Communication & Scheduling

live_classes - Live class schedules
messages - Internal messaging system
attendances - Class attendance tracking

Career Module

jobs - Career opportunities listings
job_applications - Job application submissions

Other

coupons - Discount coupons

Example Schema Structures

Users Collection

{
  _id: ObjectId,
  email: string,
  password: string (hashed),
  firstName: string,
  lastName: string,
  phone: string?,
  createdAt: Date,
  updatedAt: Date
}

Courses Collection

{
  _id: ObjectId,
  name: string,
  category: 'Robotics' | 'Maths' | 'Chess' | 'Other',
  description: string,
  fullDescription: string,
  price: number,
  duration: string,
  ageGroup: string,
  features: string[],
  syllabus: string[],
  active: boolean,
  createdAt: Date,
  updatedAt: Date
}

For complete database setup instructions, including initialization and troubleshooting, see MONGODB_SETUP_GUIDE.md.

Enrollments Collection

{
  _id: ObjectId,
  userId: ObjectId,
  childId: ObjectId?,
  courseId: ObjectId,
  batchId: ObjectId?,
  status: 'pending' | 'active' | 'completed' | 'cancelled',
  paymentStatus: 'pending' | 'paid' | 'failed' | 'refunded',
  paymentId: string?,
  amount: number,
  enrolledAt: Date
}

Children Collection

{
  _id: ObjectId,
  userId: ObjectId,
  name: string,
  age: number,
  grade: string?,
  createdAt: Date
}

🎨 Key Pages

Home Page (/) - Hero section, 3S philosophy, course preview
About Page (/about) - Detailed information about the academy
Courses Page (/courses) - Browse and filter courses
Course Detail Page (/courses/[id]) - Detailed course information
Login Page (/login) - User authentication
Signup Page (/signup) - New user registration with role selection
Checkout Page (/checkout) - Payment and enrollment
Dashboard (/dashboard) - User dashboard with enrolled courses
Mobile App (/mobile) - Mobile attendance and chat app (see MOBILE_APP_README.md)
- /mobile/qr-code - Parent QR code display
- /mobile/scanner - Teacher QR scanner
- /mobile/attendance - Attendance history
- /mobile/chat - Course-based messaging

🔧 Additional Scripts

Initialize Database (Optional - For Local Development)

npm run init-db

Note: Database initialization now happens automatically during deployment! You only need to run this manually for local development or troubleshooting.

This comprehensive script will:

Create all required MongoDB collections (16 total)
Set up indexes for optimized query performance
Seed initial data (6 courses and 5 job listings)
Validate the database structure

For automatic deployment information, see DATABASE_AUTO_DEPLOY.md.
For detailed manual setup instructions, see MONGODB_SETUP_GUIDE.md.

Seed Only Courses (Optional)

npm run seed

This will populate your database with sample courses for testing (if not already done by init-db).

Seed Only Jobs (Optional)

npm run seed-jobs

This will populate your database with sample job listings for the careers page.

Validate Environment Variables

npm run validate-env

This will check that all required environment variables are properly configured.

Pre-Deployment Check

npm run pre-deploy-check

This will run validation checks before deploying to production. 6. Dashboard (/dashboard) - User dashboard with enrolled courses

🔒 Security Features

Password hashing with bcryptjs
JWT-based authentication
Protected API routes with middleware
Input validation
Secure environment variables

🚢 Deployment

Deploy to Vercel (Recommended)

This application requires server-side rendering for full functionality including authentication, payments, and database integration. Deploy to Vercel or similar platforms that support Next.js server-side features:

Push your code to GitHub
Connect to Vercel
- Visit vercel.com
- Import your repository
- Configure environment variables
- Deploy
Set up MongoDB Atlas
- Create a cluster at mongodb.com/atlas
- Get connection string
- Add to Vercel environment variables
Configure Stripe
- Get API keys from stripe.com
- Add to Vercel environment variables

Alternative Platforms

This application can also be deployed to other platforms that support Next.js server-side rendering:

Netlify: Supports Next.js with serverless functions
AWS Amplify: Full-featured hosting with database support
Render: Easy deployment with persistent services

Note: GitHub Pages is not suitable for this application as it only supports static files and cannot run API routes required for authentication, payments, and database operations.

Troubleshooting Deployment Issues

If you encounter MongoDB connection errors during deployment, especially errors like:

Invalid MongoDB URI format. Must start with "mongodb://" or "mongodb+srv://"

See the detailed troubleshooting guide: MONGODB_URI_TROUBLESHOOTING.md

Common issues:

Truncated URI: Make sure the full MongoDB connection string is copied to Vercel
Special characters: URL-encode special characters in passwords (e.g., @ becomes %40)
Whitespace: Remove any line breaks or extra spaces from environment variables
Missing database name: Ensure /NextGen is included in the URI path

About the GitHub Actions Workflow

The repository contains a .github/workflows/deploy.yml file from a previous GitHub Pages deployment configuration. This workflow is no longer used and can be safely ignored or removed. Vercel handles deployments automatically when you connect your GitHub repository to Vercel, so no GitHub Actions are needed.

🧪 Development

Running the Development Server

npm run dev

Building for Production

npm run build
npm start

Linting

npm run lint

📝 Environment Variables

Required environment variables:

MONGODB_URI - MongoDB connection string (Database name: NextGen)
JWT_SECRET - Secret key for JWT tokens
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY - Stripe publishable key
STRIPE_SECRET_KEY - Stripe secret key
NEXT_PUBLIC_APP_URL - Application URL

For production deployment on Vercel, configure these as Vercel Environment Variables using the Vercel dashboard. The MongoDB URI should point to your MongoDB Atlas cluster with the database name NextGen.

🚀 Deployment to Vercel

This application is designed to be deployed on Vercel (or other platforms that support Next.js server-side rendering).

Quick Deployment

Quick Start: Follow the VERCEL_QUICKSTART.md guide for step-by-step instructions
Detailed Guide: See DEPLOYMENT_GUIDE.md for comprehensive deployment information

Why Vercel?

✅ Native Next.js support with zero configuration
✅ Automatic deployments from GitHub
✅ Built-in environment variable management
✅ Serverless API routes work out of the box
✅ Free tier available for testing

Deployment Checklist

Set up MongoDB Atlas database
Configure environment variables in Vercel:
- MONGODB_URI
- JWT_SECRET
- NEXT_PUBLIC_APP_URL
- NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY (optional)
- STRIPE_SECRET_KEY (optional)
- STRIPE_WEBHOOK_SECRET (optional)
Deploy to Vercel
Test signup/login functionality
Configure custom domain (optional)

Note: GitHub Pages is not supported because this application requires server-side rendering and API routes.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License.

📞 Contact

For questions or support, please contact:

Email: info@nextzenacademy.com
Website: www.nextzenacademy.com

🔮 Future Enhancements

Built with ❤️ using Next.js and TypeScript