Today you'll be building an app for viewing, liking, and commenting on a single picture. You will be using a local API and building out the frontend for our app, Flatagram.
Use this gif as an example of how the app should work.
- Fork and clone this repository
- Run
json-server --watch db.json --routes routes.json
to get the backend started - Open the
index.html
file on your browser
Your base URL for your API will be: http://localhost:3000
The endpoints you will need are:
- GET
/images/1
- PATCH
/images/1
- POST
/comments
- DELETE
/comments/:id
As a user, I can:
- See the image received from the server, including its title, likes and comments when the page loads
- Click on the heart icon to increase image likes, and still see them when I reload the page
- Add a comment (no persistance needed)
These deliverables are not required to pass the code challenge, but if you have the extra time, or even after the code challenge, they are a great way to stretch your skills.
Note: If you are going to attempt these advanced deliverables, please be sure to have a working commit with all the Core Deliverables first!
As a user, I can:
- Downvote an image
- Still see the comments written after reloading the page
For this one, you want to make a POST request to the
/comments
endpoint. Your comment object must have animageId
key with a value of1
for it to work. - Delete a comment
To persist this, you will have to make a DELETE request to the
/comments/:id
endpoint.
You can find the rubric for this assessment here.