DSA Logger 📚

A full-stack application for tracking Data Structures and Algorithms practice problems with a beautiful UI and powerful analytics.

🌟 Features

• ✅ Admin Dashboard - Add and manage DSA problems
• 📊 Statistics Dashboard - View progress with charts and analytics
• 🎯 Problem Tracking - Track problems by platform, difficulty, and topic
• 🔥 Streak Tracking - Monitor your daily solving streak
• 📈 Weekly Activity Chart - Visualize your 7-day progress
• 🎨 Modern UI - Beautiful glass-morphism design with dark mode
• 🚀 Fast & Responsive - Built with React and optimized for performance

📁 Project Structure

DSA-logger/
├── frontend/                    # React + Vite + TypeScript
│   ├── src/
│   │   ├── components/         # Reusable UI components
│   │   ├── pages/             # Admin & Dashboard pages
│   │   ├── hooks/             # Custom React hooks
│   │   ├── utils/             # Helper functions
│   │   └── types/             # TypeScript types
│   └── package.json
│
└── backend/                    # Node.js + Express + TypeScript
    ├── src/
    │   ├── config/            # Database configuration
    │   ├── controllers/       # Request handlers
    │   ├── models/           # MongoDB models
    │   ├── routes/           # API routes
    │   ├── app.ts            # Express app setup
    │   └── server.ts         # Server entry point
    └── package.json

🚀 Quick Start

Prerequisites

• Node.js (v18 or higher)
• MongoDB (local or Atlas)
• npm or yarn

Backend Setup

1. Navigate to backend directory:

cd backend

2. Install dependencies:

npm install

3. Create .env file:

PORT=5000
NODE_ENV=development
MONGO_URI=mongodb://localhost:27017/dsa-log

4. Start the backend server:

npm run dev

The backend API will run on http://localhost:5000

Frontend Setup

1. Navigate to frontend directory:

cd frontend

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

The frontend will run on http://localhost:8080

📱 Application Pages

Main Dashboard (http://localhost:8080/)

• View all problems in a searchable table
• Filter by difficulty and topic
• See statistics: total problems, 7-day count, streak
• Weekly activity chart
• Delete problems

Admin Dashboard (http://localhost:8080/admin)

• Add new DSA problems
• Form fields:
  • Problem Title
  • Platform (LeetCode, CodeStudio, HackerRank, etc.)
  • Difficulty (Easy, Medium, Hard)
  • Topic (Arrays, Strings, DP, etc.)
  • Status (Solved, Revisit)
  • Date Solved
  • Notes (optional)
• Real-time stats preview
• Auto-reset form after submission

🛠️ Technologies

Frontend

• React 18 - UI library
• TypeScript - Type safety
• Vite - Build tool
• Tailwind CSS - Styling
• shadcn/ui - Component library
• React Query - Data fetching & caching
• React Router - Navigation
• date-fns - Date utilities
• Sonner - Toast notifications

Backend

• Node.js - Runtime
• Express - Web framework
• TypeScript - Type safety
• MongoDB & Mongoose - Database
• CORS - Cross-origin support
• dotenv - Environment variables
• tsx - TypeScript execution

🔌 API Endpoints

Method	Endpoint	Description
GET	/health	Health check
GET	/api/problems	Get all problems
GET	/api/problems/:id	Get single problem
POST	/api/problems	Create new problem
PUT	/api/problems/:id	Update problem
DELETE	/api/problems/:id	Delete problem

📊 Database Schema

{
  title: String,           // Problem title
  platform: String,        // LeetCode, CodeStudio, etc.
  difficulty: String,      // Easy, Medium, Hard
  topic: String,          // Arrays, Strings, DP, etc.
  status: String,         // Solved, Revisit
  date_solved: String,    // ISO date string
  notes: String,          // Optional notes
  createdAt: Date,        // Auto-generated
  updatedAt: Date         // Auto-generated
}

🎨 Key Features Explained

Statistics Calculation

• Total Problems: Count of all solved problems
• Last 7 Days: Problems solved in the last week
• Streak: Consecutive days with at least one problem solved
• Weekly Chart: Visual representation of daily problem-solving activity

Filtering & Search

• Filter by difficulty level
• Search by topic/category
• Real-time table updates

Responsive Design

• Mobile-friendly interface
• Glass-morphism effects
• Smooth animations
• Dark mode support

🔧 Development Scripts

Backend

npm run dev      # Start development server with hot reload
npm run build    # Compile TypeScript to JavaScript
npm start        # Run production build

Frontend

npm run dev      # Start Vite dev server
npm run build    # Build for production
npm run preview  # Preview production build

🚨 Troubleshooting

MongoDB Connection Issues

• Ensure MongoDB is running: mongod or check service status
• Verify connection string in .env
• For Atlas, check network access and credentials

Port Already in Use

• Backend default: 5000 (change in .env)
• Frontend default: 8080 (Vite auto-assigns if busy)

CORS Errors

• Ensure backend CORS is configured for your frontend URL
• Check that both servers are running

📝 Usage Example

1. Start both servers (backend & frontend)
2. Navigate to http://localhost:8080/admin
3. Fill in the problem details form
4. Click "Add Problem"
5. Go to main dashboard to view the problem
6. Use filters to search and organize
7. Track your progress with statistics

🤝 Contributing

Feel free to fork this project and submit pull requests for improvements!

📄 License

ISC

---

Built with ❤️ for DSA enthusiasts