American Outfitters Project

So it was my final project for FlatIron School and I wanted to make a website that I would be happy with if I visited it in my spare time. For this project I used React with Redux. My father in law has been a hunting guide for over 30 years so I figured I would make a website for a hunting guide service. I started by using create-react-app to get my front end started. Then I created a Rails Api back end. I created a hunt table for all my hunts information and a reviews table. I seeded my database with all of the animals and hunting information. Now it was on to the front end. I figured I would get my Index.js file set up with provide from redux to connect my store to my App.js file. Then before I set up App.js I wanted to figure out what components I was going to have that way I could set up my containers. After setting up components for my hunts, reviews, navbar and forms I started to set up my containers. I set up a hunts container and a reviews container to handle all the logic for my components that would eventually pass down the props to the components including the store. Once I had my containers in place it was back to App.js to set up my routes. In App.js I uses React’s react-router-dom and set up a path for a home page. I then set up paths to all my components through their containers. Inside the containers I set up exact path’s to the components and passing the props down to each component which included the store. Now I figured it was time to set up my reducer along with my actions so I could fetch data from the back end. After I got my reducer set up I made an actions file to handle my fetch request. I then set up a componentDidMount inside my containers to fetch the data from hunts and reviews. I also set up methods to map over the data that I got back from the fetch request to send down as props to the components. Inside the components I took that data and implemented JSX for each object on how I wanted it to appear on the page. At first I was pretty intimidated to start this project because I wasn’t confident in my React skills. But once I got started It was a lot easier than I thought it would be. The set up time for this project was way faster than my javascript project that I used vanilla Javascript. I think I spent more time on css and the styling of everything than the actual logic of the app. While I was learning React and Redux I wasn’t a big fan of it but after seeing how easy it is to set up a project I can see the upside of using both instead of just vanilla Javascript. I’m a big fan now of SPA’s and React.