CodStak Weekly Challenge #4: Dynamic Todo List App

Codstak is a coding challenge platform to practice web development

Hey coders👨🏽‍💻👩🏽‍💻,

This week you are required to create a fully functional To-Do List app using React and TypeScript, focusing on task management features.

This is not easy as previous challenges were, I thought I will catch you with a surprise 😉.

You can see the 👉 challenge here 👈

But this will teach you a lot of things. The list as follows:

• React Fundamentals:

  • State Management:
    Use useState to manage dynamic data (tasks) and their changes.

  • Rendering Lists:
    Learn how to efficiently render a list of items using map().

• TypeScript Basics:

  • Interface Design:
    Define types for data structures like Task to ensure type safety.

  • Props Typing:
    Pass typed data and functions as props between components.

• Data Fetching:

  • Side Effects with useEffect:
    Introduces handling data fetching and lifecycle methods in React.

  • Error Handling:
    Learn how to manage API errors and loading states.

So, if you are in the mood of learning, grab your cup of tea/coffee/hotchocolate and deep dive:

---

Requirements

1. Add a Task

   • Allow users to add a new task via an input field and "Add Task" button.

   • Ensure the task is added to the list with a default status of "not completed."

2. Display Tasks

   • Divide tasks into two categories:

     • Active Tasks: Tasks not yet completed.

     • Completed Tasks: Tasks marked as done.

3. Toggle Task Status

   • Clicking on a task should toggle its completion status between "active" and "completed."

4. Delete a Task

   • Include a "Delete" button for each task to allow its removal.

5. Fetch Initial Data

   • Fetch tasks from this API on app load:

https://jsonplaceholder.typicode.com/todos?_limit=10

Bonus Challenges

• Show a loading message while tasks are being fetched.

• Display an error message if the API fails to respond.

• Add task filtering to search for specific tasks by name.

• Save tasks in localStorage to persist them across page reloads.

---

Rules for Submission

• Use React with TypeScript to complete the challenge.

• Write clean, modular, and reusable code.

• Ensure proper type definitions for task data.

And that’s it. Please let me know if you have any more questions or feedback.

You can also check this week’s podcast on learning JavaScript here:

That’s it for today folks. See you next week!

---