My Movie List (Frontend)

Full-stack app for users to create, edit and share movie lists with their friends. Built with React, Ruby on Rails, MongoDB and the TMDB API. Tested with Jest and Storybook.

Currently deployed and hosted at mymovielist.ca.

Table of contents

• Overview
  • The Challenge
  • Screenshots
• Built with
• What I learned
  • Work with external APIs
  • Research documentation
  • NoSQL
• Instructions
• Author
• Other Projects

Overview

This app allows users to:

• Create accounts
• Create public and private Movie Lists
• View the 20 most recent lists created
• View their personal movie lists
• Edit lists (add, remove movies, and reorder them)
• Delete lists
• Share public lists with other users

This is a frontend app that is meant to be used with conjunction with an API.

The Challenge

This was my first solo full-stack project out of bootcamp, the challenge was planning and creating a CRUD web application with no external help aside from Google and documentation.

I chose to create a movie lists application after I learned about the TMDB API and since I'm a nerd who loves films I thought this would be something fun to work on (luckily, I was right). The first challenge was reading the API's documentation to learn how I could leverage it to achieve my goals.

The next steps were designing the wireframes and the database, as another learning opportunity I decided to use a NoSQL database (MongoDB) for the first time.

Since I didn't have much free time available for this project I chose to build the backend on Ruby on Rails because it was a framework I was familiarized with and it would enable me to get the API running in less time.

For the front end, the chosen framework was React, another technology I was familiar with and which I wanted to be more profecient in.

Screenshots

Main Page

List Page

Edit List Page

Add Movie Page

Built with

• React
• Ruby on Rails
• MongoDB

Dependencies

• Axios
• Sass
• React Router
• MaterialUI
• MaterialUI Icons
• Notistack
• React Copy to Clipboard
• React Spinners
• Validator
• Jest
• Storybook

What I learned

Work with external APIs

While I had used external APIs before, I had never worked on a project of this scope that was so reliant on one. I spent a significant amount of time reading the API's documentation just to learn what I could and couldn't do with it and how I could use it to achieve my goals before I wrote a single line of code. Now I feel confident that in the future I will be able to get familiarized with new APIs in no time.

Research documentation

To build this application, besides the external API, I also used 8 libraries that I had never worked with before. It took a lot of research to just find out which solutions already existed for the problems I needed to solve and then a lot of documentation reading to figure out how to implement them in my project. It was interesting to realize how much of the time allocated to this project was spent researching and reading.

NoSQL

Up until this point, I only had experience with relational databases, so I wanted to take this opportunity to learn how to use a NoSQL database, and for this project I chose MongoDB. I had to step out of my comfort zone and learn by myself how to handle a completely different type of database with only the help of Google, Stack Overflow and the available documentation. In the end, I was able to make MongoDB work exactly the way I had envisioned for this project, which was so rewarding.

Instructions

• Follow the instructions to set up the API here.
• Clone this repo
• CD into this repo and install dependencies with npm install.
• Copy the .env.example file and rename it to .env.
• Change the REACT_APP_API_URL env variable to the API localhost URL and REACT_APP_BASE_URL_LOCAL to the frontend URL.
• Run npm start to start the app.

Author

AWS Certified Web Developer with a knack for finding innovative solutions for solving complex problems in a timely manner.

Throughout my career, I have honed my people skills in other industries where I successfully led projects in different areas. I also trained hundreds of people, as passing down knowledge (while continuously learning) is a passion of mine.

Aside from my passion for coding, my abilities also extend to communication and collaboration with proficiency in interpersonal skills. My strongest suit is that I can bring these two skill sets together in a unique way.

My goal is to now use my skills to make meaningful connections, exchange knowledge and help others while working as a Web Developer.

• Portfolio - spomberg.com
• LinkedIn - /marcos-spomberg

Other projects

• My Movie List - Site / Repo
• Password Generator App - Site / Repo
• Memory Game - Site / Repo