🚀 ContribStart

Open-Source Contribution Discovery & Tracking Platform

ContribStart simplifies the open-source journey for beginners by centralizing issue discovery, Git/GitHub educational resources, and personal contribution tracking — all in one place.

🔗 Live Demo: contrib-start-drab.vercel.app

---

📋 Table of Contents

• About
• Features
• Tech Stack
• Architecture
• Getting Started
• Environment Variables
• Project Structure
• Challenges Overcome
• Future Scope
• Contributing
• License

---

🧩 About

Breaking into open-source can be overwhelming. ContribStart removes that barrier by giving new contributors a single platform to:

• Discover beginner-friendly issues tagged good-first-issue
• Learn Git & GitHub workflows through guided tutorials
• Track and visualize their own contribution progress

---

🔑 Features

Feature	Description
🔐 User Auth	Secure registration, login, and protected routes via JWT
🔍 Issue Explorer	Curated list of beginner-friendly open-source tasks (good-first-issue)
📚 Git Learning Hub	Step-by-step tutorials on cloning, branching, commits, and PR workflows
📊 Contribution Tracker	Personal dashboard to log, update status, and monitor your open-source progress

---

🏗️ Tech Stack

Frontend

• React (Vite)
• Tailwind CSS
• Axios (REST API calls)

Backend

• Node.js
• Express.js
• MongoDB Atlas (Database)
• JWT (Authentication)

Deployment

• Frontend → Vercel
• Backend → Render

---

🔄 Architecture

React (Vite + Tailwind)
        │
        │  REST API (Axios)
        ▼
Express.js (Node.js)
        │
        │  Mongoose ODM
        ▼
  MongoDB Atlas

---

🚀 Getting Started

Prerequisites

• Node.js v18+
• npm or yarn
• MongoDB Atlas account (or local MongoDB instance)

1. Clone the Repository

git clone https://github.com/Parthwebde12/ContribStart.git
cd ContribStart

2. Setup the Backend

cd backend
npm install

Create a .env file in the backend/ directory (see Environment Variables).

npm start

The backend will run on http://localhost:5000 by default.

3. Setup the Frontend

cd ../frontend
npm install

Create a .env file in the frontend/ directory (see Environment Variables).

npm run dev

The frontend will run on http://localhost:5173 by default.

---

🔐 Environment Variables

Backend (backend/.env)

PORT=5000
MONGO_URI=your_mongodb_atlas_connection_string
JWT_SECRET=your_jwt_secret_key
CLIENT_URL=http://localhost:5173

Frontend (frontend/.env)

VITE_API_URL=http://localhost:5000

⚠️ Never commit .env files. They are listed in .gitignore.

---

📁 Project Structure

ContribStart/
├── backend/
│   ├── controllers/       # Route handler logic
│   ├── middleware/        # JWT auth middleware
│   ├── models/            # Mongoose schemas
│   ├── routes/            # Express route definitions
│   ├── .env               # Environment variables (not committed)
│   └── index.js           # Server entry point
│
├── frontend/
│   ├── src/
│   │   ├── components/    # Reusable UI components
│   │   ├── pages/         # Page-level components
│   │   ├── services/      # Axios API calls
│   │   └── main.jsx       # React entry point
│   ├── .env               # Environment variables (not committed)
│   └── vite.config.js
│
└── README.md

---

🛠️ Challenges Overcome

CORS Configuration Resolved cross-origin issues between the Vercel-hosted frontend and the Render-hosted backend by properly configuring CORS headers and allowlisting the production frontend URL.

Session Security Implemented stateless, token-based authentication using JWT middleware to protect private routes without server-side session storage.

Environment Management Cleanly separated environment configs across local development and production deployments using .env files and platform-specific environment variable dashboards.

---

🔮 Future Scope

• 🐙 GitHub API Integration — Real-time automated fetching of good-first-issue listings
• 🤖 AI Recommendations — Personalized project and issue suggestions based on your skills and history
• 🏆 Gamification — Contribution streaks, achievement badges, and level-up metrics to keep you motivated

---

🤝 Contributing

Contributions are welcome! This project is built for developers learning open source — feel free to open issues or submit PRs.

1. Fork the repository
2. Create your feature branch: git checkout -b feat/your-feature
3. Commit your changes: git commit -m "feat: add your feature"
4. Push to the branch: git push origin feat/your-feature
5. Open a Pull Request

---

📄 License

This project is open source and available under the MIT License.

---

Built for developers, by developers. ❤️