Skip to content

ilz5753/todo-web-app-tailwind

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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
Screenshot 1402-07-29 at 16 08 05
  • Add Task
Screenshot 1402-07-29 at 16 10 09
  • Added Task
Screenshot 1402-07-29 at 16 10 21