Compte rendu — Sio Cars

Informations générales

Nom du projet : Sio Cars — console concession

Contexte : Maquette pédagogique / portfolio (BTS SIO SLAM)

Auteur : Abdelmalek Elidrissi

Type : Application web statique HTML / CSS / JavaScript, données locales

Objectifs du projet

Simuler un espace concession : connexion, tableau de bord, modules métier séparés.
Gérer des volumes réalistes de données (clients, véhicules, ventes, employés) sans serveur.
Proposer une expérience proche des sites auto (identité visuelle, lisibilité, CTA).
Permettre la consultation et la modification des fiches (véhicule, client, employé) avec persistance locale.
Relier les entités (vente ↔ client ↔ véhicule ↔ vendeur) pour illustrer un parcours cohérent.

Technologies utilisées

Interface

HTML5 CSS3 Bootstrap 5.3 Bootstrap Icons Google Fonts (Plus Jakarta Sans)

Logique

JavaScript (IIFE, modules globaux) localStorage (session + jeu de données JSON)

Livrables graphiques

Logo SVG intégré Illustrations véhicules (SVG inline, sans photos externes)

Structure du projet

SioCars/ ├── index.html # Connexion ├── dashboard.html # Hub après authentification ├── clients.html # Liste clients + barre d’actions ├── products.html # Stock véhicules (grille) ├── employees.html # Liste employés ├── client-detail.html # Fiche client éditable ├── product-detail.html # Fiche véhicule éditable ├── employee-detail.html # Fiche employé éditable └── public/ ├── css/siocars.css # Thème concession / animations / composants ├── images/siocars-logo.svg └── js/ ├── siocars-auth.js # Session (clés localStorage, garde d’accès) ├── siocars-data.js # Génération > 500 enregistrements, persistance ├── siocars-ui.js # Pagination, formatage, helpers (marque, SVG…) ├── siocars-login.js ├── siocars-dashboard.js ├── siocars-clients.js ├── siocars-products.js ├── siocars-employees.js ├── siocars-client-detail.js ├── siocars-product-detail.js ├── siocars-employee-detail.js └── siocars-nav.js # Comportement navbar au scroll

Fonctionnalités principales

1. Authentification légère

Page d’accueil index.html : saisie identifiant / mot de passe (démo).
État stocké dans localStorage ; les pages métier appellent SioCarsAuth.requireAuth() et redirigent sinon vers la connexion.
Déconnexion depuis la barre de navigation.

2. Tableau de bord

Vue d’ensemble avec accès rapide aux modules (clients, produits, employés).
Indicateurs liés au jeu de données chargé.

3. Modules liste

Clients : tableau paginé, recherche, sélection de ligne, ouverture de la fiche via une barre d’actions hors liste.
Produits : grille de cartes véhicule (modèles réels, vignette SVG + monogramme), filtres statut / recherche, pagination, même principe de sélection + bouton « Ouvrir la fiche ».
Employés : tableau, recherche, sélection, fiche dédiée.
Bouton Régénérer : recrée tout le jeu de données démo (utile après évolution du modèle).

4. Fiches détail et édition

Chaque fiche est une page HTML dédiée avec paramètre ?id=… (référence client, véhicule ou matricule).
Formulaires pour modifier les champs métier ; Enregistrer met à jour l’objet dans le JSON puis SioCarsData.save().
Côté véhicule : bloc « Vente & livraison » si une vente existe ; passage en stock peut retirer la vente associée (logique démo).
Historique d’achats (client) et ventes signées (employé) en lecture, avec liens croisés vers les autres fiches.

5. Données générées

Cible : au moins 500 enregistrements au total dans localStorage (clé versionnée).
Répartition indicative de la génération : ~430 clients, ~400 véhicules, ~340 ventes, ~48 employés (les véhicules vendus sont cohérents avec les ventes).
Marques et modèles calés sur des véhicules réels du marché européen ; pas d’images bitmap : silhouettes SVG et texte.

6. Interface utilisateur

Thème sombre, accents rouges type CTA automobile, navbar responsive avec effets au survol et au scroll.
Transitions et survols sur cartes, boutons, tableaux et liens ; respect possible de prefers-reduced-motion.

Choix techniques et limites

Pas de backend : tout est simulé côté navigateur ; les données ne sont pas partagées entre postes ni sécurisées comme en production.
Authentification : factice, uniquement pour structurer le parcours utilisateur.
Évolutivité : une API REST, une base SQL et un vrai module d’auth remplaceraient avantageusement localStorage pour un déploiement métier.

Conclusion

Le projet Sio Cars regroupe navigation multi-pages, gestion d’un gros volume de données factices, fiches éditables et une présentation alignée sur l’univers concession / annonces auto. Il illustre la maîtrise du front statique, de la persistance locale et de la modélisation simple de relations métier (ventes, clients, vendeurs).

Accès au projet : Ouvrir la console Sio Cars