Sweet Tooth: A Gluten-Free Baking App
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.
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.
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!
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.
I have big plans for this little app!