Aller au contenu
Illustration abstraite haut de gamme : fond obsidienne, halo cyan-magenta, grille fine.

NeoTasks AI — Micro-app Kanban (drag & drop natif)

Trois colonnes À faire / En cours / Fait avec drag & drop HTML5 (sans dépendance). Bouton de génération de tâches (mock IA), filtre en temps réel et compteur. Interface épurée, lisible et accessible.

Demo

4 / 4 visibles

À faire

2

Installer Tailwind & configurer tokens

À faire

Ajouter ESLint + TS strict

À faire

En cours

1

Mettre en place App Router (Next 14)

En cours

Fait

1

Optimiser images (next/image)

Fait

Fonctionnalités

  • Drag & drop HTML5 natif entre colonnes (aucune lib externe).
  • Bouton “Générer des tâches” (mock IA) — ajoute 5 tâches crédibles.
  • Filtre instantané + compteur (visible / total).
  • 100% front, données mockées en TypeScript.
  • Esthétique sobre, halos subtils, coins 2xl.

Tech & Architecture

  • Next.js 14 (App Router), TypeScript.
  • Tailwind CSS + composants maison.
  • DnD via DragEvent (onDragStart/Over/Drop) — HTML5 natif.
  • Composant <Kanban /> isolé dans /components.

UX & Accessibilité

  • Contrastes élevés, focus visibles, texte lisible sur fond sombre.
  • ARIA : colonnes role="list", cartes role="listitem".
  • Animations légères, non agressives.

Limites & pistes

  • Pas de persistance au-delà du rechargement (démo front-only).
  • Pas de multi-utilisateur.
  • Pistes : localStorage, tri avancé, multi-boards.