Sproutable
For my final project at Flat Iron school I learned about an exciting web framework to incorporate the javascript in order to build web pages called React. This allowed for pages to be loaded once and all views to be generated on the fly through the power of react components. Unlike Ruby On Rails there was no such thing as a controller to pass variables to views in React. This presented a problem: if you have dynamic web pages that can display different information based on what is passed in…what’s doing this passing in? Enter React Containers. The main issue I found especially starting out with React was that there were so many individual components for different pages, with a lot of different containers feeding props into each of them. With all of this information being passed sometimes several levels deep from Containers to Components, it was necessary to somehow centralize the data. Enter the power of Redux.
Redux provides a way to structure all of the data you wish to maintain across views in a centralized place. This maintains the principle of single responsibility and honestly allows things to be kept track over much more easily. No more would you constantly have to remember to pass each prop and what you called it where. Redux keeps all data in a singular store and passes information as needed through mapStateToProps, which is a method provided by importing connect. It is essential at certain times to change the data stored within the redux store. This is where Action Creators come into play. Action Creators are methods that change data a certain way and pass this data through a Dispatch to a Reducer method which will return the new state with the added change. With all of this I built a web app for searching for local farmers markets: Sproutable, a place for all of your sprout tables!
Have you ever wanted fresh vegetables but had no idea where to find your local farmers market? Well the usda has created an api for just that! Unfortunately…JSON data is pretty ugly. So through a series display pages I managed to spruce it up a bit! Plant pun intended. Simply log in and you can search a zip code and get farmers markets along with their hours of operation and a brief description of their products anywhere in the US. I used a Ruby On Rails backend in order to store all of the farmers markets already hit and users info. In order for a user to stay logged in I utilized JWT tokens which allowed a special encryption to be stored on a clients localStorage. With this they could come back to the page and be logged in at any time as long as they didn’t manually clear it beforehand.
In the future I hope to incorporate vendor models and products to make this into a simple Ecommerce app. The models consist of Users, Vendors, Locations, Products, Orders, Events, Carts, and Items. The associates are the following:
User: has_one Vendor, has_many Orders, belongs_to Cart
Location: has_many Events
Vendor: belongs_to User, has_many Products, has_many Orders
Product: belongs_to Vendor, has_many Items
Order: belongs_to User, belongs_to Vendor, belongs_to Event
Event: belongs_to Location, has_many Orders
Cart: belongs_to User, has_many Items
Item: belongs_to Cart, belongs_to Product, belongs_to Order
My time at Flat Iron is coming to a close. I’m graduating a very intense program that has been extremely rewarding at the same time. I cannot wait for my next project and to continue this path of learning. The possibilities and technologies in this new field are endless and I can’t wait to explore more of them.
