FITALENTA
A unified platform that merges a company profile website and a program registration system into one role-based web application.
01 — Objective
The Problem
FITALENTA originally ran as two separate websites: a company profile site for promoting the brand, programs, and content, and a separate system for participant registration, payments, and program administration. Maintaining two codebases meant duplicated work, inconsistent design, and a fragmented experience — visitors had to jump between sites, and the team had to manage content and operations in different places.
The goal of this rebuild was to merge both websites into a single, consistent platform where public visitors, participants, editors, and administrators all work within one application, backed by one authentication flow and one design system.
02 — Solution
The Approach
I rebuilt the platform as a single Next.js application organized around four areas: a public website, a participant portal, an editor CMS, and an admin panel. Each area has its own layout and navigation, and access is enforced by role — both on the server through request-level route protection, and on the client through shell guards that hold back the UI until the session is verified, so protected pages never flash for unauthenticated visitors.
Participants can register for programs, follow their payments and installments, and receive notifications. Admins manage programs and categories, users, payment verification, selection and placement, and financial reports, while editors handle articles, events, and gallery content. The codebase follows a consistent feature-based structure (types, schemas, services, hooks, and UI per feature), which made it straightforward to add new modules such as program category management as the backend evolved. The project strengthened my skills in architecting multi-role applications, designing reusable admin interfaces, and integrating closely with an Express and Prisma backend.
Tech Stack
- Next.js
- TypeScript
- Tailwind CSS
- shadcn/ui
- TanStack Query
- Zustand
- Zod
- Axios
- REST API Integration
Features
- Public company profile (programs, events, articles, gallery)
- Participant registration and program enrollment
- Payment and installment tracking with proof verification
- Selection and placement management
- Admin dashboard for programs, categories, users, and financial reports
- Editor CMS for articles, events, and gallery
- Role-based access control (user, editor, admin)
- Server-side route protection with auth guards