Project Overview: Build a mobile-first SaaS web app called **TuitionTrack that helps individual tutors and coaching centers in Bangladesh manage their students, attendance, daily class logs, and fee tracking. The UI should be clean and friendly for Gen Z, inspired by Cal.com with subtle animations, modern fonts, and a minimal aesthetic. 🔧 Tech Stack:
- Frontend: Next.js + TypeScript + Tailwind CSS + ShadCN UI
- Auth: Clerk (for role-based login: Admin, Tutor)
- Database: Supabase (PostgreSQL)
- State Management: React Hooks, optional Zustand
- Deployment: Vercel
- Goal: Build in a modular way for future feature expansion. 🧩 User Roles:
- Admin
- Manages tutor accounts (Activate/Deactivate)
- Handles bKash payment account mapping
- Views all activity logs
- Individual Tutor
- Manages multiple tuition groups (1-on-1 or batches)
- Tracks fees, attendance, and lesson logs
- Adds notes, homework, and upcoming exam details
- Coaching Center
- Same features as tutor, but can have multiple staff (future scope)
- Manages students in bulk 📱 UI Pages & Components:
- Login & Onboarding
- Login/signup via Clerk
- Role selection: Individual Tutor or Coaching Center
- Onboarding: Create first tuition or import student list
- Dashboard (Mobile-first)
- Summary Cards: Total Tuitions, Students, Unpaid Fees, Upcoming Class
- Floating Button to “Add Tuition”
- Tuition List Page
- Cards for each tuition: Name, Student Count, Status
- Button to Add New Tuition
- Filter: Active / Archived
- Inside a Tuition Page
- Tabs: Students | Calendar | Payments
- View student list with fee status
- Button to Add Student
- View/Edit Tuition Info
- Calendar View (per tuition)
- Visual calendar with date highlights
- Tap a date to open full log:
- What was taught
- Who was present
- Homework given
- Next exam topic
- Notes field
- Student Fee Tracker
- Per-student fee history
- Editable field to input fees received
- Status: Paid / Due / Partial
- Optional: Export PDF report
- Daily Class Log Page
- Date, Topics Covered, Notes
- Student Attendance toggles
- Homework given
- Button to mark “Exam Next Time” with topic
- Optional: Attach file/image
- Admin Panel (Clerk Protected Route)
- Manage Tutor Accounts
- View Payments, Activity Logs
- Activate/Deactivate Tutor access 🎨 UI Style Guide:
- Font: Sans-serif (like Inter, Poppins)
- Colors: Soft violet/blue palette with white backgrounds
- Animations: Smooth transitions, hover/focus effects
- Mobile-First Design**: Use responsive layout with sticky headers & fab (floating action buttons) ihave used this theme in my code ---npx shadcn@latest add https://tweakcn.com/r/themes/violet-bloom.json 🔑 Key Features to Implement in MVP:
- Role-based login via Clerk
- Supabase schema: users, tuitions, students, attendance, logs, fees
- Mobile-first dashboard with summary
- Tuition + student CRUD
- Daily log with notes, attendance, homework
- Fee tracking per student
- Admin-only settings panel
- Clerk-protected routes 🧠 Extras (optional):
- bKash payment history view for future expansion
- Localized dates (Bangladesh time)
- Bengali language toggle (future phase)
- Email reminders for fee due (future phase) you can see my current state of porject by going in to the git hub repo url : Rayat-7/tuitiontrack ✅ Output Expected:
- Modular Next.js app scaffold
- Working UI components with Tailwind and ShadCN
- Functional pages: Tuition CRUD, Fee Management, Calendar Log
- Supabase schema prewritten
- Clerk integration boilerplate
- Sample JSON/SQL seed data
This is a Next.js project bootstrapped with
create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.