Recalls. It’s What’s For Dinner.
My first full-stack web app.
For my second project at the Flatiron School, I was able to build my first full-stack web app. My partner Kelsey and I used FDA food recalls from api.data.gov. It was a powerful experience to see full communication between our front-end and back-end, as well as see the power of paired-programing.
Backend Library Setup
Kelsey and I decided to download the FDA’s data directly as opposed to using Rest-Client and creating an API-end point. We’ve used Rest-client before with success, but thought we would have more control of our data set going this route. The database is populated with over 20,000 records. The data is only ~3.5 MBs in size, so it doesn’t take too much time accessing the data each search.
Backend Construction
Our database was formed with a many:many relationship: Recalls and Users have many Saved Recalls. One of the most difficult tasks of our backend design was creating custom routes to access our JSON library file. To do this, we defined three filter methods. Each method searches through the data based on state, company and recall. Furthermore, these routes are needed to be defined within our configuration with the following syntax:
get 'state', to: 'recalls#filterByState; get 'recalling_firm, to: 'recalls#filterByCompany; get 'recall_number, to: 'recalls#filterByRecall'
Outside of these custom routes, our backend was fairly simple to setup due to so many out-of-the-box features from Rails. Seeding does take upwards of 1 minute per session, as there are over 20,000 records required to be seeded into the database.
Frontend Design
Our website’s landing page allows new users to create a new user name, view their saved recalls, or filter through all saved recalls in the database. Because Kelsey and I are still so new to programming, our user class does not have sophisticated authentication, but we hope to be able to upgrade that some day down the road (other users can see any all other user’s information).
The majority of our HTML, CSS and JS are generally designed in the same manner:
- Each page starts with a URL Search Param
- Fetch backend Recalls class
- After promise/response is received parse through JSON
- Declare function which creates, manipulates and appends elements to the page.
We continued this process over the course of ~12 webpages to nail down the syntax in our brains. While it’s basic JavaScript operations, it taught us how much work goes into every element you see on a webpage. The majority of our pages have an innerHTML element to lead the user to the next page:
<a href='show_card.html?recall_number=${recall.recall_number}'>recall.recall_number}</a>
Final Thoughts
With only 6-short weeks through the Flatiron course, Kelsey and I were able to construct a functioning, full-stack app on our own! It’s a powerful moment for someone so new to watch their frontend communicate so quickly with their backend so succinctly. I also enjoyed building this app through paired programming. We built everything in ~3.5 days, and almost every line of code was written together. There is no chance I could have built something so expansive and neatly on my own in such a short amount of time, so I hope I can continue to apply paired programming throughout the remainder of my career.
Please check out the rest of our code here! https://github.com/estein1988/fda-food-recalls
