StudyTrack - Learning Progress Tracker

A simple web application for students to log study sessions per subject and track their progress with basic analytics.

Features

• 🔐 Authentication for Email - Email/password signup and login via Supabase Auth
• 📚 Subjects Management - Create, edit, and delete study subjects with custom colors
• ⏱️ Session Logging - Log study sessions with duration, notes, and date
• 📊 Dashboard - View total study time, today's progress, and 7-day activity chart
• 📱 Responsive Design - Works on desktop and mobile

Tech Stack

• Frontend: Next.js 15 (App Router), TypeScript, Tailwind CSS
• Backend: Next.js API Routes
• Database: PostgreSQL via Supabase
• Auth: Supabase Auth
• Charts: Recharts

Getting Started

Prerequisites

• Node.js 18+
• npm
• Supabase account

1. Clone and Install

cd new_student_tracker
npm install

2. Set Up Supabase

1. Create a new project at supabase.com
2. Go to SQL Editor and run the schema in supabase/schema.sql
3. Go to Settings > API and copy your project URL and anon key

3. Configure Environment Variables

Create a .env.local file in the root directory:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

4. Run Development Server

npm run dev

Open http://localhost:3000 in your browser.

Project Structure

src/
├── app/
│   ├── api/                 # API routes
│   │   ├── subjects/        # Subjects CRUD
│   │   ├── sessions/        # Sessions CRUD
│   │   └── dashboard/       # Dashboard stats
│   ├── login/               # Login page
│   ├── signup/              # Signup page
│   ├── dashboard/           # Dashboard page
│   ├── subjects/            # Subjects management
│   └── sessions/            # Sessions management
├── components/
│   ├── ui/                  # Reusable UI components
│   └── layout/              # Layout components
├── lib/
│   ├── supabase/            # Supabase client config
│   └── utils.ts             # Utility functions
└── types/                   # TypeScript types

Deployment

Deploy to Vercel

1. Push your code to GitHub
2. Import the repository in Vercel
3. Add environment variables in Vercel project settings
4. Deploy!

API Endpoints

Method	Endpoint	Description
GET	/api/subjects	List user's subjects
POST	/api/subjects	Create a subject
PUT	/api/subjects/[id]	Update a subject
DELETE	/api/subjects/[id]	Delete a subject
GET	/api/sessions	List user's sessions
POST	/api/sessions	Create a session
PUT	/api/sessions/[id]	Update a session
DELETE	/api/sessions/[id]	Delete a session
GET	/api/dashboard/summary	Get dashboard statistics

License

MIT