Blind 75 Tracker

A beautiful React application to track your progress on the Blind 75 coding questions.

Features

• Progress Bar: Visual representation of your completion status
• Random Question Picker: Randomly select 3 questions to practice
• Status Tracking: Mark questions as completed with checkboxes
• CSV Integration: All changes are saved directly to your blind75.csv file
• Modern UI: Beautiful gradient design with smooth animations

Setup Instructions

Prerequisites

• Node.js (v16 or higher)
• npm (comes with Node.js)

Installation

1. Install all dependencies (both backend and frontend):

npm run install-all

Or manually:

# Install backend dependencies
npm install

# Install frontend dependencies
cd client
npm install
cd ..

Running the Application

Option 1: Run both servers concurrently (recommended)

npm run dev

This will start:

• Backend server on http://localhost:3001
• Frontend development server on http://localhost:5173

Option 2: Run servers separately

In one terminal:

npm run server

In another terminal:

npm run client

Using the Application

1. Open your browser and navigate to http://localhost:5173
2. You'll see your current progress displayed in the progress bar
3. Click the "Pick Questions" button to randomly select 3 questions
4. A table will appear showing:
   • Question name
   • Link to the LeetCode problem (click "View Problem")
   • Status checkbox
5. Check/uncheck the boxes to mark questions as completed
6. Click "Save" to save your changes to the CSV file
7. Click "Cancel" to discard changes

Project Structure

Blind75/
├── client/                 # React frontend
│   ├── src/
│   │   ├── App.jsx        # Main application component
│   │   ├── App.css        # Styles
│   │   └── index.css      # Global styles
│   └── package.json
├── server/
│   └── server.js          # Express backend server
├── blind75.csv            # Your questions data
├── package.json           # Root package.json
└── README.md             # This file

API Endpoints

• GET /api/questions - Get all questions
• GET /api/progress - Get completion progress
• GET /api/questions/random/:count - Get random questions
• PUT /api/questions/update - Update question status

Troubleshooting

Port already in use: If port 3001 or 5173 is already in use, you can change them:

• Backend: Edit PORT in server/server.js
• Frontend: Edit vite.config.js in the client folder

CORS errors: Make sure both servers are running. The backend must be running on port 3001 for the frontend to connect properly.

CSV not updating: Check that you have write permissions for the blind75.csv file.

Technologies Used

• Frontend: React, Vite
• Backend: Node.js, Express
• CSV Parsing: csv-parse, csv-stringify
• Styling: Custom CSS with modern gradients and animations

License

MIT