A modern, enterprise-grade learning management system for UPSC exam preparation
- Overview
- Features
- Tech Stack
- Getting Started
- Project Structure
- Environment Variables
- Scripts
- Contributing
- License
UPSCprep is a comprehensive, full-stack learning management system specifically designed for Union Public Service Commission (UPSC) exam aspirants in India. This repository contains the frontend application built with modern web technologies, offering a seamless and engaging user experience.
- Real-time Excellence: WebSocket-powered mock tests with synchronised timers
- Security First: JWT-based authentication with role-based access control
- Modern Architecture: Built on Next.js 15 with React Server Components
- Scalable Design: Feature-driven architecture ready for enterprise scale
- JWT-based Authentication - Stateless, secure user sessions
- Role-Based Access Control - Dynamic UI adaptation for different user roles (Student, Teacher & Admin)
- Protected Routes - Secure access to premium content
- WebSocket Integration - Live, synchronized exam experience
- Server-Side Timing - Tamper-proof test sessions
- Instant Feedback - Real-time response submission and validation
- Razorpay Integration - Secure subscription management
- Multiple Payment Methods - Cards, UPI, net banking support
- Subscription Tracking - Automated renewal and billing management
- AWS S3 Integration - Scalable file storage and retrieval
- Secure Uploads - Protected document handling
- Study Material Library - Organized resource management
- Progress Tracking - Comprehensive performance metrics
- Test Analytics - Detailed score analysis and improvement suggestions
- Study Statistics - Time management and learning insights
| Technology | Version | Purpose |
|---|---|---|
| Next.js | 15.x | React framework with App Router |
| React | 19.x | Front-end ibrary with modern hooks |
| TypeScript | 5.x | Type-safe development |
| Tailwind CSS | 3.x | Utility-first CSS framework |
| Technology | Purpose |
|---|---|
| Shadcn/ui | Headless, accessible components |
| Lucide Icons | Modern icon system |
| Framer Motion | Smooth animations and transitions |
| Technology | Purpose |
|---|---|
| pnpm | Fast, efficient package manager |
| ESLint | Code linting and formatting |
| Prettier | Code style consistency |
| Service | Purpose |
|---|---|
| WebSocket | Real-time communication |
| Razorpay | Payment processing |
| AWS S3 | File storage |
| JWT | Authentication tokens |
Before you begin, ensure you have the following installed:
- Node.js (v22.17.0 or later) - Download here
- pnpm (v10.15.0 or later) - Installation guide
- Git - Download here
-
Clone the repository
git clone https://github.com/awesome-pro/upscprep-next-frontend.git cd upscprep-next-frontend -
Install dependencies
pnpm install
-
Set up environment variables
cp .env.example .env.local
Edit
.env.localwith your configuration values (see Environment Variables) -
Start the development server
pnpm dev
-
Open your browser
Navigate to http://localhost:3000
For containerized development:
# Build the image
docker build -t upscprep-frontend .
# Run the container
docker run -p 3000:3000 upscprep-frontendupscprep-frontend/
├── 📁 app/ # Next.js App Router (routes & pages)
│ ├── 📁 (auth)/ # Authentication routes
│ ├── 📁 dashboard/ # Dashboard pages
│ ├── 📁 tests/ # Test-related pages
│ └── 📁 api/ # API routes
├── 📁 components/ # Reusable UI components
│ ├── 📁 ui/ # Shadcn/ui components
│ ├── 📁 forms/ # Form components
│ └── 📁 layouts/ # Layout components
├── 📁 contexts/ # React Context providers
├── 📁 hooks/ # Custom React hooks
├── 📁 lib/ # Utility functions & configs
├── 📁 providers/ # App-level providers
├── 📁 services/ # API service layer
├── 📁 stores/ # State management
├── 📁 types/ # TypeScript type definitions
├── 📁 public/ # Static assets
├── 📁 styles/ # Global styles
└── 📄 package.json # Dependencies & scripts
app/: Contains all application routes using Next.js 15 App Routercomponents/: Reusable UI components following atomic design principlesservices/: API abstraction layer for clean data fetchinghooks/: Custom React hooks for shared logiclib/: Utility functions, helpers, and third-party configurations
Create a .env.local file in the root directory:
# API Configuration
NEXT_PUBLIC_API_BASE_URL=http://localhost:8000/api
NEXT_PUBLIC_WEBSOCKET_URL=ws://localhost:8000/ws
# Razorpay Configuration
NEXT_PUBLIC_RAZORPAY_KEY_ID=your_razorpay_key_id
# AWS S3 Configuration (if handling client-side uploads)
NEXT_PUBLIC_AWS_REGION=your_aws_region
NEXT_PUBLIC_S3_BUCKET_NAME=your_s3_bucket
# Application Configuration
NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_APP_NAME=UPSCprep
# Analytics (Optional)
NEXT_PUBLIC_GA_ID=your_google_analytics_id| Script | Description |
|---|---|
pnpm dev |
Start development server |
pnpm build |
Build for production |
pnpm start |
Start production server |
pnpm lint |
Run ESLint |
pnpm lint:fix |
Fix ESLint issues |
pnpm type-check |
Run TypeScript checks |
pnpm format |
Format code with Prettier |
# Run all tests
pnpm test
# Run tests in watch mode
pnpm test:watch
# Run tests with coverage
pnpm test:coverage- Connect your repository to Vercel
- Configure environment variables
- Deploy automatically on push to main
# Build production image
docker build -t upscprep-frontend:prod .
# Run production container
docker run -p 3000:3000 upscprep-frontend:prodWe welcome contributions! Please see our Contributing Guide for details.
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes
- Run tests:
pnpm test - Commit changes:
git commit -m 'Add amazing feature' - Push to branch:
git push origin feature/amazing-feature - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.