alanvibez / react-mui-reduxtoolkit-todolist

This repository contains a TodoList application built with React, Material-UI, and Redux Toolkit. The application allows users to manage their tasks by adding, deleting, completing, and filtering them.

Features

• Add new tasks with titles and descriptions.
• Delete tasks.
• Mark tasks as completed or incomplete.
• Filter tasks based on their completion status.
• Search tasks by title.
• Sort tasks by title or ID.

Technologies Used

• React: A JavaScript library for building user interfaces.
• Material-UI: A popular UI component library for React.
• Redux Toolkit: A Redux library that simplifies the process of managing state in React applications.
• TypeScript: A typed superset of JavaScript that compiles to plain JavaScript.
• HTML: The standard markup language for creating web pages.
• CSS: A style sheet language used for describing the look and formatting of a document written in HTML.

Getting Started

To get started with the TodoList application, follow these steps:

1. Clone the repository:

   git clone https://github.com/Alanvibez/React-MUI-ReduxToolkit-TodoList.git
   

2. Navigate to the project directory:

   cd React-MUI-ReduxToolkit-TodoList
   

3. Install the dependencies:

   npm install
   

4. Start the development server:

   npm start
   

5. Open your browser and visit http://localhost:3000 to see the application.

Project Structure

The project structure is organized as follows:

• src: Contains the source code files.
  • components: Contains React components used in the application.
  • store: Contains Redux Toolkit slices and store configuration.
  • models: Contains TypeScript interfaces used in the application.
  • utils: Contains utility functions.
• App.tsx: The root component of the application.
• index.tsx: The entry point of the application.

Contributing

Contributions to the TodoList application are welcome! If you find any issues or have suggestions for improvements, feel free to open an issue or submit a pull request.

Acknowledgements

• React
• Material-UI
• Redux Toolkit
• TypeScript React Material-UI Redux Toolkit TypeScript