WhatsApp Boutique Store

A small-business e-commerce storefront that lets customers browse products online and continue checkout directly on WhatsApp.

Overview

Many small sellers share products daily on WhatsApp status. This project helps organize products in a clean online catalog so customers can browse easily and contact the seller with ready-made WhatsApp messages.

What it does

Displays a product catalog with images, prices, and details.
Allows customers to browse and select products.
Redirects checkout to WhatsApp with pre-filled order messages.
Provides an admin dashboard to manage products and inventory.
Supports basic multi-language UI switching.

My role / What I built

Designed the frontend architecture with separate storefront and admin sections.
Built reusable UI components (product cards, grids, notifications).
Implemented product management (add, edit, delete items).
Created cart and language management using React Context.
Set up routing between storefront and admin dashboard.
Implemented responsive mobile-first layout.

Tech stack

Frontend: React, TypeScript
Styling: Tailwind CSS
Routing: React Router
State: React Context API
Build tools: Vite, ESLint

Screenshots

Storefront product catalog

Admin dashboard

WhatsApp checkout redirect

Demo

Development: npm run dev
Production build: npm run build
Example store: Bella's Boutique (Kigali, Rwanda)

Status

MVP is complete with storefront and admin features. Data is currently stored in memory and ready for backend API integration.

Next steps

Backend API integration
Order persistence
Payment integration
Production deployment

Other Projects

Une boutique en ligne simple qui permet aux clients de parcourir les produits et de continuer la commande directement sur WhatsApp.

Vue d’ensemble

Beaucoup de petits vendeurs partagent leurs produits sur le statut WhatsApp. Ce projet permet de regrouper les produits dans un catalogue clair pour faciliter la navigation et la commande.

Ce que ça fait

Affiche un catalogue avec images, prix et détails.
Permet aux clients de parcourir et choisir des produits.
Redirige la commande vers WhatsApp avec un message pré-rempli.
Fournit un tableau admin pour gérer les produits.
Supporte le changement de langue de l’interface.

Mon rôle / Ce que j’ai fait

Création de l’architecture frontend avec boutique et admin séparés.
Développement de composants réutilisables.
Mise en place de la gestion des produits (ajout, modification, suppression).
Gestion du panier et des langues avec React Context.
Configuration du routage entre les pages.
Design responsive pour mobile.

Technologies

Frontend : React, TypeScript
Style : Tailwind CSS
Routage : React Router
État : React Context
Build : Vite, ESLint

Captures

Catalogue boutique

Tableau admin

Redirection WhatsApp

Démo

Développement : npm run dev
Build production : npm run build
Boutique exemple : Bella's Boutique (Kigali)

Liens

Statut

MVP terminé avec boutique et admin. Les données sont prêtes pour une intégration backend.

Prochaines étapes

Connexion API backend
Gestion des commandes
Paiements
Déploiement production