Personal project · Behind the Project
SEA Catering
Connecting the journey from choosing a healthy meal to managing a subscription, with one application for customers and administrators.
- Context
- COMPFEST 17 · SEA program
- Scope
- Full-stack web application
- Focus
- Subscriptions & dashboards
01 / The idea
What this project is about
SEA Catering is a full-stack catering application developed for the Software Engineering Academy program at COMPFEST 17, Universitas Indonesia. It brings meal discovery, subscription customization, account access, testimonials, and business reporting into one application.
The customer-facing pages explain the service and its meal plans. Account-based workflows then support subscription management, while administrators have a separate dashboard for business metrics and charts.
02 / Building it
From interface to application
Step 01
Shape the meal-discovery experience
The homepage introduces the service, and the meal-plan catalogue presents the available options with photos, descriptions, and per-meal pricing. Detail dialogs provide more information without sending visitors away from the catalogue.
Step 02
Connect the interface to application data
Next.js App Router and API Routes keep the frontend and backend logic in one codebase. Prisma provides the database interface to PostgreSQL hosted on Supabase, connecting the account, subscription, and testimonial workflows.
Step 03
Support the subscription lifecycle
The subscription form combines configurable choices with live price updates. Authenticated users can view their subscriptions and pause, cancel, or resume them from their dashboard. Role-based access separates customer workflows from administration.
Step 04
Extend the application for administration
The admin dashboard brings together new subscriptions, monthly recurring revenue, reactivations, and active subscriptions. Date-range filtering and Recharts visualizations support exploration of those metrics. The repository also records a refactor toward reusable components with an atomic design structure.
03 / Key decisions
The choices behind the features
One application, connected workflows
Using Next.js for both pages and API routes keeps the application in one deployment, with Prisma connecting it to a separate PostgreSQL database. The interface and server-side logic share the TypeScript codebase.
Details without losing context
Meal-plan dialogs let visitors inspect a plan while keeping the catalogue in the background. Consistent cards and shared UI components support the same flow across different screen sizes.
Treat subscriptions as ongoing state
Subscriptions continue beyond the initial form submission. Pause, resume, and cancellation actions make their lifecycle part of the product, and the dashboards expose different views of that same business data.
04 / A closer look
Inside the experience
05 / Looking back
What the work brings together
Meal discovery, forms, account permissions, and dashboards all depend on a consistent data model. Connecting them makes the relationships between UI choices, database records, and business metrics visible.
The component refactor highlights the maintenance side of product development: shared primitives and reusable sections help keep an expanding set of pages consistent.
Possible next steps
- Add broader automated coverage for subscription state changes and dashboard calculations.
- Evaluate the form and meal-discovery flow through usability feedback.
Another project, another story
Antara Halaman