Flowdeck
Flowdeck is a React and TypeScript portfolio project designed as a creative project management dashboard for freelancers, UX/UI designers and small creative teams. The goal is to help users manage projects, clients, statuses, priorities, deadlines, progress and completion state in a clear dashboard interface.
The project started as a React and TypeScript learning project, but I treated it as a realistic portfolio product connected to my UX/UI background and my future direction as a Frontend Developer and AI Application Developer. It also includes a separate Python and Flask chatbot core as the foundation for a future assistant integration.
Technologies & Tools Used
Design & UI Planning
Planned the dashboard structure, screens and user flow.
Prepared simple visual identity and interface assets.
Adjusted visual assets and presentation images.
Frontend & Assistant Foundation
Built the dashboard interface with React and reusable components.
Structured project data with shared TypeScript types.
Styled the dashboard with SCSS and a dark interface direction.
Created a separate Python and Flask assistant core foundation.
Flowdeck is now available as a live portfolio project. You can explore the dashboard, review the interface, test the project filtering experience and see how the React and TypeScript frontend is structured as a product-style application.
View the main Flowdeck repository on GitHub to explore the React structure, TypeScript data model, reusable components, filters, dashboard UI and assistant panel.
Display Prototype on Figma
Explore the interface planning and user flow behind Flowdeck by viewing the Figma prototype.
Creation Process
Flowdeck was built as a realistic dashboard product rather than a simple coding exercise. The goal was to combine my UX/UI experience with React, TypeScript and a future AI assistant direction.
Product Concept & Users
Defined Flowdeck as a project management dashboard for freelancers, UX/UI designers and small creative teams who need a clear view of projects, clients, deadlines and progress.
Frontend Architecture
Built the interface with React, TypeScript, Vite and SCSS, using reusable components such as ProjectCard and ProjectList.
Interactive Dashboard Logic
Added project statistics, status filtering, filtered project counts, progress indicators and typed project data to make the dashboard more structured and interactive.
AI Assistant Foundation
Created a separate Python and Flask backend project called Flowdeck AI Chatbot Core. It is a rule-based assistant foundation, not a real LLM product yet.
Features
Flowdeck combines a React and TypeScript dashboard with a separate Python and Flask assistant foundation. The frontend focuses on project visibility, while the backend explores message handling, intent detection and future AI assistant integration.
React Dashboard
The dashboard includes project cards, dynamic project lists, sidebar navigation, project statistics, progress indicators and a responsive layout.
Status Filtering
Users can filter projects by status: All, To Do, In Progress and Completed. The interface also displays a filtered project count.
Typed Project Data
A shared TypeScript Project type helps structure project data safely and keeps components more predictable.
Assistant Panel UI
The React project includes a Flowdeck Assistant panel designed to connect with the Flask API in the planned integration.
Python/Flask Chatbot Core
The separate backend can detect rule-based intents such as projects, tasks, priority, deadlines, status, summary and general questions.
Planned Integration
The planned flow is: React ChatPanel sends a message to Flask POST /chat, Python processes the message, then React displays the bot response in the UI.