Day 4 · IoTBTech React Deep Dive
A real Kanban-style task board application built with Next.js, TypeScript, Supabase, TanStack Query, React Hook Form, and Zod.
The application allows users to create projects, manage tasks, update task statuses, and organize work using a simple drag-and-drop board.
| Page | Screenshot |
|---|---|
| Login Page |  |
| Dashboard |  |
| Task Board - Initial State |  |
| Task Board - With New Tasks |  |
| Task Creation Form |  |
- User authentication
- Create and manage projects
- Create, update, and delete tasks
- Drag-and-drop task management
- Task priorities and statuses
- Form validation with Zod
- Server state management with TanStack Query
- Responsive interface
- Next.js
- React
- TypeScript
- Supabase
- TanStack Query
- React Hook Form
- Zod
taskflow/
| src/
| ├── app/
| │ ├── error.tsx
| │ ├── global.css
| │ ├── layout.tsx
| │ ├── not-found.tsx
| │ ├── page.tsx
| │ ├── providers.tsx
| │ ├── login/
| │ | ├── LoginForm.tsx
| │ | └── page.tsx
| │ └── (app)/
| │ └── projects/
| │ ├── page.tsx
| │ └── [id]/
| ├── components/
| │ ├── layout/
| │ ├── tasks/
| │ └── ui/
| ├── hooks/
| │ ├── useCreateTask.ts
| │ ├── useDeleteTask.ts
| │ ├── useTask.ts
| │ └── useUpdateTaskStatus.ts
| ├── lib/
| │ ├── api/
| | │ ├── projects.ts
| | │ └── tasks.ts
| │ ├── supabase/
| | │ ├── client.ts
| | │ ├── middleware.ts
| | │ └── server.ts
| │ ├── validation/task.ts
| │ ├── env.ts
| │ └── query-keys.ts
| ├── types/database.ts
| └── middleware.ts
├─── supabase/schema.sql
├─── package.json
├─── README.md
└─── tsconfig.json
Clone the repository:
git clone https://github.com/iibrahimx/taskflow.gitNavigate into the project:
cd taskflowInstall dependencies:
npm installCreate a .env.local file and add your Supabase credentials:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_keyRun the development server:
npm run devOpen your browser and visit:
http://localhost:3000