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.

✨ Vision

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

🎯 Mission

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

📊 Project Insights

🌟 Stars	🍴 Forks	👥 Contributors

🐛 Issues	🔔 Open PRs	🔕 Closed PRs

✨ 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?

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

🌐 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

1. Clone the repository

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

2. Navigate to the client directory

   cd codify/client

3. Install dependencies

   npm install

4. 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

5. Run Frontend

   npm run dev

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

Backend Setup

1. Navigate to the server directory

   cd ..
   cd codify/server

2. Install dependencies

   npm install

3. 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

4. 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
│
├── 📁 server
│   ├── 📁 .github
│   │   └── 📁 workflows
│   │       └── (save complete code)
│   ├── 📁 config
│   ├── 📁 controllers
│   ├── 📁 dataconnect-generated
│   │   └── 📁 js
│   │       └── default-connector
│   ├── 📁 dataconnect
│   ├── 📁 middlewares
│   ├── 📁 models
│   ├── 📁 public
│   ├── 📁 routes
│   ├── 📁 utils
│   ├── 📁 validations
│   ├── 📄 .gitignore
│   ├── 📄 README.md
│   ├── 📄 package-lock.json
│   ├── 📄 package.json
│   └── 📄 server.js
│
├── 📄 .gitignore
├── 📄 CODE_OF_CONDUCT.md
├── 📄 CONTRIBUTING.md
├── 📄 LEARN.md
├── 📄 License
├── 📄 README.md
├── 📄 Readme-1.md
├── 📄 Readme1.md
├── 📄 SECURITY.md
├── 📄 package-lock.json
└── 📄 package.json

🗺️ Project Flowchart

🤝 Contributing to Codify

Step	Guideline
Pick Issues	Choose an unassigned issue (or open a new one) and wait for approval.
Responsive Design	Ensure Tailwind CSS responsiveness across breakpoints.
Code Quality	Write clean, modular components inside src/components/*. Use ESLint & Prettier.
Pull Requests	Submit one issue per PR with a clear description & screenshots (where relevant).
Communication	Use Discussions/Issues for queries. Avoid spammy comments.

Quick Flow

git checkout -b feature/amazing-feature
git commit -m "feat: add amazing feature"
git push origin feature/amazing-feature
# then open a Pull Request

detailed description

1. Fork the repository
2. Add an upstream to keep your fork synchronized with the original repository

   git remote add upstream https://github.com/Roshansuthar1105/Codify.git

3. Fetch Changes from the upstream

   git fetch upstream

4. Create a feature branch

   git checkout -b feature/amazing-feature

5. Commit your changes

   git commit -m 'Add some amazing feature'

6. Push to the branch

   git push origin feature/amazing-feature

7. Open a Pull Request

🤝👤 Contribution Guidelines

We love our contributors! CONTRIBUTE.md Will be Coming Soon.

Thank you once again to all our contributors who has contributed to Codify Your efforts are truly appreciated. 💖👏

See the full list of contributors and their contributions on the GitHub Contributors Graph.

Show some by starring this awesome repository!

💡 Suggestions & Feedback

Feel free to open issues or discussions if you have any feedback, feature suggestions, or want to collaborate!

🙌 Support & Star

If you find this project helpful, please give it a star ⭐ to support more such educational initiatives!

⭐ Stargazers

🍴 Forkers

🧑‍💻Project Admin:

Roshan Suthar

Give us a Star and let's make magic!

👨‍💻 Built with ❤️ by the Codify Team ❤️ Roshan Suthar and Contributors ❤️ open an issue | Watch Demo

Ready to show off your coding achievements? Get started with Codify today! 🚀

⬆️ Back to Top

DEMO ❤️

screen-recording-2025-10-16-200056_GsQM4H60.mp4