A responsive React + TypeScript dashboard inspired by the provided UI reference. The layout is built with Tailwind CSS and lightweight shadcn-style components.
- Bun
>=1.1.0(https://bun.sh) - Node-compatible tooling for optional editor integrations
bun installbun run devbun run build
bun run preview- React 18 + Vite 5
- TypeScript
- Tailwind CSS with shadcn-inspired UI primitives
- Lucide icons for the sidebar and metrics
- Supabase for persisted subjects/exams/focus sessions
- Multi-subject dashboards with isolated paper archives
- Use the Book icon in the sidebar to open the paper library overlay.
- Add new entries from the dashboard card, then edit or delete them inline; all changes persist to Supabase.
- Add subjects (e.g., Maths, Biology) from the subject switcher and swap between them to view dedicated analytics per subject.
- Use the bell icon to run the built-in Pomodoro timer; completed focus sessions automatically log study time.
- Open the analytics (chart) icon to review day/week/month focus totals. Day view shows a completion ring, while week/month swap to a trend line to visualise momentum.
- Create a Supabase project (https://supabase.com/), then run the SQL in
supabase/schema.sqlto provision the required tables. - In the project settings, copy the
Project URLandanonpublic API key. Keep these secret. - Add a
.env(ignored by git) with:VITE_SUPABASE_URL=your-project-url VITE_SUPABASE_ANON_KEY=your-anon-key
- Restart the dev server (
bun run dev) so Vite picks up the new environment variables. - (Optional but recommended) In Supabase dashboard, enable Email confirmations under Authentication → Providers so users receive the verification email that the in-app toast references.
Note:
supabase/schema.sqlenables row-level security for profiles, subjects, exams, and focus entries. Tweak the policies if you need broader access (e.g., admin dashboards).