README.md

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.

📊 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)

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

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

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

🤝 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