/TasksListsApp

Tasks Lists App -- Make your own lists of tasks with a backend json and see how it works.

Primary LanguageTypeScript

React Todo-List App

This is a front-end project for a Todo-List application built with React, Chakra UI, TanStack Query, TanStack Router, and Recoil. The app allows you to manage multiple lists of todos, where you can create list containers for organizing your tasks, edit list names, delete entire lists along with their associated todos, create new todos, delete them, and update their details.

Features

  • Create multiple lists to organize your tasks.
  • Edit the name of a list to give it a meaningful title.
  • Delete a complete list along with all the todos it contains.
  • Create new todos and associate them with specific lists.
  • Delete individual todos when they are no longer needed.
  • Update the details of a todo, such as the title or completion status.

Technologies Used

  • React: JavaScript library for building user interfaces.
  • Chakra UI: Component library for building accessible and customizable UI components.
  • TanStack Query: Data fetching and caching library for managing API data.
  • TanStack Router: Declarative routing library for handling navigation in the app.
  • Recoil: State management library for managing global application state.

Setup and Usage

  1. Clone this repository.
  2. Install dependencies using pnpm install.
  3. Start the development server using pnpm run dev.
  4. Access the app in your browser at http://localhost:5173.

App Structure

  • src/components: Contains reusable components used in the app.
  • src/router: Contains the different routes of the app.
  • src/hooks: Custom hooks for managing application state and data fetching.
  • src/api: API module for interacting with the server.
  • src/utils: Utility functions used throughout the app.
  • src/state: Contains all the app states.
  • src/types: Contains all interface declarations.

Contributing

Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request.

License

This project is licensed under the MIT License. Please feel free to use, modify, and distribute the code according to the license terms.

Contact

If you have any questions or questions, please contact [jesus.jimenezc.mx@gmail.com].

Happy organizing your tasks with the Todo-List app!