Flowdeck
Flowdeck est un projet portfolio réalisé avec React et TypeScript, conçu comme un dashboard de gestion de projets créatifs pour freelances, designers UX/UI et petites équipes créatives. L’objectif est d’aider les utilisateurs à gérer projets, clients, statuts, priorités, délais, progression et état d’avancement dans une interface claire.
Le projet a commencé comme un exercice d’apprentissage React et TypeScript, mais je l’ai traité comme un produit portfolio réaliste, lié à mon expérience UX/UI et à mon orientation future vers le développement front-end et les applications IA. Il inclut aussi un projet séparé en Python et Flask comme base pour une future intégration d’assistant.
Technologies & outils utilisés
Design & préparation UI
Préparation de la structure du dashboard, des écrans et du parcours utilisateur.
Préparation d’éléments simples d’identité visuelle et d’interface.
Retouche des visuels et des images de présentation.
Front-end & base assistant
Développement de l’interface dashboard avec React et des composants réutilisables.
Structuration des données projet avec des types TypeScript partagés.
Stylisation du dashboard avec SCSS et une interface sombre.
Création d’une base assistant séparée avec Python et Flask.
Flowdeck est maintenant disponible en tant que projet portfolio en ligne. Vous pouvez explorer le dashboard, consulter l’interface, tester l’expérience de filtrage des projets et voir comment le front-end React et TypeScript est structuré comme une application de type produit.
Consultez le dépôt principal de Flowdeck sur GitHub pour explorer la structure React, le modèle de données TypeScript, les composants réutilisables, les filtres, l’interface dashboard et le panneau assistant.
Afficher le prototype sur Figma
Explorez la préparation de l’interface et le parcours utilisateur de Flowdeck en consultant le prototype Figma.
Processus de création
Flowdeck a été construit comme un produit dashboard réaliste plutôt qu’un simple exercice de code. L’objectif était de combiner mon expérience UX/UI avec React, TypeScript et une direction future vers les assistants IA.
Concept produit & utilisateurs
Définition de Flowdeck comme dashboard de gestion de projets pour freelances, designers UX/UI et petites équipes créatives ayant besoin d’une vue claire sur les projets, clients, délais et progressions.
Architecture front-end
Développement de l’interface avec React, TypeScript, Vite et SCSS, avec des composants réutilisables comme ProjectCard et ProjectList.
Logique interactive du dashboard
Ajout de statistiques, filtres par statut, compteur de projets filtrés, indicateurs de progression et données typées pour rendre le dashboard plus structuré et interactif.
Base d’assistant IA
Création d’un projet backend séparé en Python et Flask appelé Flowdeck AI Chatbot Core. Il s’agit d’une base d’assistant rule-based, pas encore d’un vrai produit LLM.
Fonctionnalités
Flowdeck combine un dashboard React et TypeScript avec une base assistant séparée en Python et Flask. Le front-end se concentre sur la visibilité des projets, tandis que le backend explore le traitement des messages, la détection d’intentions et une future intégration IA.
Dashboard React
Le dashboard inclut des cartes de projets, une liste dynamique, une navigation latérale, des statistiques, des indicateurs de progression et une mise en page responsive.
Filtrage par statut
Les projets peuvent être filtrés par statut : All, To Do, In Progress et Completed. L’interface affiche aussi le nombre de projets filtrés.
Données typées
Un type Project partagé en TypeScript permet de structurer les données projet de manière plus sûre et de rendre les composants plus prévisibles.
Panneau assistant
Le projet React inclut une interface Flowdeck Assistant pensée pour être connectée à l’API Flask lors de l’intégration prévue.
Chatbot Core Python/Flask
Le backend séparé peut détecter des intentions rule-based comme projects, tasks, priority, deadlines, status, summary et general.
Intégration prévue
Le flux prévu est : React ChatPanel envoie un message vers Flask POST /chat, Python traite le message, puis React affiche la réponse du bot dans l’interface.