Overview of Final Project

Our final project is a recipe manager book that extracts details from a backend API and outputs results in the frontend webpage. There are over 4000 recipes in the backend server whcih the code extracts and displays as recipe cards from which the user can search and choose any particular recipe of their liking. As I was working with the frontend side of the project, I’ll be recaping my entire journey up until this point of project completion.

Project Planning

Week 0 started of with us planning you recipe manager site. Our original goal was a rocket simulator but we then switched up to a recipe manager owing to the difficulties of making and running a rocket simulator. Week 0’s main goal for the frontend team was planning out and exicuting the frontedn home page, which we first planned out in figma and developed a code based on that. Our goal was to make a parralax effect for scrolling which we felt would be pretty cool to scroll through.

Continuation of making the frontend homepage

We understood that extracting code from figma would be an impossible task and thus we taught ourselved with the help of W3 schools. This parrallax animation contains images as the background with text in the front and when the user scrolls down it give an effec tof the image going down with the as well. This animation is also called the parralelx affect. As the week goes on the front end team will begin improving it and making it look more apparent.

My Contributions

Code Samples

During the duration of making the backend api we figured it would help us very much by making the api using a database. We found a csv file online and made sure it was mapped with IDs so it can be used flawlessly on frontend. Here is a example of the database.

CSV

Link to Home page

Homepage

Thus as you can see the code above, the parralax effect work and the scrolling down the user can see the images also seem to move along with the cursor and it moves through the text. This was a pretty cool effect that we worked on using HTML and CSS. This was made by the front end team consisting of Ryan Liu and Sri Vaidyas

Overview of Backend to Frontend Data Pull

The backend servers were created by me of the backend team. The servers include a URL link that contains over 4000 recipes to search for and find, these recipes also have recipe details such as instruciton as to how the recipe can be recreated as well as the ingredients required to make the dish. We used two API overall, both belonging to the same recipes but on with the entirely of all the recipes and the other which is ID linked where one can change the id of the url of have a new recipe. Both of these URL API are used to make this recipe manager search work.

This api was made using examples given to us by the teacher like jokes and covid. First we tried to make the api via a external api but that did not work out. Therefor we used a csv file in order to grab and export the data using a backend url hosted by aws. Backend with All Backend with id

Mapping Values

In order to use the data we found online otherwise called a database we will have to map the data. The mapping of the data will allow us to use data in a organized matter to make it easier for the frontend team to pull. I had many collumns which I mapped to values and made it a json file which the frontend team can pull and format for the user to read easily.

Values Mapped

Function

Next we made a function so the frontend can ut a query on the end of the backend url like the id in order to obtain the data they were hoping to get. This was created by using functions. In the function we instructed the program to use the query that was provided and go through the csv until it could find the value that it needed.

Function

Calling the Function

In a different file we imported the function from the file used above. In addition I defined the end of the url for instructions to the program when a certain function should be hit. Function Calling Image

Overall

Overall the backend was created with many additions ot the backend. We used functions and aws deployment techniques to deploy the backend. I really liked the technical aspect of the backend and I would 100% do it again!

Github Analytics

Over the repositories I have been contributing to I have been constantly commiting to show my contributions. These commits can be seen from my github profile. Github Analytics

Individual Projects

One of my individual projects I made during the is my Dominos Monitor. With this monitor it fetches the API of dominos to check stock of a coupon. Then it keeps it in a loop until it finds a coupon that is successful. It allows me to get free pizza :) and who doesn’t love free pizza.

Trimester One Review

Plans for NATM week

  1. Our main goal for NATM week as mentioned above is to fix the images error. We plan to use an external API for only images to try and display a few with the recipes. With the help of Mr. Mortensen and Mr. Lopez we hope to link these images into the wbesite some way or the other as without images the website looks really bland

  2. Our second goal before NATM is to reformat the site, remove stuff and add stuff to make it more like our own webiste and not just like that of a forked website from the teach.

  3. If our qualification remains our hope is to contiue working to better the site and give an overall good presentation at night at the museum!