MERN Stack Tech Career Platform

A full-stack application built with MongoDB, Express.js, React, and Node.js for exploring tech career paths, roadmaps, and company information.

🚀 Features

• Authentication: JWT-based user registration and login
• DSA Practice Sheets: Dynamic problem sets with progress tracking
  • 25+ curated problems across 5 categories
  • Mark problems as completed
  • Filter by difficulty and category
  • Password-protected admin interface to add new problems
• Career Paths: Explore different tech career options
• Roadmaps: Detailed learning paths for various technologies
• Companies: Information about tech companies and their requirements
• Dashboard: Personalized user dashboard with progress tracking
• Responsive Design: Works on desktop and mobile devices

🛠 Tech Stack

Frontend

• React 18 with TypeScript
• Vite for build tooling
• Tailwind CSS for styling
• Lucide React for icons

Backend

• Node.js with Express.js
• MongoDB with Mongoose
• JWT for authentication
• bcryptjs for password hashing

📋 Prerequisites

Before running this application, make sure you have:

• Node.js (version 18 or higher)
• MongoDB (running locally or MongoDB Atlas)
• npm or yarn

🔧 Installation & Setup

1. Clone and Install Dependencies

# Install frontend dependencies
npm install

# Install backend dependencies
cd server
npm install
cd ..

2. Start MongoDB

Option A: Local MongoDB

mongod

Option B: MongoDB Atlas

Update the MONGO_URI in server/.env to your Atlas connection string.

3. Start the Application

To run the application, follow these steps in order:

1. Seed the Database (populate with sample data):

   cd server && node seed-dsa.js && cd ..

2. Start the Backend Server:

   cd server && npm run dev

3. Start the Frontend Server (in a new terminal):

   npm run dev

Alternative: Quick Start Script (Windows)

# Start both servers automatically (after seeding)
./start-mern.bat

4. Access the Application

• Frontend: http://localhost:5173
• Backend API: http://localhost:5000

📁 Project Structure

├── public/                 # Static files
├── src/                    # Frontend source code
│   ├── components/         # React components
│   │   ├── auth/           # Authentication components
│   │   ├── layout/         # Layout components
│   │   └── ui/             # UI components
│   ├── context/            # React context providers
│   ├── data/               # Static data files (deprecated)
│   ├── pages/              # Page components
│   │   └── DSASheetsPage.tsx # DSA problems interface
│   └── services/           # API services
│       └── apiService.ts   # API service with DSA methods
├── server/                 # Backend source code
│   ├── models/             # MongoDB models
│   │   └── DSAProblem.js   # DSA problem model
│   ├── routes/             # Express routes
│   │   ├── auth.js         # Authentication routes
│   │   ├── dsa.js          # DSA problem routes
│   │   └── progress.js     # User progress routes
│   ├── seed-dsa.js         # Database seeding script
│   ├── .env                # Environment variables
│   └── index.js            # Server entry point
└── README.md

🔑 Environment Variables

Create a server/.env file with:

MONGO_URI=mongodb://localhost:27017/techcareer
JWT_SECRET=your-super-secret-jwt-key
PORT=5000

🧪 Testing the Application

1. Check Server Status: Run ./check-mern-status.bat
2. Seed DSA Problems: Run cd server && node seed-dsa.js to populate the database with sample problems
3. Register: Create a new account at http://localhost:5173/signup
4. Login: Sign in with your credentials
5. Explore: Navigate through career paths, roadmaps, and companies
6. DSA Practice: Visit the DSA Sheets page to practice problems and track progress
7. Add Problems: Use password "virus@123" to access the admin interface for adding new problems

🚀 Quick Start Commands

1. Install Dependencies

# Install all dependencies (frontend + backend)
npm install
cd server && npm install && cd ..

2. Start MongoDB

# Option A: Local MongoDB
mongod

# Option B: MongoDB Atlas (update server/.env)
# MONGO_URI=mongodb+srv://your-connection-string

3. Seed Database (Optional but Recommended)

# Populate database with sample DSA problems
cd server && node seed-dsa.js && cd ..

4. Start the Application

Option A: Manual Start (Recommended for Development)

# Terminal 1 - Backend Server
cd server && npm run dev

# Terminal 2 - Frontend Server
npm run dev

Option B: Quick Start Script (Windows)

# Start both servers automatically
./start-mern.bat

Option C: Production Build

# Build frontend for production
npm run build

# Start backend in production mode
cd server && npm start

5. Access the Application

• Frontend: http://localhost:5173
• Backend API: http://localhost:5000
• DSA Sheets: Navigate to DSA Sheets page after login

🔧 Available Scripts

Frontend

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build

Backend

• npm start - Start production server
• npm run dev - Start development server with nodemon

Database

• cd server && node seed-dsa.js - Seed database with sample problems

🐛 Troubleshooting

Common Issues

1. MongoDB Connection Error

   • Ensure MongoDB is running locally
   • Check the MONGO_URI in server/.env

2. Port Already in Use

   • Frontend (5173): Kill the process using the port
   • Backend (5000): Change PORT in server/.env

3. Authentication Issues

   • Clear browser localStorage
   • Check JWT_SECRET in server/.env

Logs and Debugging

• Backend logs appear in the server terminal
• Frontend logs appear in browser console
• Check network tab for API request/response details

🚀 Deployment

Frontend (Vercel/Netlify)

npm run build
# Deploy the 'dist' folder

Backend (Heroku/Railway)

• Set environment variables
• Deploy the 'server' folder
• Ensure MongoDB Atlas is configured

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📄 License

This project is licensed under the MIT License.

---

Happy coding! 🎉