This is a simple web app where a user can type in a drink they would like a recipe for and the drink name, image, and recipe will be displayed on the page. This application uses the Cocktail API to fetch drink data based on drink name (e.g. using user input 'margarita' will fetch www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita).
The web application is built using the Express framework, allowing us to manage client requests to our server.js. The user enters a drink name into the HTML form, and upon submission, sends a post request to the server.js. The server uses body-parser to parse the request, obtain the name of the drink, and send a fetch request to the cocktailapi. The response from the API is sent to the ejs and renders an HTML with the contents of the response. If an error is sent back from the api, the error is console logged. An error can occur when the user inputs a word that isn't found in the cocktail api.
Currently, the application is not able to handle error requests in a user friendly manner. The response sent back using ejs returns a blank page with an error. An improvement would be to return a useful error message to the user. A further improvement would be to respond with the error page and add possible word suggestions based on the user input.
Being my first web app, I've learned a lot about both the front end and backend devlopment. I've learned about css root styles, and css media queries, and further improved my flexbox knowledge. Through this project I've learned about the communication between front end html and server side JavaScript through the use of requests and how to parse through them. I most improved in my knowledge of the templating language EJS. Learning how to dynamically create lists and elements depending on the number of items in an object being passed was the most difficult but rewarding concept to implement into this project.