Menu

1. Informations générales
2. Liste pré-requis
3. Lancement de l'application
4. Interface de l'application
5. Vidéo de démonstration de l'application
6. Accès à la démonstration en ligne
7. Modification front-end et back-end
8. Informations importantes sur les différents fichiers et dossiers
9. Auteur et contact

Projet ToDo List Application Calendar

• Développement d'une interface web pour une application de to-do list avec un calendrier.

• Utilisation de React et de JavaScript.

• Utilisation de SASS et de Bootstrap.

• Utilisation de Local Storage pour la sauvegarde des données.
   

• Fonctinnalitées de l'application.

  • Création : Création de notes.
  • Suppression : Suppression de notes.
  • Filtres : Pour les tâches All, Do to, Completed.
  • Calendrier : L'heure et la date du jour actuel et mis en évidence, possibilité de choisir le mois et l'année.
  • Option : Le survol des notes affiche leurs dates de création sur le calendrier.
  • Thème : Bouton permettant le changement de thème Light ou Dark.

---

Retour en haut 🡅

Liste pré-requis

• Aucun pré-requis n'est nécessaire.

• Application conçue avec les technologies suivantes :
   

  • React v18.3.1 ➔ Documentation React
  • Vitejs v4.3.1 ➔ Documentation Vitejs
  • Node.js v.20.9.0 ➔ Documentation Node.js
  • Npm v10.8.1 ➔ Documentation et téléchargement de Npm
  • SASS v1.77.8 ➔ Documentation SASS
  • Bootstrap v5.3.3 ➔ Documentation Bootstrap
  • VSCode v1.85.2 ➔ Documentation et téléchargement de VSCode
  • Chrome v.126.0.6478.114 & Firefox v.127.0
  • Vite v5.3.1
  • Windows 10 Professionnel

---

Retour en haut 🡅

Lancement de l'application

• Pour lancer l'application.

• Se rendre dans le dossier principal est lancer le fichier index.html ➔ (index.html)

Note navigateur : Les tests ont était fait sur Firefox et Google Chrome.

---

Retour en haut 🡅

Interface de l'application

• L'application est exécutée dans une page web.

---

Retour en haut 🡅

Démonstration de l'application

• Vidéo de démonstration de l'application.

---

Retour en haut 🡅

Accès à la démonstration en ligne

• Vous pouvez accéder à une démonstration de l'application via GitHub Pages.
• En utilisant le lien suivant ➔ Lien de l'application en ligne

---

Retour en haut 🡅

Modification front-end et back-end

• Si vous souhaitez modifier les parties front-end et back-end de l'application, il faudra installer les outils de développements suivants.

1. Installer Node.js (inclut npm)

• Si Node.js n'est pas encore installé sur votre machine, il peut être téléchargé ici ➔ Téléchargement Node.js
• Cela installera :
  • À la fois les dépendances de production (comme react et react-dom)
  • Et les dépendances de développement (comme Vite, SASS, etc.)
     

2. Installer les dépendances

• Dans un terminal exécuter la commande suivante dans le répertoire du projet.
• Cela installera toutes les dépendances spécifiées dans le fichier package.json ➔ (package.json).

$ npm install

• Pour lancer le projet en mode développement.
• Cela permettra d'accéder a la page ➔ http://localhost:5173/

$ npm run dev

• En cas de problème utiliser la commande suivante pour construire le projet.

$ npm run build

• Pour prévisualiser le build.

$ npm run preview

 

3. Pour modifier la partie front-end il faudra utiliser SASS.

• Dans un terminal exécuter la commande suivante dans le répertoire du projet.
• Une fois le serveur SASS lancer vous pouvez modifier les styles CSS dans le dossier sass ➔ (sass)

$ sass --watch sass/main.scss:src/index.css

 

Note : Pour que les changements de style CSS fonctionne, modifier le script appelé dans le fichier index.html ➔ (index.html)

• Modifier le fichier index.html de la manière suivante remplacer.

<script src="dist/bundle.js"></script>

• En effectuant la modification suivante.

<script type="module" src="/src/main.jsx"></script>

 

4. Sauvegarder les modifications avec Wepack.

• Dans un terminal exécuter la commande suivante dans le répertoire du projet.

$ npx webpack --config webpack.config.js

• Pour utiliser le nouveau build avec les nouvelles modifications, modifier le lien du script dans le fichier index.html.

<script src="dist/bundle.js"></script>

---

Retour en haut 🡅

Informations importantes sur les différents fichiers et dossiers

Les dossiers components, hook, sass

• Chacun contient les fichiers contenant les configurations pour l'application.

  • components ➔ (components)
  • hook ➔ (hooks)
  • sass ➔ (sass)
  • src ➔ (src)

Le dossier components

• Le dossier contient les composants React.

  • Calendar.jsx ➔ (Calendar.jsx)
  • CalendarBody.jsx ➔ (CalendarBody.jsx)
  • CalendarHeader.jsx ➔ (CalendarHeader.jsx)
  • DateHoverContext.jsx ➔ (DateHoverContext.jsx)
  • DateTimeFormat.jsx ➔ (DateTimeFormat.jsx)
  • ScrollAnimation.jsx ➔ (ScrollAnimation.jsx)
  • TodoItem.jsx ➔ (TodoItem.jsx)
  • TodoList.jsx ➔ (TodoList.jsx)

Le dossier hooks

• Le dossier contient les hooks pour les composants React.

  • useCalendar.js ➔ (useCalendar.js)
  • useDateTime.js ➔ (useDateTime.js)
  • useHoverCalendarDate.js ➔ (useHoverCalendarDate.js)
  • useLocalStorage.js ➔ (useLocalStorage.js)
  • useSyncTodoWithCalendar.js ➔ (useSyncTodoWithCalendar.js)
  • useTodos.js ➔ (useTodos.js)

Le dossier sass

• Le dossier contient les dossiers et fichiers nécessaires pour la partie front-end avec SASS.

  • Dossier base

    • _base.scss ➔ (_base.scss)
    • _fonts.scss ➔ (_fonts.scss)
    • _variables.scss ➔ (_variables.scss)
       

  • Dossier components

    • _buttons.scss ➔ (_buttons.scss)
    • _calendar-month-body.scss ➔ (_calendar-month-body.scss)
    • _calendar-month-header.scss ➔ (_calendar-month-header.scss)
    • _calendar-time-date.scss ➔ (_calendar-time-date.scss)
    • _theme-switcher.scss ➔ (_theme-switcher.scss)
    • _todo-list-group.scss ➔ (_todo-list-group.scss)
       

  • Dossier layout

    • _app-container.scss ➔ (_app-container.scss)
    • _logo-container.scss ➔ (_logo-container.scss)
    • _todo-calendar-container.scss ➔ (_todo-calendar-container.scss)
       

  • Dossier utils

    • _animations.scss ➔ (_animations.scss)
    • _mixins.scss ➔ (_mixins.scss)
    • _reveal.scss ➔ (_reveal.scss)
       

  • Le fichier main.scss regroupe les imports pour SASS

    • main.scss ➔ (main.scss)

Le dossier static

• Dossier qui contient les polices, les images nécessaires pour l'application, les badges et la vidéo nécessaires pour le README.md.

  • static ➔ (badges)
  • static ➔ (fonts)
  • static ➔ (img)
  • static ➔ (video)

---

Retour en haut 🡅

Auteur et contact

Pour toute information supplémentaire, vous pouvez me contacter.
Bubhux: [email protected]