Member-only story

TopTrailers: A React/Redux project.

MDN
8 min readJun 28, 2020

I designed a final project showcasing all the skills I learned at the Flatiron School. Top Trailers is a website app which allow users to view and add movie trailers. I applied iterative design methods to create my final project. Before jumping right into building a React/Redux app, I first made a React app to test a 3rd party component.

Part One: Web Brut Player, a React App

I wanted the opportunity to make a React project, before making the final React/Redux project. To solve this, I did an iteration of my final project, testing the ReactPlayer component that I used in both: Web Brut Player.

Web Brut Player was very simple. All the controls were built into the ReactPlayer. The main goal was handling an async fetch, calling a random trailer from a database, and showing it on the DOM in the ReactPlayer component.

Both Web Brut and Top Trailers use the same Rails API, hosted on heroku.

I built the Rails API with new command:

rails new super-awesome-api — api — database=postgresql

…then built the postgres database, built the model using a resource generator, and migrated the data.

rails db:create
rails g resource Movie name url dir movie:integer
rails db:migrate

Which created this schema:

only url was used for Web Brut Player; the remaining data was applied in Top Trailers
only url was used for Web Brut Player; the remaining data was applied in Top Trailers

MDN
MDN

Written by MDN

Composer, Designer, Educator

No responses yet

Write a response