Sweet Tooth: A Gluten-Free Baking App
We are coming to the end of Phase 4 of 5 at Flatiron. I honestly can’t believe we’re this close to the end. My time in this program has flown by. When they tell you at the beginning that this bootcamp is “like drinking water from a fire hose”, they’re not joking! This phase we switched gears and dove headfirst into JavaScript land. This was the phase I was the most excited for because my goal is to be a front-end software engineer. I’m planning on learning Vue and React post graduation. For this project, we we’re tasked with creating a single page application or game using vanilla JavaScript, HTML, and CSS for the front end and a Rails API backend. Let’s get into it!
Sweet Tooth
For my project, I decided to create a single page application called Sweet Tooth. I want to eventually turn this into a mobile app, but for now it’s a web based application. As someone with a gluten-allergy and a love for baking, I’ve struggled to find solid gluten-free dessert recipe’s that are actually edible. If you’ve ever had a store-bought gluten free cupcake, I’m sorry.
The basic idea for the app is to create a curated space for GOOD gluten-free baking recipes. A user can sign up( I didn’t use authorization for this project, but will add Google authentication later), view a single page of recipe cards with the title, image, and category of each item, and then click the card to view the recipe instructions and other details. The app also allows users to add a recipe they find to the database.
The Beginnings
For this project, I started with building the bones of the front end. I created a simple HTML file with the title and subtitle of the app. I then created my index.js file to house my API service calls and other basic functionality. Because we we’re also required to used Object Oriented Design, I then created my recipe.js file. This file houses all code related to my recipes object(s). Once I had the bones of my front end built out, I moved on to building out my backend API so I could get some recipe json objects up on the server.
The Backend
Because I plan to eventually deploy this project, I created totally separate folders and Git repos. So once I had my repo set up, I created my various migrations and seeded my database. My plan was to have a recipe, user, and detail model. I created the recipe model and controller first because that was what needed to appear on the page next. I knew I wanted an index action that would eventually correspond to my fetch call to load all recipes in my database. I also was going to need a create action to allow users to create a new recipe object.
Defining the Relationship
To meet the requirements of this project, we needed to have one has-many and one belongs-to relationship. My recipe model has-many details and my detail model belongs to a recipe. The detail model was awkward to name, but essentially I wanted the detail migration to include the cook time, difficulty level, and instructions for each recipe. So once I had those relationships defined I finished coding out my controller actions in the recipe model and seeded my database so I could get the server up and running.
Once that was done, I fired up the server and lo and behold, recipe json objects!
Back to JavaScript Land
Next I built out my modal.js and detail.js files. The purpose of the modal file is to house the code related to my pop-up form for users to submit new recipes. I had to add functions with event listeners to open and close the modal. The detail file is short and sweet. This file simply contains the code to render the detail information from the Rails API.
Lastly, I created a CSS file and tweaked the styling of my many components. JavaScript is a fun, albeit intimidating programming language because it provides for so much flexibility. This project was an excellent way to get your feet wet and understand the fundamentals of vanilla JavaScript.
I have big plans for this little app!
