Reddit Browser

Reddit Browser – React/Redux Project

My final project as a student in Flatiron School is called Reddit Browser. This web application allows users to query Reddit by keyword and get results from Reddit posts that contained images. Users can pin individual posts to the home page, and other users can vote, much like they would for a post on Reddit.

A pinned post on the front page

Developing this project really helped to solidify my understanding of React state, the handling and passing of props and the use of the Redux store. React Lifecycle Events really seem amazing once you understand the full cycle of Action -> Reducer -> New State.

As I worked through the curriculum, all of the labs were already setup to use React and/or Redux and for the project I setup everything from scratch. At face value this seems straightforward but turned out to be quite complex…

Getting a development environment setup was more work that previous projects. A single server would work, but would be horribly inefficient. Since I am persisting data to a database, I needed to run React and Rails at the same time so I could debug both at the same time and avoid stopping and starting servers every minute.

A Node server is required to handle React and a Rails server is required to handle the backend, both running on different ports. Once deployed to Heroku, the Rails server handles everything. I used an awesome guide from Heroku for getting the development environment setup and won’t dive into the setup in this post.

I would say that the most challenging portion during the development of this application was abstracting away to allow my components (especially important!) and actions to be reusable. I learned that it is important to plan out the structure of your state before you start coding. Intuitive naming and nesting makes it easier to digest as the state and application grows in size.

Persisted (pinned) posts, a search query and search results in the Redux store.

For anyone that has been following my posts, the React/Redux section was really great. This section definitely redeemed the poor JavaScript section.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.