📘 Productivity & Study Management App — StudyLoom

A modern, full-stack productivity and study-management web application designed to help users improve focus, track study sessions, manage tasks, create flashcards, and analyze their performance. Built with Next.js 15, React 19, TypeScript, Prisma, PostgreSQL, Clerk Auth, and Tailwind CSS.

---

🚀 Features

📊 Dashboard & Analytics

• Real-time session tracking
• Daily/weekly stats
• Focus score & distraction analysis
• Exportable reports (CSV)

⏱ Focus Mode & Pomodoro

• Distraction logging
• Custom Pomodoro cycles
• Offline-safe tracking with sync on reconnect

📝 Notes & Study Material

• Rich-text notes
• Subject categorization
• File attachments

🎴 Flashcards (Spaced Repetition)

• Create decks
• Study/review flow
• Auto-reminder scheduling

🗂 Kanban Study Planner

• Drag-and-drop task board
• Per-subject progress tracking

📚 Assignments & To-Do Management

• Due dates, reminders
• Subject tags
• Weekly summary emails

👤 User Profile & Settings

• Study goals
• Theme selection
• GDPR-compliant data export/delete

---

🧩 Tech Stack

Frontend

• Next.js 15 (App Router)
• React 19
• TypeScript
• Tailwind CSS + shadcn/ui
• Zustand (state management)
• React Query / SWR (optional caching)
• Recharts (analytics visuals)

Backend

• Prisma ORM
• PostgreSQL
• Next.js Route Handlers / API Routes
• Firebase Analytics (optional realtime)
• Sentry (error tracking)

Authentication

• Clerk (passwordless auth, SSO, secure session management)

DevOps & Hosting

• Vercel (Next.js hosting)
• Neon / Supabase / ElephantSQL (PostgreSQL)
• GitHub Actions (CI/CD)
• Prettier, ESLint, Turbopack

---

🏗️ Architecture Overview

 Client (Next.js + React)
         │
         ▼
   Clerk Authentication
         │
         ▼
Next.js API Routes ───── Prisma ───── PostgreSQL
         │
         ▼
Firebase Analytics ── Sentry Monitoring

---

📁 Project Structure

/
├── app/
│   ├── dashboard/
│   ├── study/
│   ├── flashcards/
│   ├── api/
│   └── layout.tsx
├── components/
├── lib/
├── prisma/
│   └── schema.prisma
├── public/
├── styles/
├── package.json
├── README.md
└── tsconfig.json

---

⚙️ Setup Instructions

1. Clone the Repository

git clone https://github.com/jeeva-m-21/StudyLoom
cd project-name

2. Install Dependencies

npm install

or

pnpm install

3. Configure Environment Variables

Create a .env file:

DATABASE_URL="postgresql://<user>:<pass>@<host>:<port>/<db>"
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=""
CLERK_SECRET_KEY=""

NEXT_PUBLIC_FIREBASE_API_KEY=""
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=""
NEXT_PUBLIC_FIREBASE_PROJECT_ID=""

4. Push Prisma Schema

npx prisma generate
npx prisma db push

5. Run Development Server

npm run dev

Add screenshots once the UI is built.

---

⏳ Development Roadmap (6–8 Weeks)

Sprint 1

• Auth setup
• Dashboard skeleton
• Timer basics

Sprint 2

• Session logging
• Database integration
• Pomodoro & Focus Mode

Sprint 3

• Notes
• Flashcards
• Kanban board
• UI polishing

Sprint 4

• Testing
• CI/CD
• Deployment
• Documentation

---

🔐 Security

• Secure user sessions (Clerk)
• Encrypted DB fields
• Sanitized API inputs
• CSRF protection
• GDPR-compliant data export/delete

---

📄 License

This project is for academic/portfolio/demo purposes unless otherwise specified.

---