Guide d’utilisation – Projet VenteVêtements

Ce document présente la structure et le fonctionnement global du projet VenteVêtements, qui combine un backend Flask et un frontend React connectés à une base de données PostgreSQL. Vous trouverez ici les étapes pour installer, configurer et exécuter le projet, ainsi qu’un aperçu de ses principales fonctionnalités.

---

1) Prérequis

• Node.js ≥ 18 et npm
• Python ≥ 3.10 (testé en 3.13)
• PostgreSQL ≥ 14 + pgAdmin
• Accès au dépôt GitHub

---

2) Cloner le dépôt

# depuis votre dossier de travail
git clone https://github.com/liliaouldhocine/e25-ds-orange.git
cd e25-ds-orange

La structure utile :

backend/
  app.py
  config.py
  models.py
frontend/
  package.json
  src/
  public/
sql/
  (script SQL de création du schéma et des tables)

3) Base de données (PostgreSQL)

1. Démarrez PostgreSQL et ouvrez pgAdmin.
2. Créez la base (si elle n’existe pas encore) :
   • Nom recommandé : ventevetements
   • Encodage : UTF8
3. Exécutez le script SQL situé dans le dossier sql/ pour :
   • Créer le schéma ventevetements
   • Créer la table users
4. Vérifiez la configuration dans le fichier backend/config.py :

# backend/config.py
SQLALCHEMY_DATABASE_URI = "postgresql://postgres:root@localhost:5432/ventevetements"
SQLALCHEMY_TRACK_MODIFICATIONS = False
SECRET_KEY = "secret-key-very-secret"

Adaptez user:password@host:port/db selon votre installation.

4) Lancer le backend (Flask)

Ouvrez le dossier backend dans une première fenêtre VS Code (ou un terminal séparé).

cd backend

# activer l’environnement (Windows)
venv_py313\Scripts\activate

# installer les dépendances
pip install flask flask_sqlalchemy flask_cors bcrypt psycopg2

# démarrer l’API
python app.py

Le serveur démarre sur http://127.0.0.1:5000 (port 5000).

Endpoints utiles

• POST /signup – création de compte (hash bcrypt)
• POST /login – vérification email/mot de passe, création de session + renvoi du prénom
• POST /logout – vider la session
• POST /reset-password – réinitialisation du mot de passe (sans email, version locale)

CORS est activé avec supports_credentials=True pour permettre l’utilisation des cookies/session côté navigateur.

5) Lancer le frontend (React)

Ouvrez le dossier frontend dans une deuxième fenêtre VS Code (ou un autre terminal).

cd frontend

# installer les packages
npm install

# lancer l’app en dev
npm start

Le frontend démarre sur http://localhost:3000. Pages actuelles :

• Home (carrousel + sections)

• Login / SignUp / ForgotPassword (connexion réelle via API)

• Products (grille statique, barre de recherche visuelle, pagination par flèches)

  • La recherche/filtrage est visuel (non branché base/filtre serveur dans cette version).

• Quand l’utilisateur est connecté, le logo utilisateur orange affiche son prénom (stocké dans localStorage après login). Sinon, il n’apparaît pas.

6) Flux de démarrage rapide

• Backend : backend → activer venv → pip install ... → python app.py
• Base : exécuter le script SQL dans pgAdmin si nécessaire
• Frontend : frontend → npm install → npm start
• Ouvrir http://localhost:3000

7) Chemin critique (démo)

• Créez un compte via SignUp.
• Connectez-vous via Login (POST /login) ⇒ le prénom s’affiche dans le header.
• Naviguez vers Products pour voir la grille d’articles et la pagination par flèches.
• Déconnectez-vous via le bouton Déconnexion (efface localStorage + session côté API avec /logout si branché).

8) Notes & astuces

• Ports en usage

  • Si :3000 est pris, React proposera de basculer sur :3001. Acceptez.

  • Si :5000 est occupé, changez le port Flask :

python app.py --port 5001

• Connexion à Postgres

  • Si l’API ne démarre pas : vérifiez SQLALCHEMY_DATABASE_URI, le mot de passe, et que le service Postgres tourne.

• Images frontend

  • Les images sont servies depuis frontend/public/images/....
  • Dans React, référencez-les avec /images/nom.ext (ex. ).

9) Mode recherche

Aller sur la barre de recherche et rechercher un article par son nom ou par son étiquette. Vous pouvez par la suite lancer la recherche en appuyant sur le bouton "Rechercher" ou en tapant tout simplement sur la touche "Entrer". La recherche se réinitialisera tout de suite après avoir modifié la barre de recherche ou en rechargeant la page.