Fuel
Application web pour suivre les pleins d'essence avec calculs automatiques des kilomètres parcourus, consommation et coûts. Inclut des statistiques en temps réel, visualisations graphiques, estimations de trajet, et interface moderne.
À propos du projet
Application web full-stack développée pour suivre et gérer efficacement les pleins d'essence d'un véhicule.
Pensée pour un usage personnel, elle offre une interface intuitive permettant d'enregistrer chaque plein, de visualiser les statistiques de consommation et de coûts, avec des calculs automatiques des kilomètres parcourus et de la consommation moyenne.
Le projet met l'accent sur une expérience utilisateur fluide, des visualisations graphiques claires et une persistance fiable des données. L'ensemble a été conçu pour être performant, maintenable et facilement déployable.
Fonctionnalités principales
- Gestion des pleins :
- • Ajout et suppression de pleins d'essence
- • Saisie des données (kilométrage, litres, prix)
- • Calcul automatique des kilomètres parcourus
- • Calcul automatique de la consommation (L/100km)
- • Calcul automatique des coûts totaux
- Statistiques et visualisations :
- • Graphiques en temps réel des consommations
- • Évolution des coûts sur le temps
- • Moyennes et tendances
- • Cartes visuelles interactives
- Estimations de trajet :
- • Calcul des litres estimés pour un trajet donné
- • Estimation du coût basé sur la consommation moyenne
- • Planification économique des déplacements
- Authentification et sécurité :
- • Connexion sécurisée via code PIN
- • Protection des données personnelles
Détails techniques
Frontend – Next.js 14
- Next.js avec App Router pour une navigation moderne
- React pour la construction d'interfaces dynamiques
- TypeScript pour la sécurité des types
- Tailwind CSS pour un design responsive et cohérent
- Composants réutilisables et modulaires
- Optimisation des performances et du SEO
Backend – Next.js API Routes
- API Routes de Next.js pour les endpoints backend
- Architecture RESTful pour les opérations CRUD
- Validation des données côté serveur
- Gestion des erreurs et logging
Base de données – Neon PostgreSQL & Prisma ORM
- Prisma ORM pour une gestion type-safe de la base
- Neon PostgreSQL pour l'hébergement cloud de la base de données
- Schéma relationnel pour les pleins et véhicules
- Migrations automatisées et versionnées
Déploiement – Vercel
- Déploiement automatique avec Vercel pour l'hébergement full-stack (frontend + API)
- Variables d'environnement sécurisées
- Monitoring des performances intégré
Galerie d'images
Tableau de bord
Historique
Résumé mensuel
Graphiques