https://github.com/ilz5753/todo-web-app-tailwind

Todo Web App bootstrapped with React and styled with Tailwind CSS.
https://github.com/ilz5753/todo-web-app-tailwind

lodash randomcolor react react-aria react-color-palette reactjs tailwind tailwind-css tailwindcss task-manager todo todoapp typescript usehooks-ts

Last synced: 4 days ago
JSON representation

Todo Web App bootstrapped with React and styled with Tailwind CSS.

• Host: GitHub
• URL: https://github.com/ilz5753/todo-web-app-tailwind
• Owner: ilz5753
• Created: 2023-10-21T12:12:28.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2025-01-24T04:53:02.000Z (7 days ago)
• Last Synced: 2025-01-24T05:28:13.682Z (7 days ago)
• Topics: lodash, randomcolor, react, react-aria, react-color-palette, reactjs, tailwind, tailwind-css, tailwindcss, task-manager, todo, todoapp, typescript, usehooks-ts
• Language: TypeScript
• Homepage: https://todo-task-management-e4rr3xq8h-ilz5753.vercel.app/
• Size: 1.32 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Todo Web App

## Project Description:

- **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](https://todo-task-management-e4rr3xq8h-ilz5753.vercel.app/). ([Watch The Video Tutorial](https://www.dropbox.com/scl/fi/w2e0d8cbfns16v8hqterf/14020729_161118.mp4?rlkey=muyh2ft0s0ordksa1sxmdzu7r&dl=0))

- **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](https://www.figma.com/file/mKFSAeSQxTaEhcQwtKCz42/Task-app-web-with-categories-(Community)?type=design&mode=design&t=NxzDwstSvZb8FTBy-1).

## Key Features:

1. **Task Management**: The app's primary function is to assist users in efficiently managing their tasks and to-do lists.

2. **User-Friendly Design**: The user interface is designed with a focus on user-friendliness, making task management a breeze.

3. **Responsive Layout**: The application is responsive, ensuring a seamless experience on various devices, including desktops, tablets, and mobile phones.

4. **Categories**: Users can categorize their tasks, making it easier to organize and prioritize their to-do items.

5. **Interactive Task Creation**: Create new tasks, set descriptions, and categorize them in no time.

6. **Task Editing**: will be added in next releases.

7. **Color Customization**: The app allows for color customization, including generating random colors for tasks or selecting preferred colors.

## Technologies and Tools:

- **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.

## Screenshots:

Here are some screenshots to give you a visual preview of the Todo Web App:

- **Home**



- **Add Task**



- **Added Task**