FitZen Web
The content management and analytics panel behind FitZen.


- Project
- Our own product
- Our role
- Full stack · Content management · Analytics
- Duration
- 2 months
01 / Behind the product
A real need. A considered solution.
Challenge
As the app’s recipe and blog content grew, every update needed an app release. The content also had to be found by search engines and answer engines (GPTBot, ClaudeBot, Perplexity), which do not run JavaScript; a page that fetches data client-side is empty to them.
Approach
Content moved to Firestore and an admin panel; recipes, blog posts and quizzes ship without an app update. The site runs in 11 languages and everything renders on the server. Turkish is the default with no URL prefix (so indexed addresses stay intact); other languages use localised path segments such as /de/rezepte/…, and a request with the wrong language’s slug is 301-redirected to the canonical address. Recipe pages carry a self-contained, number-bearing "quick answer" block; FAQs are <details> in HTML; schemas sit under one @graph linked by @id; per-language RSS, an hreflang sitemap and llms.txt.
Result
fitzenweb.com is live; the production build generates about 2,000 static pages. Content updates stopped being a developer task and no longer wait on store review; user activity and analytics are read in the same panel.
02 / Inside the product
The experience, on screen.
Open a screen to explore the details.03 images
03 / Scope & details
The details make the experience.
- 01
Content management panel
- 02
Recipe and blog management
- 03
Test and quiz creation
- 04
User activity and analytics
Technology
Next.js / Firebase / Vercel
INSIDE THE PRODUCT
The engineering behind the interface.
Systems we built and concrete problems we addressed in this project.
Two root layouts
app/(main)/layout.tsx serves Turkish and app/(intl)/[lang]/layout.tsx the other ten languages, because <html lang> and dir must be right and one root layout cannot read a dynamic segment. Slugs derive from the title in Latin-alphabet languages and from the ASCII form of the Turkish slug in Arabic, Japanese and Thai.
HTML written for answer engines
FAQ accordions are <details>, not JS; recipe pages carry a self-contained, number-bearing #quick-answer block; schemas sit under one @graph linked by @id (lib/schema.ts); llms.txt, per-language feed.xml and an hreflang sitemap.
About 2,000 static pages
The production build statically generates the recipe archive in 11 languages; api/revalidate refreshes affected pages after a panel edit. Bundle size is tracked with npm run analyze.
Your idea could be next.
What could we build for you?
From a first release to a growing platform. Let’s plan the design, development and launch together.
From Türkiye to the US, UK, Australia and everywhere in between.