Final Project — JYDB Movie Database
Graduating from a 24 week boot-camp
12th February 2021 was a date that felt like it was always on the horizon. But then all of a sudden it started creeping towards us. It was the date of our boot-camp graduation. After 20 weeks of lectures, intense learning, pair programming, code reviews and creating projects, it was time to plan and create project number 21 — the final project. We had 4–5 weeks to complete our design and build. I teamed up with my classmate Ylva Nilsson for this final venture.
Planning
We created a movie project earlier in the boot-camp when learning about React-Router and multi-page React applications. We felt that it would be fun to build a more complex version. The inspiration behind JYDb came because when I’m looking for a movie to watch I constantly flick over to iMDb and back again and spend a lot of time checking ratings before finally committing. So we wanted to create a “Netflix” style site combined with a movie-database app. For this we used The Movie Database API.
During our design stage our main focus was to create a bold home page which included a hero carousel and multiple scroll lanes containing different movie categories. One of the things I am most proud of is our home page. We went big with our design plan without fully knowing how we were going to implement it at the time. But after some careful research, lots of trial and error and a little help from the developer community, we managed to accurately match our design.
Backend
For me one of the most challenging parts of this project was creating the backend and switching between a frontend and backend mindset. Mainly due to backend development still being fairly new to me. But I really enjoy learning more about it. We use MongoDB and Mongoose to create our database and created a RESTful API using Express on Node.js. We created 3 collections for our database: user, rating and watchMovie. With user storing our user details: username, email, password and using crypto we generate our random Access Token. Our first focus was to set up our User Authentication. We have some features that are only available when a user is logged in (such as watchlist and leaving a movie review). We control this with Redux and localStorage. We have a value in our Redux store called isLoggedIn which allows us to track the user login status.
When a user logs in successfully we save the access token user ID, username, update the isLoggedIn status and store in our Redux store as well as localStorage. So if the page refreshes the user remains logged in.
Frontend features
The Home page displays a hero carousel using React Slick which is something we discovered when researching and it shows 5 random movies from our “Upcoming” category.
Below that we have four scroll lanes (one reused component) which display movies from x4 different categories. During our API fetch we dispatch the four different arrays of movies to our Redux store so that they can be accessed by our Movie List pages (when you select a category) and saving us from making unnecessary API calls. Each scroll lane has arrow buttons when in desktop mode. The arrows target the corresponding scroll lane thanks to the useRef React hook.
We implemented a Watchlist page which is accessible only when you’re logged in. The user can add movies to their watchlist on the home screen and also the movie details page itself. This value is stored in our database and accessed by different components, like our small and large watchlist buttons which toggle depending if the film is in your watchlist or not. And if you cant decide on what movie to watch …That’s no problem, as we have included a Random Movie Selector button on the Watchlist page.
When you click on a movie you are taken to that Movie Details page, with the help of React-Router and the useParams hook where you will find all the relevant information for that movie. Including cast details, which is data from our external API. Using useParams again we display an Actor Details page with one more call to the API to display that films that actor/actress has appeared in.
On the Movie Details page we have included Review section which can be viewed by all. But the user has to be logged in to leave a review. The user is also allowed to delete their own reviews. This is done by sending a DELETE post to our API/database. We use the Sweet Alert library here for user experience — to ensure reviews are not accidently deleted.
Responsive web design
We implemented a mobile first approach as we wanted our app to be easy to navigate across all platforms. We created a separate navbar for mobile/tablet view along with a hamburger icon. Allowing an easy login process. Our hero carousel and scroll lanes are also scrollable thanks to the overflow: scroll CSS property. The back button, which uses the useHistory hook, also helps with site navigation. The search bar changes to just a search icon on screen sizes 1023px and below. Expanding when clicked.
Summary
I am extremely proud of our end product but I am even more proud of our teamwork and collaboration. We had the choice to work solo or in teams for this project and I am happy that I chose to work with Ylva. We decided to use a mixture of pair-programming and working solo. Creating separate git branches when required to keep our work tidy and avoid unnecessary conflicts. We were able to learn and bounce ideas off each other, because we both have different strengths. Overall it was a really positive experience and I feel that it closely resembled life as a developer in the real world.
After 24 weeks this felt like the perfect way to end a tough, testing but super fun learning experience. Graduation was a welcome end to this first chapter of a new career.
Live site : https://jydb-movies.netlify.app/ | Github: https://github.com/the-j-curl/project-final-movie-backend https://github.com/the-j-curl/project-final-movie-frontend
