DEV Community

Elias Ventura
Elias Ventura

Posted on

Capstone Project!

Having studied with FlatIron school for the last year has been a great learning experience. The capstone project was the perfect opportunity to utilize all the skills learned and to incorporate creative ideas. It seemed like anything you could think of about how a website can operate you can just research and incorporate it into your own project. This felt like magic! Alot of this "magic" came from alot of the skills learned about state management, and model associations. These two things were integral in my capstone project.

State management did several things that helped my code. With the useContext hook I was able to provide alot of information about the user and other states that i wanted to alter all the time in my code but that i didnt want to pass down as props to the components. This really made it easy to access information about users, or even helped with keeping my session[:user_id] set to the current user. For example using BrowserRouter to define my routes, when changing routes it would make the UserContext rerender and reset state, but with useContext and localstorage i was able to persist the currentUser information between changing pages.

 const [currentUser, setCurrentUser] =  useState(
    JSON.parse(localStorage.getItem("currentUser")) || {}
  );

  useEffect(() => {
    const storedUser = localStorage.getItem("currentUser");
    if (storedUser) {
      setCurrentUser(JSON.parse(storedUser));
    }
  }, []);
Enter fullscreen mode Exit fullscreen mode

localstorage is a browser tool that allows use to store information to an object in key value pairs.

More importantly through out the app the model associations enable all kinds of imformation to be passed along between pages. This kind of interaction between the models and the views was a little difficult to understand at first, but when you get the hang of it youcan see how useful it is. Specifically in this project a problem i had to solve was how to access deeply nested arrays two levels down. Theres a lot of ways to come at the problem, but at the end of the day you realize the best way comes down to setting up the correct association in you models. Once you can create the correct association many methods get inherited by the models and allow you to start creativvely coding anything you might want to see based on these association. For example if i have an order model and items model I can query the databases and start making webpages with this information, add to it, delete from it, anything i can think of will come down to how the models are associated and how their attributes can be accessed.

class User < ApplicationRecord
    has_secure_password
    has_many :orders
    has_many :order_items, through: :orders
end
Enter fullscreen mode Exit fullscreen mode

Here you can see how a user has many order_items through orders

const userItems = currentUser.order_items

Enter fullscreen mode Exit fullscreen mode

and then here in this code you can see how directly in my component i can access the association with a method i never defined "order_items" but that activeRecord had defined.

Overall my time with Flatiron School has been great and very instructional. With the capstone project i was able to see just how vast an application can be and how important it is to set up the bones correctly, which in my case was the activeRecord associations. Having worked on this has made me so excited because developing an app like this is so vast, and it makes me excited to be able to learn more code!

Top comments (0)