TaskBox is a simple task manager application built using React, Chakra UI, and other modern technologies. It allows you to manage your tasks efficiently by providing a clean and intuitive user interface.
The challenge was to use only the React Context API and useReducer to manage the application states that started as a simple time manager and evolved into a more complete task manager.
- React
- Context API
- useReducer
- LocalStorage
- Chakra UI
- Emotion (for styling)
- react-beautiful-dnd (for task reordering)
- date-fns (for date manipulation)
- framer-motion (for animations)
- react-hook-form (for form handling)
- react-router-dom (for routing)
- use-sound (for sound effects)
- uuid (for generating unique IDs)
- zod (for data validation)
Before running the project, make sure you have Node.js and npm installed on your system.
- Clone the repository:
git clone https://github.com/sammarxz/taskbox.git - Change into the project directory:
cd taskbox - Install the dependencies:
npm installoryarn - Start the development server:
npm run devoryarn dev
The application will be available at http://localhost:3000.
npm run dev: Starts the development server.npm run build: Builds the production version of the app.npm run lint: Lints the source code using ESLint.npm run prettier: Formats the source code using Prettier.npm run preview: Previews the production build locally.npm run test: Runs tests usingvitest.
- Improve the kanban board to allow editing tasks and adding sections.
- Remove
emojisfrom the project - Improve usability adding some design interactions
- Put
edit taskas task menu option - UI improvements
- Back-end
If you find any issues or have suggestions for improvement, feel free to open an issue or create a pull request. Your contributions are greatly appreciated!
This project is licensed under the MIT License. Feel free to use, modify, and distribute the code as per the terms of the license.