Wakaranai.

Overview

Wakaranai est une plateforme e-commerce de mode minimaliste inspirée de COS et APC — navigation produits, gestion du panier, liste de favoris et authentification utilisateur.

Expérience front-end complète : parcourir les collections, sélectionner des variantes produits, gérer son panier (CRUD complet), se connecter via Firebase Auth et sauvegarder ses favoris. Le paiement est volontairement absent — focus sur la logique front et les patterns UX e-commerce.

Projet personnel de 10 jours — première utilisation de Firebase et exploration des micro-interactions avec Framer Motion.

Challenge & Problem Statement

Le défi principal : implémenter un système de panier fonctionnel avec une logique CRUD complète (ajout, mise à jour des quantités, suppression, persistance d'état).

• Logique panier avec persistance entre les sessions
• Authentification Firebase — première intégration d'un service backend externe
• Micro-interactions fluides sans alourdir l'interface
• Maintenir une esthétique minimaliste tout en offrant une expérience riche

Solution

Wakaranai propose une expérience e-commerce complète côté front-end, permettant aux utilisateurs de parcourir une collection de vêtements pour hommes et femmes et d’interagir avec les produits de manière réaliste.

L’utilisateur peut :

• Naviguer entre les collections For her et For him
• Consulter les fiches produit et sélectionner des variantes (taille, couleur)
• Ajouter des articles au panier, modifier les quantités ou supprimer des produits
• Se connecter pour personnaliser son expérience
• Ajouter des produits en favoris et les retrouver dans une section dédiée

L’ensemble du parcours, de la découverte du produit jusqu’à la gestion du panier et des favoris, est fonctionnel.
La seule fonctionnalité volontairement absente est le paiement final (Stripe), non implémenté afin de rester dans le cadre du challenge et de se concentrer sur la logique front-end et l’expérience utilisateur.

Development

Stack

Application React pure — pas de backend propriétaire. Firebase pour l'auth et les favoris, état global géré avec Zustand.

Frontend — React

• React 18 + TypeScript
• Zustand — état global du panier et des favoris, léger et prévisible
• Tailwind CSS — design minimaliste, typographie soignée
• Framer Motion — micro-interactions : hover produit, animation panier, transitions de page
• React Router — navigation entre les pages collection, produit, panier

Backend — Firebase

• Firebase Authentication — connexion email/password et OAuth
• Firestore — persistance des favoris par utilisateur
• Données produits simulées avec images Pexels

Décisions techniques notables

• Zustand pour le panier : state management léger avec persistance localStorage — plus simple que Redux pour un scope e-commerce frontend.
• Firebase sans backend : auth et persistance sans écrire une seule ligne d'API — le bon choix pour un prototype de 10 jours.
• Framer Motion en sobriété : chaque animation a une raison d'être (feedback, guidance, fluidité) — aucune animation décorative qui ralentirait la navigation.

Outcome & Results

Prototype fonctionnel

Parcours utilisateur complet opérationnel : navigation collections → fiche produit → panier → authentification → favoris. Esthétique minimaliste cohérente, micro-interactions fluides.

Ce que j'ai appris

• Logique CRUD panier : implémenter un panier complet avec Zustand m'a appris à structurer un état complexe — les patterns appris ici sont réutilisés dans chaque projet avec state management.
• Firebase Auth : première intégration d'un service d'authentification externe — comprendre les tokens, les sessions persistantes et la protection des routes.
• UX e-commerce : les patterns e-commerce (feedback immédiat au panier, variantes produit, empty states) ont un fort impact sur la perception de qualité — des détails qui font la différence.

Learnings & Conclusion

Ce projet m’a permis de consolider plusieurs compétences clés en développement front-end, notamment autour de la gestion d’état, de l’architecture d’une application e-commerce et de l’intégration de services externes.

Les principaux apprentissages incluent :

• La mise en place d’une logique CRUD complète pour un panier e-commerce.
• L’utilisation de Zustand pour gérer un état global simple et efficace (panier et favoris).
• L’intégration de Firebase Auth pour gérer l’authentification et personnaliser l’expérience utilisateur.
• Une meilleure compréhension des patterns UX e-commerce, en respectant des parcours connus et rassurants.
• Les bases de Framer Motion, utilisées pour enrichir l’interface via des micro-interactions sans alourdir l’expérience.

Avec plus de temps, l’étape suivante logique aurait été l’intégration d’un système de paiement (Stripe) ainsi qu’un travail plus approfondi sur la persistance des données côté backend.
Wakaranai reste néanmoins un projet structurant, qui m’a permis de poser des bases solides pour des projets e-commerce plus complets par la suite.

Gallery