A modern task management application built with React and Supabase. This application allows users to efficiently manage their tasks with features like real-time updates, filtering, and categorization.

🌐 Live Demo: Innovation Task Manager

• ✨ Create, edit, and delete tasks
• 🔍 Search functionality across tasks
• 🏷️ Category-based organization
• 📊 Status tracking (Todo, In Progress, Completed)
• ⏰ Deadline management
• 🔄 Real-time updates with Supabase
• 📱 Responsive design

• React 18
• Vite
• React Router v7
• Supabase
• React Icons

• Node.js (version 18 or higher)
• npm
• Supabase account

1. Clone the repository

git clone https://github.com/mstfsrts/task-management.git
cd task-management

2. Install dependencies

npm install

3. Set up environment variables Create a .env file in the root directory:

VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

4. Start the development server

npm run dev

The application uses a tasks table with the following structure:

tasks {
  id: uuid primary key
  title: string
  description: string
  status: enum('TODO', 'IN_PROGRESS', 'COMPLETED')
  category: string
  created_at: timestamp
  deadline: timestamp
  has_deadline: boolean
}

GET: supabase.from("tasks").select("*")
Response: Task[]

POST: supabase.from("tasks").insert([taskData])
Body: {
  title: string
  description?: string
  status: 'TODO' | 'IN_PROGRESS' | 'COMPLETED'
  category: string
  deadline?: string
  has_deadline: boolean
}

PUT: supabase.from("tasks").update(taskData).eq("id", id)
Body: {
  title?: string
  description?: string
  status?: 'TODO' | 'IN_PROGRESS' | 'COMPLETED'
  category?: string
  deadline?: string
  has_deadline?: boolean
}

DELETE: supabase.from("tasks").delete().eq("id", id)

src/
├── components/          # Reusable components
│   ├── ErrorMessage/    # Error handling component
│   ├── Header/         # Application header
│   ├── Loading/        # Loading spinner
│   ├── Modal/          # Modal dialog
│   └── TaskCard/       # Task display component
├── pages/              # Page components
│   ├── TaskList/       # Main task list page
│   └── TaskForm/       # Create/Edit task form
├── context/            # React Context
│   └── TaskContext.jsx # Task state management
├── hooks/              # Custom React hooks
│   └── useTaskList.js  # Task list operations
├── services/           # API services
│   ├── supabase.js     # Supabase client
│   └── taskService.js  # Task API methods
└── assets/             # Static assets

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit changes (git commit -m 'Add AmazingFeature')
4. Push to branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Mustafa Sarıtaş - LinkedIn

Project Link: https://github.com/mstfsrts/task-management

Live Demo: https://taskmanager.mustafasaritas.me/

MIT License