FlowDesk is a polished, responsive task-management dashboard built with Next.js and TypeScript. Its interface takes visual inspiration from modern developer tools, combining muted surfaces, subtle borders, and a focused green accent.
- Create, edit, complete, restore, and delete tasks
- Add descriptions, priorities, due dates, projects, and tags
- Search task titles, descriptions, projects, and tags
- Interpret natural-language searches such as
show urgent tasks due next week - Convert interpreted search intent into removable filter chips
- Recent searches and
/orCtrl/Cmd + Kkeyboard shortcuts - Filter tasks by status, priority, and project
- Sort by creation date, due date, priority, or title
- Dedicated Today, Upcoming, and Completed views
- Project creation and management
- Dashboard statistics and completion progress
- Dark and light themes
- Responsive desktop, tablet, and mobile layouts
- Collapsible desktop sidebar and mobile navigation drawer
- Confirmation dialogs, empty states, and toast notifications
- Authenticated, cross-device task and project persistence through Supabase
- Keyboard focus states and reduced-motion support
- Next.js App Router
- React
- TypeScript
- Lucide React icons
- Supabase authentication and PostgreSQL persistence
- Custom responsive CSS
- npm
- Node.js 18.18 or newer
- npm
- A Supabase project with the repository migrations applied
npm installnpm run devOpen http://localhost:3000 in your browser.
npm run build
npm startIn Supabase Dashboard → Authentication → URL Configuration, set:
- Site URL: your production Vercel URL, for example
https://flowdesk.example.com - Redirect URLs:
https://flowdesk.example.com/auth/callback - For Vercel preview deployments, optionally add
https://*-<team-or-account-slug>.vercel.app/** - Keep
http://localhost:3000/auth/callbackas an additional redirect only for local development
The application builds the OAuth callback from the domain currently open in the browser. The callback also honors Vercel's forwarded host and protocol headers, so production login returns to the same deployed domain.
npm run lintsrc/
├── app/
│ ├── globals.css # Theme tokens, layout, components, and responsive styles
│ ├── layout.tsx # Root layout and metadata
│ └── page.tsx # Application entry point
├── components/
│ └── TodoApp.tsx # Dashboard views and task-management interactions
└── lib/
├── data.ts # Initial sample projects and tasks
└── types.ts # Shared task, project, priority, and view types
Authenticated projects and tasks are stored in Supabase and protected by row-level security. Workspace data persists across refreshes and devices for the signed-in account.
Device-specific preferences such as the selected theme and recent searches remain in browser localStorage.
Natural-language search works locally without configuration. To enhance intent parsing with OpenAI, add a server-side environment variable:
OPENAI_API_KEY=your_api_keyAn optional model override is also supported:
OPENAI_SEARCH_MODEL=gpt-5.6-solAPI keys are read only by the server route and are never included in client-side code. If the service is unavailable, times out, or returns malformed data, FlowDesk automatically uses its local intent parser.
FlowDesk supports:
- Mobile layouts from approximately 320px
- Tablet layouts
- Standard desktop layouts
- Wide displays at 1440px and above
Task rows automatically become mobile-friendly cards, while the desktop sidebar changes into a slide-out navigation drawer.
The application includes semantic controls, visible focus indicators, accessible labels, keyboard-friendly dialogs, comfortable mobile touch targets, and reduced-motion support.
| Command | Description |
|---|---|
npm run dev |
Start the local development server |
npm run build |
Create an optimized production build |
npm start |
Serve the production build |
npm run lint |
Run ESLint checks |
This project is intended for personal and portfolio use.