| Stack | Role | Year | Status |
|---|---|---|---|
| Angular 20, TypeScript, Angular SSR, Tailwind CSS | Frontend Developer | 2023 | Live |
Fitness Class Scheduler
A modern Angular SSR application for planning weekly fitness classes
Fitness Class Scheduler — A modern Angular SSR application for planning weekly fitness classes is a technical case study on ancel.co.ke documenting architecture, trade-offs, and outcomes. To give instructors one place to plan and view weekly classes without losing work on refresh, I built an Angular SSR app with client-side persistence and clear error handling. Ancel Ajanga wrote this case study from hands-on delivery experience in Kenya.
A modern Angular SSR application for planning weekly fitness classes with dark mode, responsive design, and client-side persistence.
The Problem
Fitness instructors need an easy way to schedule and manage their weekly classes, with the ability to view schedules in different formats.
To give instructors one place to plan and view weekly classes without losing work on refresh, I built an Angular SSR app with client-side persistence and clear error handling.
The Solution
I built an Angular 20 application with server-side rendering, featuring drag-and-drop scheduling, dark mode, and local storage persistence.
Key Technical Terms
- Server-side rendering (SSR):In this scheduler, the first paint is rendered on the server so the schedule is visible and SEO-friendly before JavaScript runs; that supports the goal of fast, reliable loading for instructors.
- Local storage persistence:Class data is saved in the browser so instructors do not lose work on refresh or close; for this project that avoids a backend while making storage quota a known failure mode we handle with clear messaging.
- Drag-and-drop scheduling:Classes can be reordered or rescheduled via drag-and-drop so the UI matches how instructors think about the week; that supports the goal of an intuitive, low-friction planning experience.
The Impact
Fitness instructors can now easily manage their class schedules with a modern, responsive interface that works on all devices.
< 1s
98/100
Outcomes
- Fast-loading SSR application
- Intuitive scheduling interface
- Excellent mobile experience
- SEO-optimized pages
Failure Modes & Resilience
LocalStorage full or disabled: the app checks and shows a message so instructors know data may not persist. SSR or hydration error: Angular recovers so the client can still interact; we avoid blank screen. Network or API failure: not applicable (client-only); any future sync failure would be isolated and retried.
Outcome & Future Potential
Fitness instructors can now easily manage their class schedules with a modern, responsive interface that works on all devices.
< 1s
Initial page load time
98/100
Google PageSpeed Insights
Project Gallery