React Todo App (Talking to the Server)

You are going to create a Todo list that talks to the server. We've built and hosted an API that you can access to save todo items in our database. Immediately below are the requirements, and further below is all the information you should need in order to interact with the API.

Requirements:

get

• A user will be able to see all their todos.
• If there is an imgUrl, the image should be displayed
  Extra Credit:
• Every other todo will be a different color.
• The list can be displayed as cards, using CSS grids.
• The user can expand a Todo to show a hidden description.
• Todos are arranged with the completed todos at the bottom.
• User can search and filter todos

post

• You will have a form that allows the user to add new todos.
• A user should be able to give the item a price.
• A user should be able to give the item a description.
• A user should be able to attach an imgUrl to the item.
  Extra Credit:
• The new post will be the first one in the list.
• The new post will be a different color than the rest.
• The user will not be able to submit a new todo if the fields to not have the required format of input.
• The user will have helpful error messages if they entered the wrong things into the input fields.

delete

• A user should be able to delete a Todo item.
  Extra Credit:
• A user can undo the very last delete.
• A user can use checkboxes to delete multiple todo items.

put

• Each todo will have a checkbox where it can be marked complete or incomplete.
  • If a todo item is complete, it should have a strikethrough line on it.
• A user should be able to edit/update the todo item. There should be an "edit" button that then reveals input boxes and a "save" button that the user can use to edit that todo.
  Extra Credit:
• The user has a "Cancel" button where they can cancel any changes they've made, and the input remains unchanged
• The users input fields are populated with the information from that todo, but can be changed.

API Documentation

Check our documentation on the V School Todo API to learn how to use it.

Styling ideas:

If you want some pretty looking ToDo list website examples take a look HERE