Codify

Codify is a comprehensive web application that offers courses and roadmaps to various technical fields of computer science. The application features a user-friendly interface, real-time feedback, and a variety of resources to enhance learning.

Generate Convert Improve

Install / Use

/learn @Roshansuthar1105/Codify

About this skill

Quality Score

0/100

README

Codify – Interactive Coding Learning Platform Live Demo

Welcome to Codify, your all-in-one coding learning platform! Bookmarked learning paths, interactive courses, personalized dashboards, dark/light themes, and more — all in one place.

</div> <div align="center"> <img src="https://readme-typing-svg.herokuapp.com?font=Fira+Code&weight=700&size=24&duration=3000&pause=1000&color=38B2AC&center=true&vCenter=true&width=900&lines=Learn+by+Doing+%F0%9F%92%BB;Interactive+Courses+%26+Curated+Roadmaps+%F0%9F%93%9A;Contribute+and+Grow+with+Open+Source+%F0%9F%8C%8D;Happy+Coding+%E2%9C%A8" alt="Typing Banner"/> </div> <img src="https://user-images.githubusercontent.com/74038190/212284100-561aa473-3905-4a80-b561-0d28506553ee.gif" width="100%">

✨ Vision

<p>Democratize coding education by creating an interactive, accessible platform where anyone can learn programming through hands-on practice, curated roadmaps, and community-driven content.</p>

🎯 Mission

<ul> <li>Build the most comprehensive interactive coding learning platform</li> <li>Provide structured learning paths for multiple programming languages and frameworks</li> <li>Foster a community of learners and contributors through open-source collaboration</li> <li>Make quality coding education accessible to everyone, everywhere</li> </ul>

📊 Project Insights

<table align="center"> <thead> <tr> <td><b>🌟 Stars</b></td> <td><b>🍴 Forks</b></td> <td><b>👥 Contributors</b></td> </tr> </thead> <tbody> <tr> <td><img alt="Stars" src="https://img.shields.io/github/stars/roshansuthar1105/codify?style=flat&logo=github"/></td> <td><img alt="Forks" src="https://img.shields.io/github/forks/roshansuthar1105/codify?style=flat&logo=github"/></td> <td><img alt="Contributors Count" src="https://img.shields.io/github/contributors/roshansuthar1105/codify?style=flat&color=blue&logo=github"/></td> </tr> </tbody> </table> <table align="center"> <thead> <tr> <td><b>🐛 Issues</b></td> <td><b>🔔 Open PRs</b></td> <td><b>🔕 Closed PRs</b></td> </tr> </thead> <tbody> <tr> <td><img alt="Issues" src="https://img.shields.io/github/issues/roshansuthar1105/codify?style=flat&logo=github"/></td> <td><img alt="Open PRs" src="https://img.shields.io/github/issues-pr/roshansuthar1105/codify?style=flat&logo=github"/></td> <td><img alt="Closed PRs" src="https://img.shields.io/github/issues-pr-closed/roshansuthar1105/codify?style=flat&color=critical&logo=github"/></td> </tr> </tbody> </table> <p align="center"> <a href="https://github-readme-stats.vercel.app/api/pin/?username=roshansuthar1105&repo=codify"> <img src="https://github-readme-stats.vercel.app/api/pin/?username=roshansuthar1105&repo=codify&show_owner=true" alt="Repo Card"/> </a> </p>

✨ Highlights

🎓 Interactive Courses with hands-on lessons
🧭 Curated Roadmaps for multiple tech stacks
🌓 Dark/Light Themes with customization
📈 Progress Tracking and resume learning
📱 Responsive UI across devices
🛡️ JWT Auth, role-based access (Admin/Learner)

💡 Why Codify?

<ul> <li><b>Learn by Doing</b>: Interactive courses with hands-on coding exercises</li> <li><b>Structured Learning</b>: Curated roadmaps for web development, mobile apps, and more</li> <li><b>Progress Tracking</b>: Resume learning where you left off with detailed progress analytics</li> <li><b>Community Driven</b>: Open-source platform built by developers, for developers</li> <li><b>Modern UI/UX</b>: Dark/light themes with responsive design across all devices</li> <li><b>Free Forever</b>: No paywalls or premium features—quality education for everyone</li> </ul>

🌐 Try Codify: https://codifylearn.netlify.app

📸 Screenshots & Demo

Demo Accounts

👤 User Account

Email: demo@gmail.com
Password: demo1234

👨‍💼 Read Only Admin Account

Email: admin@gmail.com
Password: admin123

🚀 Getting Started

Follow these steps to set up Codify locally and begin contributing.

Prerequisites

Node.js (v16 or higher)
npm or yarn
MongoDB
Git
Code editor (VS Code recommended)

Installation

Clone Codify Repository

Frontend Setup

Clone the repository

git clone https://github.com/Roshansuthar1105/Codify.git

Navigate to the client directory
```
cd codify/client
```
Install dependencies
```
npm install
```

Environment (Frontend)

Create .env in client/:

 VITE_SERVER_API=http://localhost:5050   
 VITE_YOUTUBE_API=add_your_youtube_api_here  
 VITE_GITHUB_TOKEN=add_your_github_token_here   
 VITE_RAPIDAPI_KEY=add_your_rapidapi_key_here

Run Frontend
```
npm run dev
```
Open your browser and navigate to http://localhost:5173

Backend Setup

Navigate to the server directory
```
cd ..
cd codify/server
```
Install dependencies
```
npm install
```

Environment (Backend)

Create .env in server/:

 MONGODB_URI="mongodb+srv://publicuser:public_codify@cluster0.5bysaia.mongodb.net/" #this is the owner MONGODB URI, you can use it!
 PORT=5050
 JWT_SECRET=your_jwt_secret
 CLIENT_CORS=* #Allow all origins for development, change in production
 EMAIL_USER=your@gmail.com
 EMAIL_PASS=your_google_app_password
 GOOGLE_CLIENT_ID=your_google_client_id
 GOOGLE_CLIENT_SECRET=your_google_client_secret
 GOOGLE_LOGIN_CALLBACK_URL=http://localhost:5050/api/v1/auth/google/login/callback
 GOOGLE_SIGNUP_CALLBACK_URL=http://localhost:5050/api/v1/auth/google/signup/callback
 FRONTEND_URL=http://localhost:5173  
 YOUTUBE_API_KEY=your_youtube_api_key

Run Backend

npm run start
# API: http://localhost:5050

🔧 Troubleshooting

| Issue | Possible Cause | Solution | |-------|----------------|----------| | Banner image not showing | Wrong path or file not uploaded | Check if the image exists in /assets/ and update the correct path in README | | Animations not visible | Browser does not support CSS animations | Use a modern browser like Chrome/Edge/Firefox | | Project not running after clone | Dependencies not installed | Run npm install or yarn install | | Git upstream not working | Upstream not added properly | Run git remote add upstream <repo-url> and verify using git remote -v | | Merge conflicts while updating fork | Conflicting changes between fork and upstream | Resolve conflicts manually, then git add ., git commit, and git push |

Note:

You might need to run both the client and server simultaneously for fetching data in your local machine.

📁 Project Structure

📦 project-root
├── 📁 .github
│   ├── 📁 ISSUE_TEMPLATE
│   │   └── style_enhencement.md
│   ├── 📁 workflows
│   │   └── ci.yml
│   └── 📄 PULL_REQUEST_TEMPLATE.md
│
├── 📁 client
│   ├── 📁 public
│   ├── 📁 src
│   ├── 📄 .eslintrc.cjs
│   ├── 📄 .gitignore
│   ├── 📄 README.md
│   ├── 📄 index.html
│   ├── 📄 netlify.toml
│   ├── 📄 package-lock.json
│   ├── 📄 package.json
│   ├── 📄 postcss.config.js
│   ├── 📄 tailwind.config.js
│   ├── 📄 vite.config.js
│   └── 📄 webpack.config.js
│
├── 📁 python
│   ├── 📄 .env.example
│   ├── 📄 app.py
│   └── 📄 requirements.txt
│