Codify - Interactive Coding Learning Platform

Master coding with interactive courses, personalized learning paths, and expert-curated roadmaps

📋 Table of Contents

• Overview
• Key Features
• Tech Stack
• Performance Optimizations
• Screenshots
• Live Demo
• Installation
• Project Structure
• API Documentation
• Contributing
• Roadmap
• License
• Acknowledgments

🚀 Overview

Codify is a comprehensive educational platform designed to help users learn coding through interactive courses, personalized learning paths, and expert-curated roadmaps. The platform features a modern, responsive interface with dark/light theme support, progress tracking, and a robust course management system.

Our mission is to make coding education accessible, engaging, and effective for learners at all levels, from beginners to advanced developers.

✨ Key Features

For Learners

• Interactive Courses: Engage with dynamic coding lessons and tutorials
• Personalized Dashboard: Track your progress, continue watching, and manage saved courses
• Course Roadmaps: Follow structured learning paths for different programming domains
• Dark/Light Theme: Choose your preferred visual experience with theme color customization
• Progress Tracking: Monitor your learning journey with detailed statistics
• Responsive Design: Seamless experience across all devices

For Administrators

• Comprehensive Admin Panel: Manage users, courses, and content
• Course Management: Add, edit, and organize courses and learning materials
• User Management: Monitor user activity and progress
• Analytics Dashboard: Track platform usage and engagement metrics

🛠️ Tech Stack

Frontend

• React 18: Component-based UI development
• TailwindCSS: Utility-first CSS framework for styling
• React Router: Client-side routing
• Context API: State management
• Lazy Loading: Performance optimization for components and routes
• JWT Authentication: Secure user authentication

Backend

• Node.js: JavaScript runtime
• Express: Web application framework
• MongoDB: NoSQL database for data storage
• Mongoose: MongoDB object modeling
• JWT: JSON Web Tokens for authentication

DevOps & Tools

• Vite: Next-generation frontend tooling
• ESLint: Code quality and style checking
• Netlify: Frontend deployment and hosting
• Git & GitHub: Version control and collaboration

🔧 Performance Optimizations

Codify implements several performance optimization techniques:

1. Lazy Loading: Components and routes are loaded on demand
2. Code Splitting: Bundle splitting for faster initial load times
3. Memoization: Prevents unnecessary re-renders with useMemo and useCallback
4. Image Optimization: Efficient image loading and rendering
5. SEO Optimization: Comprehensive meta tags and structured data
6. Responsive Design: Optimized for all device sizes

📸 Screenshots

🌐 Live Demo

Experience Codify in action: https://codifylearn.netlify.app

Demo Accounts

• Regular User:
  • Email: demo@codify.com
  • Password: demo123
• Admin User:
  • Email: admin@codify.com
  • Password: admin123

📥 Installation

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• MongoDB (local or cloud instance)

Frontend Setup

1. Clone the repository

   git clone https://github.com/roshansuthar1105/codify-frontend.git

2. Navigate to the client directory

   cd codify-frontend/client

3. Install dependencies

   npm install
   # or
   yarn install

4. Create a .env file in the client directory with the following variables:

   VITE_API_URL=http://localhost:5000/api
   VITE_YOUTUBE_API=your_youtube_api_key
   

5. Start the development server

   npm run dev
   # or
   yarn dev

6. Open your browser and navigate to http://localhost:5173

Backend Setup

1. Clone the backend repository

   git clone https://github.com/roshansuthar1105/codify-backend.git

2. Navigate to the server directory

   cd codify-backend

3. Install dependencies

   npm install
   # or
   yarn install

4. Create a .env file with the following variables:

   PORT=5000
   MONGODB_URI=your_mongodb_connection_string
   JWT_SECRET=your_jwt_secret
   

5. Start the server

   npm start
   # or
   yarn start

📁 Project Structure

client/
├── public/             # Static files
├── src/
│   ├── components/     # Reusable UI components
│   ├── context/        # React Context providers
│   ├── layouts/        # Page layout components
│   ├── pages/          # Main application pages
│   ├── store/          # State management
│   ├── utils/          # Utility functions
│   ├── App.jsx         # Main application component
│   └── main.jsx        # Application entry point
├── index.html          # HTML template
└── vite.config.js      # Vite configuration

server/
├── controllers/        # Request handlers
├── models/             # Database models
├── routes/             # API routes
├── middleware/         # Custom middleware
├── utils/              # Utility functions
└── server.js           # Server entry point

📚 API Documentation

Authentication Endpoints

• POST /api/auth/register - Register a new user
• POST /api/auth/login - Login a user
• GET /api/auth/me - Get current user information

Course Endpoints

• GET /api/v1/courses - Get all courses
• GET /api/v1/courses/:id - Get a specific course
• POST /api/v1/courses - Create a new course (admin only)
• PUT /api/v1/courses/:id - Update a course (admin only)
• DELETE /api/v1/courses/:id - Delete a course (admin only)

User Progress Endpoints

• GET /api/progress - Get user's progress for all courses
• GET /api/progress/:courseId - Get user's progress for a specific course
• PUT /api/progress/:courseId - Update user's progress for a course

User Activity Endpoints

• GET /api/activity - Get user's activity history
• POST /api/activity/add - Add a new activity record

Watchlist Endpoints

• GET /api/user/watchlist - Get user's watchlist
• POST /api/user/addToWatchlist - Add/remove a course to/from watchlist

🤝 Contributing

We welcome contributions to Codify! Here's how you can help:

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature

3. Commit your changes

   git commit -m 'Add some amazing feature'

4. Push to the branch

   git push origin feature/amazing-feature

5. Open a Pull Request

Please read our Contributing Guidelines for more details.

🗺️ Roadmap

• Mobile application (React Native)
• Interactive code editor and playground
• Peer-to-peer learning and mentorship
• Gamification elements (badges, achievements)
• AI-powered learning recommendations
• Community forums and discussion boards
• Integration with GitHub for project-based learning

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Inspired by leading educational platforms like Coursera, Udemy, and freeCodeCamp
• Special thanks to all contributors and the open-source community
• YouTube API for video content integration
• All the amazing instructors who provided course content

---

Made with ❤️ by the Codify Team

Twitter • Facebook • Instagram • Contact