Hackathon - Build a Back End

You'll need to write some code to get this application running. Your server will function as an API like we've been building and also serve an HTML page.

You should see a website at http://localhost:3000 when the server is running. A very basic front-end (HTML/CSS/JS) is currently served. Don't change the front end yet. You'll start by building a back end that fits its needs.

Populate

First, using the table below as a guide, get your CRUD routes up and running in your router so that your server listens for requests and serves test/example responses for now.

Remember that you can test your routes with Postman or Thunder Client to ensure they're working.

Requirements table

Create your CRUD functionality

There is a recipes.js file in the root of your project. It should contain all of the logic that interacts with the recipe collection. Complete the methods in there, so they behave as expected. These functions should be exported so you can use them in other files later.

• getRecipes should return an array of all recipes
• getRecipeByID should return the particular recipe we are looking for
• createRecipe should add a recipe to the collection and return the new recipe
• updateRecipeByID should replace the recipe at a certain ID with an updated version and return the new recipe
• deleteRecipeByID should remove the specific recipe from the collection, and return the deleted recipe

The recipe data can be found in recipes.json. The helper functions above should create, read, update and delete (CRUD) recipes from the JSON file.

Hook up helper functions and API endpoints

Import your helper functions into your "app.js" file. Now the focus is to use the helper functions in the route handlers you set up earlier. Each endpoint should perform the correct action and serve the response data. The table above outlines the information you need to do this, including the methods, RESTful path, if there should be a body with the request, expected result, and structure of the response.

Important things to keep in mind

• Go one by one! Make a route handler and test it - don't try to write multiple routes and then test them all at once afterwards. Only move on to the following route handler when you're confident the previous one works.
• Break it down Make a plan for each route. Start with what's coming in with the request and the response you expect, and then keep breaking the logic to get there down until you can't any further. Treat it like a Codewars and plan out the logic.
• Make sure your responses include the payload key, with the value being either a recipe or an array of recipes, as shown in the table above. This is what the front end is expecting in your bonus challenge below!

Bonus challenges - THESE ARE OPTIONAL!

Try the challenges below when you're confident that all the routes above work and your API is RESTful.

Prioritize helping your peers in other groups with the requirements above if you get to this point. Remember that articulating to others will strengthen your own understanding!

Join up to the front end

As mentioned above, our server also serves an HTML page as a basic front end, visible when you navigate to http://localhost:3000 in your browser rather than /Thunder Client. You can see this front-end code in the public folder.

The fetch requests are already written in the main.js file, so see if you can get the functionality on the front end interacting with your API.

Optimise the code

Given everything you've learned, try and find ways to refactor and optimise the code. Hint: there's definitely some better ways to go than how we're currently interacting with and manipulating the DOM. Try and remember some of the best practices we explored and see if there's a chance to apply them.

Add middleware

Add middleware to your app. Ideas include:

• Existing Express middleware (check the docs to find out more)
• A logger that prints out details of the request to the console
• A count of how many calls your API receives

Add delete functionality to the front-end

Make it so you can delete an individual recipe from the front-end. Plan out exactly the best way to do that - you've already created the back-end functionality.

Keep improving!

If you have time remaining, brainstorm new features you can add to your app on your server or the front end. This could include styling, additional functionality, error handling, additional query options, and more.