Citabic
A fully custom CMS-backed website for a Tangier-based BTP firm - a Livewire admin panel, block-based content editor, bilingual management, a blog with full SEO tooling, and a cached content delivery layer.
Overview
A custom CMS, not just a website
Citabic is a Tangier-based BTP company (civil engineering, building, real estate) that needed more than a static site - they needed the ability to manage their content independently, publish blog posts, update project references, and control every piece of copy across both French and English without involving a developer every time.
The result is a full Laravel 12 + Livewire application with a custom admin panel, a bilingual content management system, a blog platform with complete SEO tooling, a portfolio of references with detail pages, and a cached content delivery layer that keeps the public site fast.
Objective
Give the client full control - every section, every text, every image manageable from an admin panel without touching code
Deliver a complete bilingual experience: admins enter content in both FR and EN, content is served by locale automatically
Enable professional content marketing through a full blog platform with block-based editing and a complete SEO toolkit
Keep the public site fast via a per-locale cache layer with a 6-hour TTL - so database queries are amortized across thousands of page views
My Role
Full design & development frontend to CMS
Design & Frontend
Designed and built the complete public-facing site in Laravel Blade + Tailwind CSS v4 - video hero, services, values carousel, references, blog, and contact - all responsive.
Livewire Admin Panel
Built a full CMS admin panel using Livewire v4 - 15+ management sections covering every piece of editable content on the site.
Bilingual Content System
Architected a per-section/per-key/per-language content model (SectionContent) that lets admins manage FR and EN versions of every text block independently.
Blog Platform & SEO
Built a complete blog with a block-based editor (hero, text, image blocks), full SEO metadata (OG, Twitter cards, schema, robots, canonical), categories, tags, comments, and reading time.
Caching & Performance
Implemented a GuestPageCache service with 6-hour per-locale cache via Laravel Cache - page data is computed once and served from cache for all subsequent requests.
Notifications & Forms
Built a categorized contact form with email notification on submission, and blog comment notifications - both via Laravel Notifications.
Tech Stack
Core Features
A full platform, not a template
Livewire Admin CMS
- 15+ admin sections, zero page reloads
- Full CRUD for all content entities
- Drag-and-drop sort ordering for domains, values, processes
- Dropzone.js image upload on all media fields
- Contact submissions inbox with read/unread state
- App settings key/value store for global config
Bilingual Content (FR/EN)
- SectionContent table: section + key + language model
- Translations JSON field on all major entities
- Locale-aware content delivery via app()->getLocale()
- Admins manage FR and EN copy independently per section
- Blog posts and references fully translatable
- Language switcher on the public site
Blog & SEO Platform
- Block-based post editor (hero, text, image blocks)
- Full SEO: meta title/desc, focus keyword, OG, Twitter cards
- Schema markup, canonical URLs, robots index/follow
- Categories, tags, reading time, featured posts
- Comment system with email notification on submission
- Publication workflow: draft → published with scheduled date
References Portfolio
- Paginated reference listing (9 per page) with detail pages
- Per-reference: client, surface, budget, summary, blocks
- Block-based detail content (same editor as blog)
- Translatable titles and descriptions per reference
- Sort order management in admin
- Slug-based URLs with SEO-friendly routing
Admin Panel
15+ management sections
Every piece of content on the public site is manageable from the admin panel - the client can update anything without a developer.
Screenshots
The CMS in action
Admin Dashboard
Block Editor
Public Site (FR)
Architecture
CMS-first, cached for speed
Every public page is backed by a CitabicContentService that assembles all necessary data - profile, domains, sections, missions, certifications - and caches the result per locale for 6 hours. The admin panel is built entirely with Livewire v4, keeping UI reactive with zero custom JavaScript.
- SectionContent model: section + key + language - flat, queryable, cache-friendly
- CitabicContentService assembles complete page payloads and caches them per locale
- GuestPageCache service manages cache keys with cache-busting on content update
- Livewire v4 admin - reactive UI with full CRUD, no SPA complexity
- Block-based content: posts and references store structured content as JSON arrays
- Laravel Notifications for contact and comment email alerts
Key Takeaways
The CMS is the product
For a content-driven business site, the admin experience is as important as the public face. A client who can update their own content is a client who stays engaged with their site.
Cache at the service layer, not the view
Caching full page data payloads in CitabicContentService is more powerful than view-level caching - it works regardless of how the view is rendered.
Bilingual is an architecture decision
Adding language as a first-class field in every content model from day one - rather than retrofitting it - makes bilingual management clean and performant.
Block editors are worth the upfront investment
A block-based content model in JSON gives the client flexibility to build rich posts and reference pages without needing a developer for every content change.
Work with me
Need a site your team can actually manage?
A good CMS isn't just an admin panel - it's the right content model for your business. I help you figure out what should be editable, how it should be structured, and build it so your team owns it.