Assignment Tracker

A web app for tracking university assignments and exams, with Google Calendar sync and optional cross-device sync via Google sign-in. Built with React, Supabase, and the Google Calendar API.

View Live · Report Bug

Google sign-in is pending Google verification. Click Advanced → Go to app to proceed.

---

Features

• Add, edit, complete, and delete assignments and exams
• Deadline colour coding — red (≤2 days), amber (≤7 days), green
• Priority levels and module grouping with per-module grade averages
• Drag to reorder, filter by type or module, sort by deadline or priority
• File attachments via Supabase Storage
• Monthly calendar view
• Google Calendar sync — push deadlines as calendar events
• Optional Google sign-in for cross-device sync via Supabase
• Without an account, data persists locally via localStorage
• Browser notifications for items due today or tomorrow
• Dark and light theme, fully responsive

---

Stack

Frontend	React, Vite, React Router
Auth & Database	Supabase (PostgreSQL + Google OAuth)
Storage	Supabase Storage
Calendar	Google Calendar API
Drag & Drop	@dnd-kit
Deployment	Vercel

---

Architecture Notes

Local-first. The app works fully without an account using localStorage. Signing in upgrades to Supabase for cross-device access. Both data sets are independent and preserved on sign in/out.

No backend server. Supabase handles auth, storage, and database. Row Level Security policies enforce data access at the database level — users can only read and write their own data regardless of frontend behaviour.

Single OAuth flow. Requesting calendar.events scope alongside Google authentication grants both identity and Calendar access in one step.

---

Project Structure

assignment-tracker/
├── src/
│   ├── components/
│   │   ├── AssignmentForm.jsx      # add item form
│   │   ├── AssignmentList.jsx      # drag and drop list wrapper
│   │   ├── AssignmentItem.jsx      # single item card
│   │   ├── CalendarView.jsx        # monthly calendar
│   │   ├── CalendarSync.jsx        # Google Calendar integration
│   │   ├── ConfirmModal.jsx        # delete confirmation modal
│   │   ├── FileAttachment.jsx      # Supabase Storage uploads
│   │   ├── FilterBar.jsx           # filter and sort controls
│   │   ├── ModuleManager.jsx       # module creation and deletion
│   │   ├── StatsBar.jsx            # completion stats and grade averages
│   │   └── Toast.jsx               # in-app notifications
│   ├── hooks/
│   │   └── useToast.js             # toast state management
│   ├── pages/
│   │   ├── ItemsPage.jsx           # main items view
│   │   ├── CalendarPage.jsx        # calendar view
│   │   └── StatsPage.jsx           # stats view
│   ├── App.jsx                     # root component, state and handlers
│   ├── supabaseClient.js           # Supabase client instance
│   └── index.css                   # global styles and CSS variables
├── .env                           
├── .gitignore
├── package.json
└── vite.config.js