Final Project for Flatiron’s Bootcamp
Did I say that correctly? Final project? As in…. the very last one? I can’t believe it! The last project is a React/Redux front end with a Ruby on Rails API backend. Every project I’ve completed was in some way related to a hobby or favorite theme on mine, so it felt fitting to make this last project about my love for dogs.
DOGDAZE
DogDaze is a Single Page Application (SPA) that allows users to track and document all of their dogs daily activities and needs. Did you feed Pepper? Did Bella take her medications? When was Fido last walked? All of this imformation can be documented on this application. For starters, let’s begin with the backend and then work our way to the frontend.
I began with creating my database for both the dog and the dog’s actions. Every dog has a name, age, and breed attribute. The dog’s actions have a name, mood, time, and description attribute. These are all the key information I want the user to be able to keep track of. I defined all of my controller actions to let the user create, post, and see an overview of all of their dogs’ information.
Now for the fun part….
Time for the frontend of the application. I began by making my action creators. These action creators are responsible for fetching data from the backend. I have four in total: two for getting and posting each dog, and two for getting and posting the dog’s actions. Once I set up those requests, the logical next thing for me to do was to immediately create my file structure. It was easiest for me to create separate folders for my actions, components, containers, and reducers to keep everything organized. I started with the hard part first: creating the forms and posting the data with each dog. Within my DogActions container, I set a variable *dog* that is responsible for finding a matching dog based off of the dog’s ID value.
This entire code snippet allows the user to see all of their previously posted dog actions. If there has not been a posted action yet, “No Actions Listed” will be displayed on the page. Creating the form for the dogs was very simple and straightforward with JSX.
I have two reducers, which I combined using a root reducer in effort to keep my code DRY and efficient. Redux reducers allow us to keep track of our application’s state. Within my code I defined several different cases in which state would be need to be updated, such as a new dog being added, or a new action being posted to a dog. These are both one of the several different scenarios in which my state would change and need to be updated.
I added a NavBar, Home, and Resources components to add better functionality for my application. At the top of page, I wanted a NavBar so users can switch between pages (but never refresh the page, as per project requirements). So users can see a home page when they first enter the site, a tab for the Dog forms along with the corresponding actions, a Dog Info tab that displays all the dogs, and a Resources tab just for links to related dog information. This improves the overall user interface and functionality for the page.
This was not an easy endeavor, but as with every project, its always extremely satisfying to see the final project after days and days of hard work. I wanted to create a final project that I could use in my own personal life and something that I know other dog owners might find useful as well. Just 5 months ago I was learning the basics of Ruby, and now I here I am creating a project using a Ruby on Rails API backend, with a React/Redux frontend along with CSS and HTML. I’m so proud of myself and all of my classmates. It’s been a beautiful journey. Thank you Flatiron!!!
