A task management application built with React, TypeScript, Redux Toolkit, MUI Joy UI and Vite.
Styling is based on MUI Joy UI's defaults, with any custom styles applied via the sx prop directly on components (CSS-in-JS).
This project was created to gain hands-on experience with Redux state management, starting from vanilla Redux and later migrating to Redux Toolkit.
Live demo: https://task-table-rtk.netlify.app/
A dynamic table where each row represents a task with the following fields:
| Field | Component | Options |
|---|---|---|
| Title | Input | Free text — task description |
| Status | Select | To Do · In Progress · Ready for Review · In Review · Completed |
| Priority | Select | None · Low · Medium · High · Urgent |
| Assignee | Autocomplete | Chosen from the Members list |
Table columns are resizable by dragging the separators in the header.
A list of all team members, which are used as Assignee options in the Tasks table.
Deleting a member automatically unassigns them from every task they were previously assigned to.
This project was intentionally built in two stages to compare vanilla Redux with Redux Toolkit:
| Branch | Description |
|---|---|
redux-legacy | Original implementation using vanilla Redux (manual action types, action creators, reducers) |
main | Migrated implementation using Redux Toolkit (slices) |
The redux-legacy branch is preserved as a reference to compare both approaches side by side.
- Node.js
- npm
# Clone the repository
git clone https://github.com/astik-dev/task-table.git
cd task-table
# Install dependencies
npm install
# Start the development server
npm run devOpen http://localhost:5173 in your browser.
npm run build