A full stack assignment management platform for teachers and students — built with Next.js, TypeScript, and Supabase.
ClassFlow is a production-ready assignment management system that streamlines how teachers create, distribute, and grade assignments — and how students submit work and track their academic progress. Built with a modern full stack architecture and a clean role-based UI for both teachers and students.
- Create rich assignments with a WYSIWYG editor (TipTap) and file attachments
- Manage student roster by email — add or remove students
- View real-time submission stats per assignment
- Grade submissions with scores and written feedback
- Filter assignments by status — Active, Draft, Closed, Overdue
- Edit or delete existing assignments
- View all assigned work with due date countdowns
- Submit assignments with text editor and file uploads
- Save submissions as drafts before final submission
- Track grades, trends, and class ranking on a visual dashboard
- Filter assignments by status — Pending, Submitted, Graded, Overdue
- Google OAuth authentication
- Role-based routing and access control
- Light and dark mode
- Responsive design for mobile and desktop
- Real-time data from Supabase
| Layer | Technology |
|---|---|
| Framework | Next.js 14+ (App Router) |
| Language | TypeScript |
| Database | Supabase (PostgreSQL) |
| Auth | Supabase Auth + Google OAuth |
| Storage | Supabase Storage |
| Styling | TailwindCSS |
| Editor | TipTap (WYSIWYG) |
| Charts | Recharts |
classflow/
├── app/
│ ├── auth/ # Google OAuth sign in
│ ├── teacher/
│ │ ├── dashboard/ # Teacher overview + stats
│ │ ├── students/ # Student roster management
│ │ ├── assignments/ # Assignment list + filters
│ │ ├── assignment-create/ # Create + edit assignments
│ │ └── grading/ # Grade student submissions
│ ├── student/
│ │ ├── dashboard/ # Student stats + charts
│ │ ├── assignments/ # Assignment list
│ │ │ └── [id]/ # View + submit assignment
│ │ └── grades/ # Grade history + trends
│ └── page.tsx # Landing page
├── components/
│ ├── AuthContext.tsx # Global auth state
│ ├── ProtectedRoute.tsx # Role-based route guard
│ ├── TeacherSidebar.tsx # Teacher navigation
│ └── StudentSidebar.tsx # Student navigation
├── lib/
│ └── supabaseClient.ts # Supabase client instance
└── hooks/
└── useAuth.ts # Auth hook
profiles — User accounts (id, email, full_name, role, avatar_url)
teacher_students — Teacher to student relationships
assignments — Assignment details (title, description, due_date, status)
assignment_students — Assignment to student mapping
assignment_attachments — Teacher uploaded files
submissions — Student submissions (content, grade, submitted_at)
submission_attachments — Student uploaded files
comments — Discussion threads on assignments
assignment-files— Teacher attachmentssubmission-files— Student submission files
- Node.js 18+
- A Supabase project
- Google OAuth credentials
# Clone the repository
git clone https://github.com/yourusername/classflow.git
cd classflow
# Install dependencies
npm installCreate a .env.local file in the root:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_urlNEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_keyRun the SQL schema file against your Supabase project:
# In your Supabase SQL editor, run:
classflow-complete-schema.sqlnpm run devOpen http://localhost:3000 in your browser.
- User visits
/authand selects their role — Teacher or Student - Signs in with Google OAuth via Supabase
- A profile is auto-created in the
profilestable on first sign in - User is redirected to their role-specific dashboard
Coming soon
- Real-time notifications with Supabase subscriptions
- Email notifications for new assignments and grades
- Mobile app (React Native)
- Bulk student import via CSV
- Assignment analytics per class
MIT License. See LICENSE for details.
Built by RAPHAEL — 18 year old full stack developer from Nigeria.
Open to full stack and backend remote opportunities. Reach out via [samuelraphael925@gmail.com] or [LinkedIn].