Express API Lab
For this lab, you will be creating a backend for a completed frontend application. You will be working on an app called "GAphy" which will display a bunch of Gifs.
The frontend application has full CRUD functionality, your job is to create the backend code to make it functional!
Objective: You must create an API that runs at
http://localhost:3000/gifs. You must have a few different routes:
/gifswhich will list out all gifs
/gifswhich will add a new gif and return a list of all gifs
gifs/:gifIdwhich will update a gif and return a list of all gifs
gifs/:gifIdwhich will delete a gif and return a list of all gifs
You should have your database set up to store a collection of gifs. Your model should have two attributes:
namefor the name of a gif
urlfor the url of the gif If these are named differently, you will have to change the frontend!
You should also set up a seed file to load some default gifs into your database. We recommend using the Giphy site to get gifs. Use the full URL that has the
.gif file extension (e.g. "https://media.giphy.com/media/3o6ozBUuLfzTCngAFi/giphy.gif").
- Fork the repository
- Clone the repository
- Create a directory called
backendwhich will hold your backend code
- At the end, submit a pull request with your completed code
Tips for Getting Started
- To start, you'll want to set up all your back-end folders and files (think:
- You'll also want to
npm initto create a package.json file to manage dependencies (e.g. express).
- Set up routes in a controller.
- Once you have your back end running on
index.htmlon the front end to test your routes via the front-end buttons.
You shouldn't need to edit the front-end code.
Your project should have:
- CRUD routes on the application's backend.
- a connected database, with a fully functional model.
- Fully functional frontend code.
- Modularized Express code.
Notes on the Front End
- A CSS Framework called materialize is used for the modals. Here JQuery is used to turn them on and off.
- Axios is used for AJAX requests.
- Update appears when you click the grey button at the top.
- Edit and delete appear when you click on an image.
- Deploy your application to Heroku and GitHub pages.
- Add tagging functionality.
- Add another model to the API.
Take a moment to re-familiarize yourself with the plagiarism policy, specifically on using work you find online and on work you do with other students.
We give assignments like this to give you the opportunity to review the material in class in a practical manner. By building something using what you've learned in class, you'll be reviewing the material and gaining a deeper understanding of it.
These assignments are similar to those you can expect when applying for a job, either in the form of a take-home coding challenge or an in-person technical interview. So it's important that you put in your best effort now and challenge yourself to do this assignment on your own.
If you are struggling with the material, that's alright! That's why you're here. First, try reviewing the previous lessons and exercises. Go easy on yourself, you're still learning! If you're still struggling after that, come to office hours and ask an instructor for help. They're here to help you!
Don't copy and paste from another source or another student or the solution branch. That's just going to put you at a disadvantage when you're interviewing for a job