CodePlatform - Modern Learning & Development Platform

A cutting-edge platform for students and lecturers to collaborate, learn, and grow together in the digital age. Built with modern web technologies and designed with user experience as the top priority.

🌟 Features

🎨 Premium UI/UX Design

Modern Design System: Custom color palette with 50+ carefully crafted color variations
Dark/Light Mode: Complete theme system with system preference detection
Smooth Animations: 60fps micro-interactions and page transitions
Glassmorphism Effects: Modern blur effects and transparency layers
Responsive Design: Pixel-perfect on mobile, tablet, and desktop
Accessibility: WCAG 2.1 AA compliant with proper contrast ratios

🔐 Advanced Authentication

Role-based Access: Separate student and lecturer experiences
JWT Security: Secure token-based authentication
Password Strength: Real-time validation with visual feedback
Social Login: Google and GitHub integration ready
Remember Me: Persistent sessions with secure storage
Form Validation: Client-side and server-side validation

📱 Interactive Dashboards

Student Dashboard: Course progress, certificates, and achievements
Lecturer Dashboard: Student analytics, course management, revenue tracking
Real-time Statistics: Live data with animated counters
Progress Tracking: Visual progress bars and completion metrics
Quick Actions: One-click access to common tasks

🎛️ Theme Management

Theme Toggle: Multiple variants (button, dropdown) with smooth animations
System Detection: Automatic dark/light mode based on OS preference
FOUC Prevention: No flash of unstyled content on page load
Persistent Storage: Theme preference saved across sessions
Smooth Transitions: 300ms transitions for all theme changes

🛠 Tech Stack

Frontend Technologies

Next.js 15 - React framework with App Router and Turbopack
TypeScript - Full type safety with strict mode
Tailwind CSS v4 - Latest utility-first CSS framework
React Context - Advanced state management for themes
Custom Hooks - Reusable logic with TypeScript generics
Modern Design System - 300+ utility classes and custom components

Backend Technologies

FastAPI - High-performance Python web framework
SQLAlchemy 2.0 - Modern async-capable ORM
Pydantic v2 - Advanced data validation and serialization
Python-JOSE - JWT token handling and validation
Passlib + Bcrypt - Secure password hashing
CORS Middleware - Cross-origin resource sharing
Uvicorn - Lightning-fast ASGI server

Database & Storage

SQLite - Development database (file-based)
MySQL/PostgreSQL - Production database options
LocalStorage - Client-side theme and auth persistence
Database Migrations - Automatic schema management

🚀 Quick Start

Prerequisites

Node.js 18+ and npm
Python 3.8+
Git

Backend Setup

Navigate to backend directory
```
cd backend
```

Create and activate virtual environment

python -m venv env
source env/bin/activate  # On Windows: env\Scripts\activate

Install dependencies

pip install fastapi uvicorn sqlalchemy pydantic python-multipart bcrypt python-jose[cryptography] email-validator passlib

Initialize database
```
python create_db.py
```
Start the development server
```
python run.py
# OR
uvicorn main:app --host 0.0.0.0 --port 8000 --reload
```
✅ API available at: http://localhost:8000
📜 API Documentation: http://localhost:8000/docs

Frontend Setup

Open a new terminal and navigate to frontend
```
cd frontend
```
Install dependencies
```
npm install
```
Start the development server
```
npm run dev
```
✅ Frontend available at: http://localhost:3000
🎨 Theme Demo: http://localhost:3000/theme-demo

📱 Usage Guide

Getting Started

🏠 Visit Homepage - Navigate to http://localhost:3000
🎭 Choose Role - Select Student or Lecturer path
✨ Create Account - Sign up with email and strong password
🔑 Sign In - Access your personalized dashboard
🌚 Toggle Theme - Switch between light, dark, or system mode

🎓 For Students

📚 Browse Courses - Explore available learning content
📈 Track Progress - Monitor completion and achievements
🏆 Earn Certificates - Complete courses for recognition
💻 Interactive Learning - Engage with hands-on materials
🔄 Dashboard Analytics - View learning statistics

👩‍🏫 For Lecturers

➕ Create Courses - Build comprehensive learning experiences
👥 Manage Students - Monitor enrollment and progress
📊 View Analytics - Access detailed performance insights
💰 Track Revenue - Monitor course earnings
📢 Send Updates - Communicate with students

🏠 Project Structure

code-platform-app/
├── frontend/                    # ⚙️ Next.js 15 Frontend
│   ├── app/
│   │   ├── components/         # 🧿 Reusable UI Components
│   │   │   ├── Button.tsx      # Modern button variants
│   │   │   ├── Input.tsx       # Enhanced form inputs
│   │   │   ├── ThemeToggle.tsx # Theme switching component
│   │   │   ├── ThemeScript.tsx # FOUC prevention script
│   │   │   ├── FormWrapper.tsx # Form container with styling
│   │   │   └── RoleCard.tsx    # Interactive role selection
│   │   ├── contexts/           # 💫 React Context Providers
│   │   │   └── ThemeContext.tsx # Theme state management
│   │   ├── dashboard/          # 📊 Dashboard Pages
│   │   │   ├── layout.tsx      # Dashboard layout wrapper
│   │   │   ├── student/        # Student dashboard
│   │   │   └── lecturer/       # Lecturer dashboard
│   │   ├── utils/              # 🔧 Utilities & Helpers
│   │   │   └── api.ts          # API client & auth
│   │   ├── role/               # 🎭 Role selection page
│   │   ├── signin/             # 🔑 Authentication pages
│   │   ├── signup/
│   │   ├── theme-demo/         # 🎨 Theme testing page
│   │   ├── globals.css         # 🎨 Design system & themes
│   │   ├── layout.tsx          # Root layout with providers
│   │   └── page.tsx            # Landing page
│   └── package.json
├── backend/                     # 🐍 FastAPI Backend
│   ├── main.py                 # FastAPI app with JWT auth
│   ├── models.py               # SQLAlchemy models
│   ├── database.py             # Database configuration
│   ├── create_db.py            # Database initialization
│   └── run.py                  # Development server
├── README.md
└── CONTRIBUTING.md

🎨 Design System

Our design system rivals industry leaders like Vercel, Linear, and Stripe:

🌈 Color System

50+ Color Variations: Each color has 11 shades (50-950)
Semantic Colors: Background, foreground, muted, border, ring
Theme Compatibility: Perfect contrast ratios in light/dark modes
CSS Custom Properties: Dynamic theming with CSS variables

🔤 Typography Scale

Fluid Typography: Responsive sizing from mobile to desktop
Font Variants: Geist Sans & Mono for optimal readability
Hierarchy: 10 text sizes (xs to 6xl) with proper line heights
Weight System: 4 font weights for perfect emphasis

🧿 Component Library

Button Variants: 6 styles (primary, secondary, ghost, destructive, success, gradient)
Input Components: 3 variants with icons and validation states
Form Wrappers: Glassmorphism containers with floating elements
Theme Toggles: 2 variants (button, dropdown) with smooth animations

✨ Animation System

Micro-interactions: Hover states with 200-300ms transitions
Page Transitions: Fade-in, slide-up, scale-in animations
Loading States: Beautiful spinners and skeleton screens
60fps Performance: Hardware-accelerated CSS animations

🔧 Configuration

Environment Variables

Create a .env file in the frontend directory:

NEXT_PUBLIC_API_URL=http://localhost:8000

Database Configuration

The backend uses SQLite by default. To use MySQL or PostgreSQL, update backend/database.py:

# For MySQL
DATABASE_URL = "mysql+pymysql://username:password@localhost:3306/codeplatform"

# For PostgreSQL
DATABASE_URL = "postgresql://username:password@localhost:5432/codeplatform"

🚀 Deployment

Frontend (Vercel)

Push your code to GitHub
Connect your repository to Vercel
Set environment variables
Deploy

Backend (Railway/Heroku)

Update database configuration for production
Add production environment variables
Deploy using your preferred platform

Theme Configuration

Customize the design system in app/globals.css:

:root {
  /* Primary brand colors */
  --primary-500: #0ea5e9;   /* Main brand color */
  --primary-600: #0284c7;   /* Hover states */
  
  /* Custom gradients */
  --gradient-brand: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

🚀 API Documentation

Authentication Endpoints

# Create new account
POST /signup
{
  "username": "john_doe",
  "email": "john@example.com", 
  "password": "SecurePass123!",
  "role": "student"
}

# Sign in
POST /signin
{
  "email": "john@example.com",
  "password": "SecurePass123!", 
  "role": "student"
}

# Health check
GET /

Response Examples

// Successful signup
{
  "message": "Student account created successfully",
  "user_id": 1,
  "success": true
}

// Successful signin
{
  "access_token": "eyJhbGciOiJIUzI1NiIs...",
  "token_type": "bearer",
  "user": {
    "id": 1,
    "username": "john_doe",
    "email": "john@example.com",
    "role": "student"
  },
  "message": "Welcome back, john_doe!"
}

Future API Endpoints

GET /courses - List all available courses
POST /courses - Create new course (lecturers only)
GET /users/profile - Get current user profile
POST /enrollment - Enroll in a course
GET /analytics - Get dashboard analytics
POST /certificates - Generate course certificates

🔒 Security Features

Password Hashing: Bcrypt for secure password storage
JWT Tokens: Secure authentication tokens
CORS Protection: Configured for frontend origin
Input Validation: Pydantic models for data validation
SQL Injection Protection: SQLAlchemy ORM

🎯 Future Enhancements

📄 License

This project is licensed under the MIT License.

🤝 Contributing

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

📞 Support

For support and questions, please open an issue on GitHub.

Built with ❤️ for learners worldwide.

Name		Name	Last commit message	Last commit date
Latest commit History 8 Commits
backend		backend
frontend		frontend
CONTRIBUTING.md		CONTRIBUTING.md
README.md		README.md
package-lock.json		package-lock.json

favmaclegend-ops/code-paltform-app

Folders and files

Latest commit

History

Repository files navigation