# Atlas Fitness Club

> A multi-page gym website concept. An HTML template was rebuilt as an Angular 21 app with server-side rendering, in three languages (EN/FR/AR), with interactive fitness tools.

- By: Yassine Charcheri, full-stack developer (https://yassinecharcheri.dev/)
- Status: Concept
- Year: 2026
- Role: Solo: Angular migration.
- Type: Web · Angular
- Stack: Angular 21, TypeScript, SSR, SCSS, Signals, i18n / RTL
- Live site: https://frankfurt-gym.vercel.app/home
- Case study page: https://yassinecharcheri.dev/projects/atlas-fitness-club

## Highlights

- Five fitness calculators with real formulas (Mifflin-St Jeor, US Navy body fat) and an animated SVG gauge, built with signals
- Server-side rendering with 10 prerendered routes, plus a runtime translator for English, French and Arabic with RTL
- Interactive weekly timetable with filters and class details, and a draggable 3D dome gallery

## Case study

- Summary: A multi-page gym website concept. An HTML template was rebuilt as an Angular 21 app with server-side rendering, in three languages (EN/FR/AR), with interactive fitness tools.
- The problem: Many local gyms have no website, or a static page that is hard to update and invisible on Google.
- For: Gym members and prospects, including French- and Arabic-speaking visitors.
- Pain points:
  - A static HTML template can't grow: every page duplicates the same code.
  - There is a single language, while the audience speaks three.
  - Client-side-only sites are slow to show content and poorly indexed.
  - The site doesn't give visitors any reason to come back.
- What I built:
  - Trilingual: English, French and Arabic, with a full right-to-left layout.
  - Server-side rendering: Content is ready on first load and indexable by search engines.
  - Responsive: Mobile first.
- Stack and why:
  - Angular 21: A structured framework (standalone components, routing, signals) that suits a multi-page site and turns a duplicated HTML template into reusable components. It also showcases Angular next to React.
  - Angular SSR: A gym is a local business, so being found on Google matters. Server rendering delivers real HTML that loads fast and is fully indexable.
  - i18n with RTL support: Three languages including Arabic required translations to be built into the architecture from day one, not added later.
  - TypeScript: Typed data for classes, schedules and prices makes the migration safer.
- Challenges:
  - Migrating jQuery plugins to Angular: Template scripts touched window and the DOM directly, which breaks server rendering. They had to be rewritten or loaded only in the browser.
  - Mirroring the layout for Arabic: Without maintaining a second stylesheet.
- Learnings:
  - SSR changes how you write components: never assume a browser.
  - Plan internationalization in the architecture, not as a final step.
- Screens:
  - Atlas Fitness Club services page: “Transform your body, elevate your life”
  - “Calculateurs fitness” page: tabs for the five calculators above the body mass index form
  - “Choose your plan”: three membership plans with monthly prices, the middle one highlighted
  - Class timetable: a weekly grid of colour-coded classes by day and hour
  - Gallery page: a 3D dome of black-and-white workout photos

## Contact

- Email: yassine.charcheri@gmail.com
- Contact form: https://yassinecharcheri.dev/#contact