The Movie Database
An interactive React App that allows you to browse movies by category and save to favourites. Generated using a REST API and utilizing the localStorage.
Design
We decided a dark theme was appropriate for showcasing the movie posters as it creates a similar feel to being in a movie theater. We went with a minimalist color palette since the posters were already busy with colours.
We developed wireframes and mockups using Figma, which allowed us to bring our design ideas to life, and easily make modifications before the development stage.
Development
To tackle this project, we divided the workload into three main components:
1) Build a static site
Creating a basic website with HTML and Sass, allowed us to finalize design details and responsiveness a mockup wouldn’t accurately portray.
2) Import code to a React App
We then set up a React App with routers, sass, and all the components needed. The imported code from the static site would act as a template for our dynamically generated posters.
3) Add in functionality
Finally, we used a REST API to dynamically create the movie posters, added in sort functionality, and used the local storage to enable “favouriting” movies, which were displayed on a separate page.
