Une application To-do List moderne inspirée du style des menus de GTA Vice City. Build with React, Vite.
Demo : https://ornate-nougat-7de5c8.netlify.app/
- Opérations CRUD complètes : Créer, lire, mettre à jour et supprimer des tâches facilement
- Complétude des tâches : Marquez les tâches comme complètes/incomplètes avec des cases à cocher
- Stockage local : Toutes les tâches sont automatiquement sauvegardées entre les sessions
- Design réactif : Optimisé pour desktop, tablette et appareils mobiles
- Système audio :
- Musique de fond avec contrôle lecture/pause
- Effets sonores sur les interactions (survol, clic, suppression)
- Affichage des statistiques : Compteur en temps réel des tâches complétées
- Node.js (v16+)
- npm ou yarn
- Clonez le dépôt :
git clone https://github.com/HamdiUT/React-Todo-App.git
cd React-Todo-App- Installez les dépendances :
npm install- Démarrez le serveur de développement :
npm run dev- Ouvrez votre navigateur et accédez à
http://localhost:5173
# Démarrer le serveur de développement avec HMR
npm run dev
# Construire pour la production
npm run build
# Aperçu de la build de production
npm run preview
# Exécuter les vérifications ESLint
npm run lint- React 19 : Bibliothèque UI moderne avec hooks
- Vite : Outil de build ultra-rapide avec HMR
- CSS vanilla : Propriétés personnalisées, animations et dégradés
- API Audio HTML5 : Lecture d'effets sonores et de musique
- API localStorage : Stockage persistant des tâches
- ESLint : Vérification de la qualité du code
Activez/désactivez la musique à l'aide du bouton 🔊 en haut à droite.
Les tâches sont automatiquement sauvegardées dans le localStorage du navigateur avec la clé viceCityTodos. Les données persistent après :
- Les rafraîchissements du navigateur
- La fermeture et réouverture des onglets
- Les redémarrages du navigateur
- Ajouter une tâche : Tapez dans le champ et cliquez sur le bouton "AJOUTER" ou appuyez sur Entrée
- Éditer une tâche : Cliquez sur le texte de la tâche pour l'éditer sur place
- Compléter une tâche : Cliquez sur la case à cocher pour marquer comme complète/incomplète
- Supprimer une tâche : Cliquez sur l'icône de corbeille pour supprimer une tâche
- Contrôler l'audio : Cliquez sur l'icône de haut-parleur pour activer/désactiver la musique
N'hésitez pas à forker ce dépôt et soumettre des pull requests pour toute amélioration.
Ce projet est open source et disponible sous la licence MIT.
- Catégories/tags de tâches
- Dates d'échéance et rappels
- Basculement de thème sombre/clair
- Export des tâches en JSON
- Fonctionnalité de recherche/filtrage
Fait par HamdiUT