Onward
Mentoring and study platform for students and mentors: AI 맞춤 학습 (recommendations, plan, dashboard), tasks with submissions and attachments, daily feedback, calendar, and chat. Next.js frontend + FastAPI backend + Supabase auth and storage.
My Role
UI/UX, Fullstack & AI
Core Stack
Next.js 16, React 19, FastAPI, Supabase, Zustand, Tailwind 4
Timeline
2026.02
Live Project
—
The Challenge
The core problem
Students and mentors had no single place to manage assignments, track progress, or get structured learning recommendations. Tasks, feedback, and plans lived in separate channels with no AI-guided flow.
Product vision
A dual-role app: students get a home feed, AI 맞춤 recommendations by subject (Korean, Math, English), plan/goal and execution dashboard, tasks with submit and attachments, and chat; mentors get dashboard, student list, task creation, calendar, daily feedback per task, and messages.
What I owned
UI/UX, fullstack (Next.js + FastAPI), and AI flow design. Built curated recommend-objectives, plan store (Zustand), execution tracking, role-based layouts (student vs mentor), shared API client with Supabase Bearer token, and backend JWT verification with Supabase service role. Students: feed, AI 맞춤, calendar, task list, chat. Mentors: dashboard, create tasks (with attachments), feedback per student/date, messages.
Results
Single place for assignments, progress, and recommendations. AI-driven 맞춤 learning; clear student and mentor flows; consistent, maintainable codebase.
Design system & UI
Role-based layouts: student bottom nav (Home, AI 맞춤, Calendar, Chat, Profile); mentor sidebar and pages. Tailwind 4, Lucide icons, Zustand for auth and plan state. Subject theming (Korean/Math/English) with consistent bar colors and labels. Forms and lists with clear hierarchy for tasks, feedback, and recommendations.
Typography
Inter Bold
Inter Medium
Inter Regular
Colors
Primary
#6366f1
Korean
#34d399
Math
#fb923c
English
#a78bfa
Surface
#f8fafc
Muted
#64748b
System architecture
Next.js app (Vercel) with Supabase Auth; FastAPI backend (Render) verifies Supabase JWT and uses Supabase (service role) for tasks, submissions, feedback, and storage. Role derived from token; student vs mentor routes and API permissions.
Frontend (Next.js)
- Next.js 16 App Router, React 19, TypeScript, Tailwind 4, Zustand (auth, mentor-tasks, student-plan)
- Student: home, AI (recommend, plan, dashboard, [subject], test), calendar, task (new, [id]), chat, profile. Mentor: dashboard, students/[id], tasks/new, calendar, messages, settings
- API client with getApiUrl() and getAuthHeaders() (Supabase access token); proxy for server-side token verification if needed
Backend (FastAPI)
- Auth: GET /api/auth/me (current user from Bearer token). Tasks: POST/GET /api/tasks, GET /api/tasks/{id}, POST /api/tasks/{id}/submit (mentor create, student submit; form-data + file uploads)
- Feedback: mentor creates/updates daily feedback per student/date; student and mentor get feedback by date. Supabase storage for task attachments and submission files
Auth & data (Supabase)
- Supabase Auth for sign-up/sign-in; backend verifies JWT (SUPABASE_JWT_SECRET). Migrations: auth_users, tasks, submissions, task_attachments, feedback_daily, profiles
- Storage bucket (task-files) for attachments. Role (student/mentor) from token; require_mentor / require_student deps for protected routes
AI 맞춤 학습: recommendations, plan, dashboard
Student-facing AI flow: recommend objectives (curated learn-first, questions, mentor notes per subject), plan with daily goal (minutes) and weekly adherence, execution dashboard by subject with week/month data. Task creation from AI recommendation (from=ai) with pre-filled objectives. Structured recommendations (Korean, Math, English) drive consistent learning paths.
Tasks and daily feedback
Mentors create tasks (title, subject, due date, description, goal, student_id, optional file attachments). Students view tasks, submit with optional files. Mentors write daily feedback per task (feedbackPerTask + dailySummary) per student/date; students and mentors read feedback by date. Full CRUD and storage via FastAPI + Supabase.
Student and mentor experiences
Clean role-based UX: student layout (bottom nav, home, AI, calendar, chat, profile); mentor layout (dashboard, students, tasks, calendar, messages, settings). Student list and student detail (plan, messages); task new/edit and submission flow. Consistent API client and auth store across both roles.
Project impact
Unified mentoring platform with AI-driven recommendations, task lifecycle, and daily feedback. Clear separation of student and mentor flows with shared backend and auth; deployable on Vercel (frontend) and Render (backend).
2
Roles (Student · Mentor)
3
Subjects (국어 · 수학 · 영어)
Supabase
Auth & storage
FastAPI
Backend APIs
Reflection
I’d add richer analytics for mentors (e.g. adherence over time) and optional push notifications for task deadlines. Building role-based layouts and coordinating FastAPI with Supabase auth and storage was very instructive.