-
About: This Todo Web App is a dynamic and user-friendly task management application. It's built with React, a powerful JavaScript library, and styled using the versatile Tailwind CSS framework.
-
Live Demo: You can experience the app's features in action by visiting the live demo. (Watch The Video Tutorial)
-
Figma UI: The user interface and design elements of the app were thoughtfully crafted using Figma. To explore the design in more detail, check out the Figma UI.
-
Task Management: The app's primary function is to assist users in efficiently managing their tasks and to-do lists.
-
User-Friendly Design: The user interface is designed with a focus on user-friendliness, making task management a breeze.
-
Responsive Layout: The application is responsive, ensuring a seamless experience on various devices, including desktops, tablets, and mobile phones.
-
Categories: Users can categorize their tasks, making it easier to organize and prioritize their to-do items.
-
Interactive Task Creation: Create new tasks, set descriptions, and categorize them in no time.
-
Task Editing: will be added in next releases.
-
Color Customization: The app allows for color customization, including generating random colors for tasks or selecting preferred colors.
-
React: The core of the project is built with React, offering a dynamic and responsive user interface.
-
TypeScript: TypeScript is used to introduce static typing and enhance the development process.
-
ReactJS: The project leverages ReactJS to create a highly interactive web application.
-
lodash: Utilized for utility functions and data manipulation, enhancing data management.
-
RandomColor: RandomColor may be used to add a creative touch by generating random colors for various elements.
-
Tailwind CSS: The app's styling is achieved using Tailwind CSS, providing a modern and customizable design.
-
React Aria: Accessibility is implemented through React Aria to ensure an inclusive user experience.
-
useHooks-ts: This library offers custom hooks tailored for TypeScript, streamlining development.
-
React Color Palette: The app features components for color management and selection, offering a visually pleasing experience.
Here are some screenshots to give you a visual preview of the Todo Web App:
- Home
![Screenshot 1402-07-29 at 16 08 05](https://private-user-images.githubusercontent.com/87062381/277108702-0c455f59-69c6-45e7-81db-7dbb6786ca88.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTY1NDc4NTIsIm5iZiI6MTcxNjU0NzU1MiwicGF0aCI6Ii84NzA2MjM4MS8yNzcxMDg3MDItMGM0NTVmNTktNjljNi00NWU3LTgxZGItN2RiYjY3ODZjYTg4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA1MjQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNTI0VDEwNDU1MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWRjNTI1MmFjYTFjODA4NDg2ODNkOTI0MDhlNDEwNWE0Y2NlZDAyMjM2MzY0MjM1YjUyMjkyNjY3ZmM3Njg5NGUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.unumnes4lUsGTkHYu_40ZLyrQlSo52nny81-Jwr_SQk)
- Add Task
![Screenshot 1402-07-29 at 16 10 09](https://private-user-images.githubusercontent.com/87062381/277108744-f63a0e7c-b34b-4507-b88f-0333b5307376.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTY1NDc4NTIsIm5iZiI6MTcxNjU0NzU1MiwicGF0aCI6Ii84NzA2MjM4MS8yNzcxMDg3NDQtZjYzYTBlN2MtYjM0Yi00NTA3LWI4OGYtMDMzM2I1MzA3Mzc2LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA1MjQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNTI0VDEwNDU1MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQ1ZGRhYTJkMDZjZjYxM2YwMDI1NDBmN2JjOTdmMDExYzVmMjdmZjNlNDViNmMxMjczNTgzOTY2M2Y2MTM5OTQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.wOXjvfm9DGCyOmcJ962d1Y-Ejo7cOQY4631w63Lg7Dc)
- Added Task
![Screenshot 1402-07-29 at 16 10 21](https://private-user-images.githubusercontent.com/87062381/277108786-8547395c-f33f-4f51-a47a-8588ddeea5d9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTY1NDc4NTIsIm5iZiI6MTcxNjU0NzU1MiwicGF0aCI6Ii84NzA2MjM4MS8yNzcxMDg3ODYtODU0NzM5NWMtZjMzZi00ZjUxLWE0N2EtODU4OGRkZWVhNWQ5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA1MjQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNTI0VDEwNDU1MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWMyMmE1NGI5MjQyNDdhMTY5M2FjOGJmZmMwODUzNzBmYmY1NzM5NDczNzVmMTg3OWY2MTI0MjQ4NzY5NjU0MmUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.rCY9rjsboazvv5FQGKtnK9808G_YdLm0uTmXtjcLCwI)