Vodafone Website

A modern, bilingual (Arabic/English) website for Vodafone with a React frontend and Strapi CMS backend.

Problem Statement

Managing multilingual content for a telecommunications website requires a flexible, scalable solution. This project provides a modern content management system with a React-based frontend that supports RTL/LTR layouts, internationalization, and dynamic content updates from a headless CMS.

Supporting documents

1. Product brief
2. Features list
3. Contribution guide
4. System design
5. Known issues
6. Knowledge base
7. Change records

Getting started

Pre-requisites

• Node.js (v22)
• Docker (v24.0.2)
• Docker Compose
• pnpm (for frontend)

Project setup

Clone the repository

git clone https://github.com/rihal-om/vodafone-website.git
cd vodafone-website

Running the app locally

1. Run all the services:

make run
# or
docker compose up -d --remove-orphans

1. Populate Strapi with sample data:

make populate-strapi

1. Build the frontend (SSG requires Strapi data):

make rebuild

1. Once the application is running, navigate to:

# Frontend (dev - hot reload)
http://localhost:3000

# Frontend (prod - SSG)
http://localhost:3001

# Strapi Admin (email: test@rihal.om) (password: Aa123456)
http://localhost:1337/admin

Strapi Data Management

Importing data

make populate-strapi

This imports data from ./strapi/backup.tar.gz and overwrites existing content.

Exporting data

make backup-strapi

This exports Strapi data to ./strapi/backup.tar.gz.

SSG (Static Site Generation)

The frontend uses Vike for static site generation. Pages are pre-rendered at build time with data from Strapi.

How it works

1. The initial build is skipped on container startup (Strapi must be populated first)
2. After populating Strapi, trigger make rebuild to generate static HTML
3. Static files are served from dist/client/
4. When content changes in Strapi, trigger a rebuild via the API

Triggering a rebuild

# First time: populate Strapi, then rebuild
make populate-strapi
make rebuild

# Or directly with curl
curl -X POST -H "x-rebuild-secret: your-secret" http://localhost:3000/api/rebuild

Alternatively, you can trigger a rebuild from the Strapi admin panel via the Rebuild Website plugin in the sidebar.

Checking build status

make rebuild-status

API Endpoints

Environment Variables

Tech Stack

Project Team

Feel free to reach out to any of us for questions, feedback, or collaboration opportunities. We are always open to discussing new ideas and improvements for the project.

Happy coding!