CINEMADDICT: A React + Redux Single Page Application
I have been a movie obsessive since I was a ten-year-old kid watching Luke Skywalker cross lightsabers with Darth Vader in an old, beat-up VHS copy of The Empire Strikes Back. So when it came time to build a web app using React and Redux, I decided to dedicate it to the movies. I built CINEMADDICT, an app that lets the user rate and review their favorite movies.
I began by sketching out the basic models and building out the Rails API for the back-end. Keeping the app relatively simple, I went with just three models: User, Movie and Review. Reviews belong to both a User and a Movie, and as a result, Movies and Users have many of one another through Reviews. Nothing too crazy, and since this was a project meant to show off my React/Redux skills, I felt the simplicity of this approach in the back-end would benefit me later whenever I would get stuck on the front-end, which it absolutely did.
After building out routes and controllers for my models, I built out an additional Auth Controller to handle login. I used an approach as detailed by my Flatiron School course which involved using the JWT gem to encode and decode a JavaScript Web Token to be passed to the front-end and stored in localStorage. After that was accomplished I could focus on the fun part of building the backend, seeding the database. I was able to pull all of my Movie data from IMDB’s API, parsing info on the site’s Top 250 movies. After come light reformatting I had all of my Movie seeds squared away, then I used the Faker gem to build out my Users and Reviews. And with that, my back-end was built, leaving me to focus on the meat of this project: the React/Redux front-end.
The first thing I did was run npx create react app cinemaddict from my terminal to build out a basic React framework. Then I added some necessary dependencies; namely Redux for handling state, React Router to handle front-end routing, and Thunk for handling all HTTP requests to my database. After some preliminary coding in my index.js file to enable Redux, React Router and Thunk throughout my app, it was on to building out my components, reducers and the overall functionality of my app. For Movies and Reviews, I designed my components around parent “container” class components that house child “presentational” functional components. Each container component would commit a fetch request to the database to gather the necessary data via React’s componentDidMount() hook, which also triggers a Redux dispatch to the component’s respective reducer to update state. Then that data is passed along via map() top create each resulting Movie or Review presentational component.
Coding out the User components was a tougher endeavor. Handling user registration, login and logout took a lot of trial and error. How do you store a user in state when navigating to another page refreshes the state and wipes your user data? Well, my solution was to store the user in localStorage alongside the JWT. This gave me access to user data regardless of state, and gave me an easy way to logout: using a dispatch to remove the user in state and clearing localStorage with localStorage.clear().
The hardest part of building out CINEMADDICT was in the complex routing for movies and reviews. I set up most of my routes in App.js, but in rendering movies and profiles along with their respective reviews and review forms, I had trouble figuring out how to not only reroute to a new component, but to pass props as well. I realized that if I simply wrapped my routes in a Switch within the parent container’s render() method, then pass all of the elements fetched by the parent to the child component through the route. Then I could just find the correct movie/review by id within the child component.
The final touch was crafting components to create and update reviews. For this, I built out controlled components that would update their internal states on change within the form. Here you could give your review a title, a rating, and review text. Each review is tied to a specific movie by said movie’s id. Upon submission, state is updated and your review is created or updated in the database and voilà, we have a fully functioning web app!
You can check out my repo at https://github.com/pbrzn/cinemaddict. Thanks for reading!
