A modern, sleek productivity & daily task management web app — built to help you stay organized, focused, and in flow.
Features • Tech Stack • Getting Started • Project Structure • Screenshots • Environment Variables • Contributing • License
- Quick Add Bar — Create tasks instantly with optional due dates, reminders, recurring schedules, and image attachments.
- List View — A clean, scrollable list of active and completed tasks with inline actions.
- Kanban Board — Drag-and-drop tasks across To Do → In Progress → Done columns (powered by
@hello-pangea/dnd). - View Toggle — Seamlessly switch between List and Kanban views.
- Date Strip — A horizontally scrollable date picker spanning the last 14 days.
- Historical Snapshots — Browse past days in read-only mode to review what you accomplished.
- Completion Consistency — 14-day area chart showing your daily task completion rate.
- Productivity Peaks — Bar chart displaying average tasks completed per day of the week (last 30 days).
- Key Metrics — Current streak, overall completion rate, and most productive day — all at a glance.
- Dark-First Design — A premium dark theme with carefully curated color tokens, glassmorphism, and subtle glow effects.
- Fluid Animations — Page transitions, micro-interactions, and spring-based animations via Framer Motion.
- Responsive Layout — Fully optimized for desktop, tablet, and mobile with adaptive navigation and touch-friendly targets (44×44px minimum).
- Collapsible Sidebar — Desktop sidebar with active indicator bars, badges, and smooth collapse/expand.
- Auth Gateway — Beautiful and interactive sign-in / sign-up page with animated floating labels, parallax card tilt, and social login buttons (Google & GitHub).
- Mode Toggle — Animated pill switch between Sign In and Sign Up with smooth field transitions.
- Installable — Add FlowDesk to your home screen for a native-like experience.
- Service Worker — Cache-first strategy for static assets, network-first for HTML — works offline.
- App Manifest — Standalone display, custom theme color, and splash screen configuration.
- Reminders — Flag tasks as reminders with a visual bell indicator.
- Recurring Tasks — Set daily or weekly recurrence on any task.
- Visual Proof — Attach images to tasks as proof of completion; includes a full-screen lightbox viewer.
- Day Summary — End-of-day progress bar with motivational messages and emoji feedback.
- Local Persistence — All tasks and daily snapshots are stored in
localStorage— no server required.
| Layer | Technology |
|---|---|
| Framework | React 19 with TypeScript |
| Build Tool | Vite 8 — lightning-fast HMR and optimized builds |
| Styling | Tailwind CSS 4 via @tailwindcss/vite plugin |
| Animations | Framer Motion — spring physics & layout |
| Drag & Drop | @hello-pangea/dnd |
| Charts | Recharts — composable charting for React |
| Icons | Lucide React + inline SVGs |
| Backend | Supabase — Auth, database, edge functions (optional) |
| Linting | ESLint 9 + typescript-eslint + React hooks/refresh plugins |
| Typography | Inter via Google Fonts |
- Node.js ≥ 18
- npm ≥ 9 (or use your preferred package manager)
# Clone the repository
git clone https://github.com/Eccentric-Ayush/Flowdesk.git
cd Flowdesk
# Install dependencies
npm install
# Set up environment variables
cp .env.example .env
# Edit .env with your Supabase credentials (optional — app works without them)
# Start the development server
npm run devThe app will be available at http://localhost:5173.
| Command | Description |
|---|---|
npm run dev |
Start the Vite dev server with HMR |
npm run build |
Type-check with tsc and build for production |
npm run preview |
Preview the production build locally |
npm run lint |
Run ESLint across the project |
FlowDesk/
├── public/
│ ├── favicon.svg # App icon (SVG)
│ ├── icons.svg # Icon sprite
│ ├── manifest.json # PWA manifest
│ └── service-worker.js # Offline caching service worker
├── src/
│ ├── assets/ # Static assets (hero image, logos)
│ ├── components/
│ │ ├── DateStrip.tsx # Horizontal scrollable date picker
│ │ ├── DaySummary.tsx # Daily progress bar & motivational summary
│ │ ├── KanbanBoard.tsx # Drag-and-drop Kanban with mobile tabs
│ │ ├── ListView.tsx # Task list view with toggle & delete
│ │ ├── QuickAdd.tsx # Quick task creation bar with attachments
│ │ ├── Sidebar.tsx # Collapsible navigation sidebar
│ │ ├── TaskList.tsx # Reusable task list renderer
│ │ ├── ViewToggle.tsx # List ↔ Kanban view switch
│ │ └── index.ts # Barrel exports
│ ├── hooks/
│ │ ├── useDateTime.ts # Greeting message & formatted date
│ │ ├── useTasks.ts # Core task CRUD, snapshots & persistence
│ │ └── index.ts # Barrel exports
│ ├── pages/
│ │ ├── AuthPage.tsx # Login / Sign-up with animations
│ │ ├── Dashboard.tsx # Main dashboard with stats & tasks
│ │ ├── Insights.tsx # Analytics charts & key metrics
│ │ └── index.ts # Barrel exports
│ ├── types/
│ │ └── index.ts # Shared TypeScript interfaces (Task, NavItem, etc.)
│ ├── App.tsx # Root app with auth gate & routing
│ ├── App.css # Global app styles & animations
│ ├── index.css # Tailwind directives & design tokens
│ └── main.tsx # React DOM entry point
├── .env.example # Environment variable template
├── index.html # HTML shell with PWA meta tags
├── vite.config.ts # Vite + React + Tailwind plugin config
├── tsconfig.json # TypeScript project references
├── tsconfig.app.json # App-specific TS config
├── tsconfig.node.json # Node/Vite TS config
├── eslint.config.js # ESLint flat config
└── package.json # Dependencies & scripts
FlowDesk uses Supabase for optional backend features. Copy the template and fill in your credentials:
cp .env.example .env| Variable | Required | Description |
|---|---|---|
VITE_SUPABASE_URL |
Optional | Your Supabase project URL |
VITE_SUPABASE_ANON_KEY |
Optional | Supabase anonymous/public API key |
VITE_APP_NAME |
No | App display name (defaults to "FlowDesk") |
VITE_API_VERSION |
No | API version identifier |
SUPABASE_SERVICE_ROLE_KEY |
No |
Note: The app works fully without Supabase — tasks are persisted locally in the browser's
localStorage.
Contributions are welcome! Here's how to get started:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m "Add amazing feature" - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
Please make sure your code:
- Passes
npm run lintwith no errors - Builds successfully with
npm run build - Follows the existing code style and component patterns
This project is open source and available under the MIT License.
Built by Ayush Kumar Singh