To-Do List Application with JSONPlaceholder API

🚀 Project Overview

This is a simple To-Do List Application built using ReactJS and TypeScript. The app fetches data from the JSONPlaceholder API to display to-do items. Users can add new tasks locally, mark items as completed, delete them, and filter the displayed items.

🛠️ Features

• ✅ Fetch To-Do Items from the JSONPlaceholder API.
• ➕ Add New To-Do Items locally to the frontend's state.
• ✔️ Mark Items as Completed or Pending with user interaction.
• 🗑️ Delete Items from the local list.
• 🔍 Filter Tasks to show all, completed, or pending tasks.
• 💾 Persist Changes Using Local Storage to ensure state remains even after a page reload.

💻 Tech Stack

• ReactJS with TypeScript
• Axios (for network requests)
• JSONPlaceholder API for fetching mock data
• Basic CSS Styling or CSS frameworks like Bootstrap (optional)

🛠️ Installation Instructions

Clone the repository and run the following commands:

# Clone the repository
git clone [https://github.com/yourusername/todo-list-app.git](https://github.com/AmlrSF/JSONPlaceholder-API)

# Navigate to project directory
cd todo-list-app

# Install dependencies
npm install

# Start the development server
npm start

📜 Usage Instructions

• The app will fetch the first 20 To-Do Items from the JSONPlaceholder API.
• Use the input box to add a new to-do item (title required).
• Click on the checkbox to mark an item as completed or return it to pending.
• Click the Delete button next to any to-do item to remove it locally.
• Use the filter options to view:
  • ✅ All tasks.
  • ✔️ Only completed tasks.
  • ❌ Only pending tasks.

---

🏆 Key Requirements Met

• ✅ Used ReactJS and TypeScript for frontend development.
• 🔗 Integrated JSONPlaceholder's /todos endpoint for fetching initial data.
• ➕ Added the ability to create, delete, and toggle completion for tasks locally.
• 💾 Implemented local storage persistence to save changes between reloads.
• 🔍 Provided filter functionality for better user experience.

---

🤝 Contribution

Contributions are welcome! Please open an issue first to discuss any changes you plan to make.

---

📧 Contact

For any questions or feedback, reach out at:
[Your Email: amirsouaf1212@gmail.com]

---

📄 License

This project is licensed under the MIT License.