The Todo List Application is a simple web application built using React.js and Axios for managing and displaying todo items. It allows users to create, read, update, and delete todo items, as well as filter and sort them based on different criteria.
-
View Todo List Display a list of todo items fetched from an API. Each todo item includes information such as title, description, priority, category, creation date, and completion status.
-
Add Todo Item Users can add new todo items by providing a title, description, priority level, and category. Upon submission, the new todo item is added to the list and persisted to the backend server.
-
Edit Todo Item Users can edit existing todo items by clicking on the edit icon next to each item. They are redirected to a separate page where they can modify the title, description, priority, and category of the todo item. Upon submission, the changes are saved and reflected in the todo list.
-
Delete Todo Item Users can delete todo items by clicking on the delete icon next to each item. A confirmation modal is displayed to ensure the user wants to proceed with the deletion. Upon confirmation, the todo item is removed from the list and deleted from the backend server.
-
Sort Todo List Users can sort the todo list based on priority or creation date. Clicking on the "Sort by Priority" or "Sort by Creation Date" buttons reorders the todo items accordingly.
-
Filter Todo List Users can filter the todo list based on priority levels. They can select a priority level from a dropdown menu to view only todo items with that priority. Usage Clone the repository to your local machine. Navigate to the project directory. Install dependencies using npm install. Start the development server using npm start. Access the application in your web browser at http://localhost:3000.
React.js: A JavaScript library for building user interfaces. Axios: A promise-based HTTP client for making API requests. React Router: A library for routing in React applications. Tailwind CSS: A utility-first CSS framework for styling web applications.
Express js: A node js framewrok for building restful APIs. MondoDB:- A nosql database Mongoose:- It is an object modeling tool for Node.js and MongoDB. It provides a straight-forward, schema-based solution to model your application data.
Credits This project was created by (https://iamaamir.netlify.app/) as a learning exercise.