Todo list app built using react for frontend web development.
- Demo: https://drive.google.com/file/d/1Lpbq0tLxkisP1Uj4vZsvDGDJlDhMG5d_/view?usp=sharing
- Hosted link: https://satyam-software-developer.github.io/todolist-react-app/
This is a simple Todo List application built using React. It allows users to add, edit, and delete tasks, mark tasks as completed, and filter tasks based on their completion status.
This is a simple TodoList application built using React, which allows users to:
- Fetch to-do items from an API.
- Add a new to-do item (dummy POST request).
- Update an existing to-do item (dummy PUT request).
- Delete a to-do item (dummy DELETE request). The app uses the JSONPlaceholder API for fetching, adding, updating, and deleting todos. Please note that all POST, PUT, and DELETE requests are dummies and do not actually persist on the server.
Add tasks: Users can enter new tasks in the input field and click the "Add" button to add them to the list.
- Edit tasks: Users can click the edit icon next to a task to edit its title.
- Delete tasks: Users can click the delete icon next to a task to delete it from the list.
- Mark tasks as completed: Users can check the checkbox next to a task to mark it as completed.
- Complete all tasks: Users can click the "Complete all tasks" link to mark all tasks as completed.
- Delete completed tasks: Users can click the "Delete Comp tasks" link to delete all completed tasks.
- Filter tasks: Users can use the dropdown menu to filter tasks based on their completion status.
- Task count: The total number of tasks and the number of completed tasks are displayed.
Node.js and npm installed Basic understanding of React and JavaScript
- Clone the repository: git clone https://github.com/satyam-software-developer/todolist-react-app.git cd todolist-react-app
- Install dependencies: npm install
- Run the project: npm start This will start the development server and open the app in your browser at http://localhost:3000.
todolist-react-app/ ├── public/ │ ├── index.html │ └── ... ├── src/ │ ├── components/ │ │ ├── TodoList.js // Component to render a list of todos │ │ ├── TodoItem.js // Component for each todo item │ │ └── AddTodo.js // Component to add a new todo │ ├── services/ │ │ └── api.js // Contains API call functions (GET, POST, PUT, DELETE) │ ├── App.js // Main application component │ ├── index.js // Application entry point │ └── ... ├── .gitignore ├── README.md └── package.json
- Fetch todos: GET /todos
- Add todo: POST /todos
- Update todo: PUT /todos/:id
- Delete todo: DELETE /todos/:id
All requests (POST, PUT, DELETE) are dummies. They won't actually modify the server, but you can view the modified data in the app's local state.
- On loading, the app will fetch and display todos from the API.
- You can add a new todo by filling in the input and clicking the “Add” button.
- To edit an item, click the "Edit" button next to a to-do item, modify the title, and confirm.
- To delete a todo, simply click the "Delete" button.
The following dependencies are used in this project:
- react: ^16.0.0
- react-dom: ^16.0.0
- react-toastify: ^8.0.0 You can find the complete list of dependencies with their versions in the package.json file.
The application uses the JSONPlaceholder API to fetch and update tasks. The API endpoint used is: https://jsonplaceholder.typicode.com/todos
If you'd like to contribute to this project, please follow these steps:
- Fork the repository.
- Create a new branch for your feature or bug fix.
- Make your changes and commit them.
- Push your changes to your fork.
- Submit a pull request.
- The Todo List app was created as a learning exercise based on a tutorial or example.
- React - The JavaScript library used for building the user interface.
- React Toastify - A library for displaying toast notifications in React applications.
This TodoList app demonstrates basic CRUD operations using a dummy API and provides a simple yet effective way to learn how to interact with RESTful APIs in React.
This project is licensed under the MIT License.
SATYAM KUMAR