A school project to build out a prototype for a new video streaming platform called BrainFlix. We were provided with a package and mockup of the final product to create a site composed of multiple React components that render using dynamic data, not hardcoded HTML.

website responsive mockups

Home Page

Using the data files provided as a mock API, I used state to hold the data and pass it down as props to generate side-videos and main video content, including comments.The side videos needed to be clickable and upon selecting a video, the main video section updates to display the details and comments of each new video.

A school project to build a responsive prototype for a new video streaming platform using React.

Video Upload Page

Submitting a new video from the form will POST to the API. The upload functionality includes an event handler for the upload form so that when a user submits a new video, it posts the video to the mock API in order to save it to the list of videos. A new video image is served as a static asset from the Node server, and the data persists on the server, reading from and writing to a JSON file.

screen shot of brainflix website
dots representing a menu