TypeScript
Evaluations
Évaluations

Évaluation Pratique : Création d'une ToDo App en TypeScript avec React

Objectif de l'évaluation:

Projet

  • Développer une application ToDoList avec React, vite et TypeScript.
  • Chaque tache doit avoir :
    • Un titre
    • Une description
    • Une priorité
    • Un état (à faire, en cours, terminé)
    • Une date d'échéance
  • Vous devez gérer pour chaque tache :
    • La création
    • La modification
    • La suppression
  • Vous devez pouvoir
    • Filtrer des taches
      • Par priorité
      • Par état
      • Par date d'échéance
    • Rechercher des taches
      • Par titre
      • Par description

Technique

  • Vous serez par groupe de 4
  • Vous devez utiliser react et TypeScript
  • Vous devez avoir une interface convenable d'utilisation
  • Vous pouvez utiliser les outils de styles que vous voulez (Tailwind, Emotion...)
  • Vous devez avoir un code propre et bien organisé
  • Vous devez mettre vore projet sur Github, m'ajouter sur GitHub (opens in a new tab) et avoir un historique propre
  • Vous devez heberger le projet sur Vercel

Instructions détaillées:

Étape 1: Configuration initiale

  • Initialisez un nouveau projet React avec TypeScript et vite
npm create vite@latest ts-exam -- --template react-ts
# pnpm create vite ts-exam --template react-ts
# yarn create vite ts-exam --template react-ts

Vous obtenez la structure suivantes

.
├── public
│   └── vite.svg
├── src
│   ├── assets
│   │   └── react.svg
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── README.md
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

Installer les dépendances

npm i

Installer tailwindcss

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

Ajouter au fichier tailwind.config.js

content: ["./src/**/*.{html,js,ts,jsx,tsx}"],

Composants

  • Créer les composants de base
    • ToDoList : UI de liste des tâches
    • ToDoItem : Tache unique

Étape 2: ToDoItem avec TypeScript

  • Définissez une interface pour ToDoItem avec les propriétés suivantes
    • id
    • description
    • priority
    • status
    • dueDate.
  • Utilisez des énumérations :
    • priority (Low, Medium, High)
    • status (ToDo, InProgress, Done).
  • Créez un type pour gérer la date (jour, mois, année) et l'heure

Étape 3 : Gestion de l'état avec React et TypeScript

  • Implémentez la logique d'état pour ajouter, modifier, et supprimer des tâches en utilisant le hook useState.
  • Utilisez des fonctions génériques pour manipuler l'état des tâches de manière type-safe.

Étape 4 : Interactions et contrôles avancés

  • Ajoutez des méthodes de classe dans un composant de classe ToDoManager pour gérer les actions.
  • Utilisez des décorateurs pour ajouter des logs ou des vérifications de sécurité sur les méthodes de gestion des tâches.
  • Implémentez une barre de recherche pour filtrer les tâches par description ou priorité, utilisant type guards pour assurer la sécurité des types lors des opérations.

Étape 5 : Déploiement

  • Deployer votre projet sur Vercel
  • Creer un repo sur Github et y ajouter votre code

Étape 6 : Bonus

  • Stocker les taches en localstorage
  • Intégrez une bibliothèque JavaScript externe pour ajouter une fonctionnalité spécifique (par exemple, notifications ou date picker).
  • Créez un fichier .d.ts pour décrire les types de la bibliothèque externe utilisée, pratiquant l'extension des types globaux.

Critère d'évaluation

  • Fonctionnalités implémentées
  • Qualité de code
  • Compréhension
  • Organisation
AcceuilAcceuil