A static, CMS-backed marketing website for FEBIS to promote furnished apartments in Yamoussoukro and Grand-Bassam, along with construction, events, coaching, and commerce services, with a protected admin interface for managing content on a zero-cost stack.
Overview
FEBIS operates furnished apartments and complementary services (coaching, real estate, events, construction, commerce) in Côte d'Ivoire. The FEBIS Website is a static but CMS-enabled marketing and booking site built with Astro, presenting apartments, services, and contact flows with high performance and low operational cost.
Users
- Travelers & Guests – Individuals and small groups looking for furnished apartments and short-term stays in Yamoussoukro and Grand-Bassam, browsing listings and submitting booking or contact requests.
- Business & Event Clients – Customers interested in FEBIS's construction, quincaillerie, event management, and general commerce services, discovering offerings and requesting follow-up.
- FEBIS Admin Staff – Internal users who log into a protected admin interface to manage apartment data and site settings without editing code, using token-based authentication.
Key Features
- Apartments Showcase & Filtering – Listing of furnished apartments powered by
apartments.json, with featured/available flags, city labels, pricing per night in FCFA, and detail views reachable via /residences and slug-based URLs. - Booking & Contact Forms – Frontend booking and contact sections integrated with Netlify Functions (e.g.,
sendEmail) and the Resend API to deliver inquiries to configured recipient emails. - Multi-Service Marketing Sections – Rich homepage panels and a dedicated
/servicespage highlighting hotel-style residences, BTP & quincaillerie, event management, general commerce, and coaching offerings. - Admin Interface & Auth – A Preact-based admin page (
/admin) that consumes/api/verifyauthto validate a bearer token againstADMIN_AUTH_TOKEN, exposing CRUD-style content management for apartments and settings when authorized. - Responsive, High-Performance UI – Tailwind CSS–driven layout, image-rich hero and cards, and Astro static generation to meet Lighthouse performance and accessibility targets.
Tech Stack
- Frontend – Astro (static site generator) with strict TypeScript for pages like index.astro, residences,
services,contact, anda-propos. - Styling – Tailwind CSS utility classes for layout, typography, responsive grids, and a branded color system defined across sections and components.
- Interactive UI – Preact components for the admin interface and interactive modules such as the booking module, enhancing specific flows without turning the site into a full SPA.
- Backend & APIs – Netlify Functions (Node.js) under
netlify/functionsfor email handling, authentication (/api/verifyauth), content updates, and apartment data APIs like/api/getapartments. - Data & CMS – Git-versioned JSON files (
apartments.json,settings.json) used as the primary data source, with functions that write to GitHub via tokens so content edits trigger rebuilds and stay within free-tier limits. - Hosting & DevOps – Deployment on Netlify with redirects and function routing configured in netlify.toml, environment variables managed via
.env/ Netlify UI, and local development supported byastro devplusnetlify devproxies.
Notable Implementation Details
- Configurable Hero & Tagline – The homepage reads
heroImageUrlandtaglinefromsettings.json, falling back to a curated Unsplash image and French marketing copy, enabling easy brand adjustments. - Hybrid Static + API Data Flow – Featured apartments are rendered at build time from JSON but can be refreshed client-side via
/api/getapartments, combining static performance with dynamic updates when available. - Token-Based Admin Security – The admin area uses a simple but explicit bearer token scheme against
ADMIN_AUTH_TOKEN, with a lightweight/api/verifyauthfunction that is independent of GitHub credentials. - Zero-Cost Infrastructure Strategy – All storage is file-based in Git, functions run on Netlify's serverless platform, and the stack avoids paid databases or services, aligning with the project's stringent budget constraints.
Outcomes/Impact
- Improved Online Presence – FEBIS gains a centralized, professional site that clearly presents its apartments and multi-vertical services to prospective clients.
- Streamlined Content Management – Non-technical staff can update apartment listings and site settings through a guided admin UI, with changes versioned in Git and automatically deployed via Netlify.
- Operational Efficiency & Reliability – Automated email handling, static generation, and serverless functions reduce manual coordination, while the optimized Astro/Tailwind stack delivers fast load times and a reliable experience across devices.