React Mock Code Challenge: gregslist

Demo

Use this gif as an example of how the app should work.

Instructions

Welcome to gregslist, a community site for finding free items near you.

The designers have put together the base components and CSS. Now it's up to you to bring the features to life by adding stateful logic as well as persisting data to the backend via our API. You may need to add new components for the final deliverable.

Your job will be to make our app work according to the user stories you will find in the Core Deliverables section.

Setup

1. Run npm install in your terminal.
2. Run npm run server. This will run your backend on port 6001.
3. In a new terminal, run npm start.

Make sure to open http://localhost:6001/listings in the browser to verify that your backend is working before you proceed!

Core Deliverables

As a user:

1. When the app starts, I can see all listings.
2. I can create a new listing by submitting the form, and persist the changes to the backend.
3. I can "favorite" and "unfavorite" a listing on the frontend by clicking the star icon, and persist the change to the backend.
4. I can remove a listing from the page by clicking the trash can icon. This change should be persisted in the backend.
5. I can search for listings by their name.

Endpoints for Deliverables

The base URL for your backend is: http://localhost:6001.

GET /listings

Example Response:

[
  {
    "id": 1,
    "description": "heater",
    "image": "./images/heater.jpg",
    "location": "BROOKLYN",
    "favorite": false
  },
  {
    "id": 2,
    "description": "2019 Toyota Tacoma grill",
    "image": "./images/toyota-grill.jpg",
    "location": "Williamsburg",
    "favorite": false
  }
]

POST /listings

Required Headers:

{
  "Content-Type": "application/json"
}

Request Object:

{
  "description": "heater",
  "image": "./images/heater.jpg",
  "location": "BROOKLYN",
  "favorite": false
}

Example response:

{
  "id": 1,
  "description": "heater",
  "image": "./images/heater.jpg",
  "location": "BROOKLYN",
  "favorite": false
}

PATCH /listings/:id

Required Headers:

{
  "Content-Type": "application/json"
}

Request Object:

{
  "favorite": true
}

Example response:

{
  "id": 1,
  "description": "heater",
  "image": "./images/heater.jpg",
  "location": "BROOKLYN",
  "favorite": true
}

DELETE /listings/:id

Example Response:

{}