ContribStart

• 

  home page

## Inspiration

Most beginners want to contribute to open source but give up before making their first PR. They don't know where to find issues, Git feels overwhelming, and there's no guided path from zero to first contribution. I wanted to build something that removes every single barrier and makes the whole journey feel achievable — even on day one.

## What it does

ContribStart is a full-stack web dashboard with three core features:

1. Issue Browser — filters live GitHub "good first issue" tickets by programming language and topic using the GitHub REST API
2. Git Guide — a 7-step interactive checklist (fork → clone → branch → commit → push → PR) with exact terminal commands and copy buttons
3. Progress Tracker — lets users log every issue explored and PR submitted, earn milestone badges, and see their open source journey grow over time

Users create a free account, their progress is saved to MongoDB, and the JWT-based auth keeps everything secure across sessions.

## How I built it

Frontend: React + Tailwind CSS + React Router + Axios
Backend: Node.js + Express REST API
Database: MongoDB Atlas + Mongoose
Auth: JWT (JSON Web Tokens) + bcryptjs for password hashing
Data: GitHub REST API v3 for live issue fetching
Hosting: Vercel (frontend) + Render (backend)

I built it feature by feature — starting with the server and MongoDB connection, then models and auth routes, then the GitHub API integration, and finally the full React frontend with login, register, and protected routes.

## Challenges I ran into

- MongoDB Atlas SSL/TLS connection errors on Node.js v22 on Windows — fixed by upgrading mongoose to the latest version
- dotenv not loading .env.local by default — solved by passing the path explicitly: require("dotenv").config({ path: ".env.local" })
- JWT auth context in React rendering before the AuthProvider was mounted — fixed by restructuring App.jsx so Navbar and all routes are inside the AuthProvider
- GitHub API rate limiting — solved by routing all requests through the backend with a server-side token instead of calling from the frontend directly

## Accomplishments that I'm proud of

- Built a complete full-stack app from scratch during the hackathon
- GitHub API integration that fetches real, live beginner-friendly issues
- Clean JWT auth flow — register, login, protected routes, and persistent sessions
- Progress tracker that saves to MongoDB and works across devices
- A UI that feels simple and approachable — not intimidating for complete beginners

## What I learned

- How to structure a full-stack project cleanly with separate frontend and backend folders
- How JWT authentication works end to end — from hashing passwords with bcrypt to verifying tokens on protected routes
- How to use React Context API for global auth state across an entire app
- How the GitHub REST API works for searching issues with filters
- How to debug Node.js + MongoDB connection issues on Windows

## What's next for ContribStart

- GitHub OAuth login so users can sign in with their GitHub account directly
- Community feed — see other beginners' first PRs and cheer them on
- Mentor matching — connect beginners with experienced contributors for code review
- Notification system — get alerts when a saved issue gets new activity
- Mobile app version for learning Git on the go
- Leaderboard — friendly competition to encourage more contributions

Built With

• axios
• bcryptjs
• express.js
• github-rest-api-v3
• jwt-(json-web-tokens)
• mongodb-atlas
• mongoose
• node.js
• react
• react-router
• render
• tailwind-css
• vercel
• vite