Recipe Roulette Project

Eajay Delos Santos
3 min readJul 12, 2021

Hello! My name is Eajay Delos Santos! I am currently a student at UC Berkeley’s Coding Bootcamp and was required to apply my current skills into creating a web application along with 4 other people that we could be proud of. Getting started was probably the hardest thing, first we had to research APIs and find designs that would suit our initial vision.

Using technology we weren’t familiar with like Pure.css, a new CSS framework that none of us had experience with. Since Bootstrap was off the table, we had to read into the documentation and figure out how certain classifications affected certain elements on the page and while frustrating at first, getting it to work is probably one of the greatest feelings you can get. It is in a sense very similar to bootstrap, for example bootstrap has something like “col-6” that you could use to adjust the size of an element and how much space it takes up in a certain column. In Pure, its a bit similar in a sense in that you can do something like “pure-u-1–2” which is the same as declaring “col-6” in Bootstrap.

Another new technology we came across was Sweet Alert which is this pretty alert pack that shows up similar to how a page alert, prompt, or confirm would work. (See below)

Example of it displaying on screen

It’s very easy to implement in that all you need to do is grab their script link and apply it to the HTML and then you can call on the command of “swal” and enter parameters within an object to customize how it shows up on the page. (See below)

Creating the Sweet Alert Modal

I’d say one of the toughest things going into this was discovering which API’s would work for our vision, and then implementing it within our code. So we decided to take a step back and go for an MVP (minimum viable product) where it still achieves what we set out to do, with a lot of room for improvement if decided to expand upon. We got a little too over confident in our skills of using ideas that were out of our skill range but given more time I believe we could have achieved it.

Another thing was trying to find new technology to implement into our application. We asked ourselves how do we want it to affect out page and why is it necessary. The concept of discovering and trying things we aren’t familiar with. This process of exploring other options rather than the ones we have experience in was a learning process in itself.

Implementing different parts of an API to display as a whole

While I worked more on the back end side of things, I still needed to cooperate with the team to add sections in which my JS could append/display on to the page. We had a system where 2 people would work on the front-end while two people worked on the back-end. Even though I was mostly back end, I helped supervise the front end side of things so that my code could work with what was already displayed. Our team had very good communication and we met up at times convenient for us and accomplished things in a timely manner. I say that we are proud of what we did.

This project was definitely an experience especially working with people from a variety of backgrounds and skillsets. We all pulled our weight in the end and cried a lot (just kidding). If you wanted to see our site copy the link below and mess around with what we have. Thanks for reading!

Visit the site today! https://eajayd.github.io/recipe-roulette/

--

--