MyFlix80s

Overview

The initial page displayed to a user is a login and registration page. Then once logged in, the main page displays film cards for films from the 1980s, which the user can explore.

There are several ways to navigate to find out more about each film, different genres and directors of the '80s era. Films can also be added to a dynamic list of favourites.

There's even the feature to view profile details, stored on mongoDB, where there's the option to update and delete a profile.

Tools Used

This app was built using the MERN stack:

mongodb
express
react
node.js

It was split into two main projects - the back and front-end, which work together to bring the data through to visually experience the app.

Back-End Development

The first part of the project involved developing a RESTful API and creating a NoSQL database. The API contains the logic for accessing both the data about each film and allowing users to create a secure, personal account.

Feel free to view my code for the myFlix80s API.

User Authentication

The user authentication process was the trickiest part of this project. Working on the back-end taught me a lot about the logic needed to maintain high standards of security. And the front-end required a lot of thought to implement effective error handling.

Front-End Development

For the user interface I used REACT.

User Flow Diagrams helped me to map out how to arrange the props and states for each view.

Both functional and class components were used along with React Bootstrap components. As well as using mongoDB for CRUD operations, local storage was used to keep the user logged in.

Lessons Learned

While I feel more confident with front-end development, I enjoyed developing the API and creating a database and would like to expand these skills in future projects.

This project helped to solidify my React knowledge, such as using hooks and updating the states. At the end I successfully changed some of the states to be managed with Redux, just for practice. I feel this is something I'd like to explore more as it's important when working on bigger projects.

I enjoyed working the most on the User Interface. Playing around with the CSS to see how different elements respond. This is a particular area that I intend to extend and explore as I continue on my web development journey.

Links to Project

Code Live