A modern, feature-rich task management application built with React, TypeScript, and Material-UI. Manage your tasks efficiently with an intuitive dark-themed interface, real-time updates, and seamless UTC time handling.
Features • Installation • Dependencies • Usage • Architecture
- CRUD Operations - Create, read, update, and delete tasks with ease
- Status Management - Track task progress with three states (Todo, In Progress, Done)
- Smart Deadlines - Set deadlines with date and time, with automatic overdue detection
- Detailed Views - Click any task to see comprehensive information
- Real-time Updates - Instant UI updates using Redux Toolkit
- Dark Theme - Beautiful dark mode with custom Material-UI theme
- Responsive Design - Seamless experience across desktop, tablet, and mobile
- Intuitive Navigation - Tab-based organization (All Tasks, Active, Completed)
- Interactive Cards - Hover effects, status indicators, and quick actions
- Floating Action Button - Quick task creation always at your fingertips
- Form Validation - Client-side validation with helpful error messages
- UTC Time Handling - Automatic conversion between local time and UTC
- Error Management - User-friendly error notifications with auto-dismiss
- Loading States - Visual feedback during async operations
- Empty States - Helpful prompts when no tasks exist
- Type Safety - Full TypeScript implementation for reliability
- Create Task Dialog - Rich form with validation and date/time picker
- Edit Task Dialog - Modify task details with pre-filled data
- Delete Confirmation - Prevent accidental deletions
- Status Change Dialog - Quick status updates with icon indicators
- Task Detail View - Comprehensive task information display
- Node.js (v18 or higher)
- npm or yarn
- Backend API running (default:
http://localhost:5000/api)
-
Clone the repository:
git clone https://github.com/Skiper29/ToDoApp-Client.git cd todoapp-client -
Install dependencies:
npm install
-
Configure environment: Create a
.envfile in the root directory:VITE_API_BASE_URL=https://localhost:7156/api
-
Start development server:
npm run dev
Open http://localhost:5173 (or the address shown in your terminal) to view it in the browser.
- React 19.1.1 - UI library
- TypeScript 5.9.3 - Type safety
- Vite 7.1.7 - Build tool and dev server
- Redux Toolkit 2.9.0 - Predictable state container
- React Redux 9.2.0 - React bindings for Redux
- Material-UI (MUI) 7.3.4 - Component library
- MUI Icons - Icon set
- MUI X Date Pickers - Date/time selection
- Emotion - CSS-in-JS styling
- Axios 1.12.2 - HTTP client
- date-fns - Date manipulation and formatting
The project follows a feature-based structure to keep the code organized and scalable.
/src
├── api/ \# API layer (Axios instance and API calls)
├── app/ \# Redux store configuration
├── assets/ \# Static assets like images and SVGs
├── components/ \# Reusable UI components
│ ├── common/ \# Common components (e.g., ErrorSnackbar, PageHeader)
│ └── todos/ \# Components related to the 'todos' feature
├── constants/ \# Application-wide constants
├── features/ \# Redux slices for different features
│ └── todos/
├── hooks/ \# Custom React hooks
├── models/ \# TypeScript interfaces and enums
├── pages/ \# Top-level page components
├── theme/ \# MUI theme configuration
├── App.tsx \# Main application component
└── main.tsx \# Entry point of the application
- Common Components - Reusable across applications
- Specific Components - Todo-specific functionality
- Pages - Top-level route components
User Action → Component → Redux Thunk → API Call → Update State → Re-render
User Input (Local) → Convert to UTC → Send to Backend
Backend Response (UTC) → Convert to Local → Display to User
- Click the floating action button (blue "+" at bottom-right)
- Fill in the task details:
- Title (required) - Up to 200 characters
- Description (optional) - Up to 2000 characters
- Deadline (optional) - Select date and time
- Click Create
- Click anywhere on a task card
- View complete information including:
- Full description
- Status with icon
- Deadline (with overdue warning if applicable)
- Created date
- Completion date (if done)
- Option 1: Click the edit icon on the task card
- Option 2: Open task details and click Edit button
- Modify any field except status
- Status must be changed separately via status dialog
- Changes save immediately
- Option 1: Click the status chip on the task card
- Option 2: Click the status chip in the detail view
Available statuses:
- 🔘 To Do - Task not started
- ⏰ In Progress - Currently working on it
- ✅ Done - Task completed
-
Option 1: Click the delete icon on the task card
-
Option 2: Open task details and click Delete button
-
Confirm deletion in the warning dialog
-
Action cannot be undone
Use the three tabs to filter your view:
- All Tasks - See everything
- Active - Only Todo and In Progress
- Completed - Only Done tasks
The application uses Material-UI's theming capabilities. The dark theme is configured in src/theme/theme.ts. You can
easily customize the colors, typography, and other design tokens in this file.
The application's state is managed using Redux Toolkit. The todos slice, located in
src/features/todos/todosSlice.ts, handles all state related to tasks, including asynchronous actions for fetching,
creating, updating, and deleting tasks.
- 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
Vitalii Demkiv
- GitHub: @Skiper29
⭐ Star this repo if you find it helpful! ⭐
Made with ❤️ and TypeScript