Sweet Tooth: A Gluten-Free Baking App

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 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.

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.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store