MovieScope Case Study

Overview

MovieScope is an app built using ReactJS, leveraging previously designed server-side code (including a REST API and database). Users can register an account, log in, and access information on a variety of movies. Additionally, the app allows users to update their personal data and create a list of favorite movies.

Purpose

This project was created as part of my web development bootcamp at CareerFoundry to demonstrate front-end development mastery using the React library.

moviescope1 — Figure 1. Main view of the websie (left) and VSCode editor (right)

Objective

The goal of the project was to create a fully responsive client-side interface from scratch, incorporating a range of useful functionalities using popular React libraries. This aimed to refine my skills and enhance my portfolio.

moviescope2 — Figure 2. Profile view (left) and single movie view (right)

Development process overview

The app was developed as a React single-page application, with interactions facilitated by Axios for API communication. Bootstrap was utilized for design elements, while Redux managed state across the application. React Hook Form and Zod were employed for form validation, ensuring data integrity. Additionally, React Toastify provided notifications for user interactions. The app's structure was organized with separate views and components, including login, signup, movie display, and profile manage.

Duration

Crafting the client-side interface demanded significantly more time compared to designing the server-side architecture. The process involved immersing myself in various new concepts to achieve the desired outcome. Also, a considerable amount of time was dedicated to improving the UI and layout design to ensure optimal user experience.

moviescope3 — Figure 3. Login view (left) and registration view (right).

Challenges

This project really required me to learn of lot of new things. I encountered the greatest challenge in grasping the Redux library and seamlessly integrating my layout with Bootstrap using CSS. However, despite these hurdles, I enjoyed working on this project, making it my favorite one thus far.

Future Steps

During my free time, I continue to enhance the project by adding new functionalities such as Forgotten Password, integration with Google Authentication, and the ability for users to rate movies. These additions serve as opportunities for me to further polish my JavaScript skills and strengthen my understanding of web development practices.

Final Thoughts

Overall, I'm immensely proud of the product I've created. It has provided me with a wealth of new knowledge and perspectives. ReactJS has emerged as my favorite JavaScript library, thanks to its versatility and efficiency in building dynamic user interfaces.

Credits

Lead Developer: Cezary Szal

Tutor: Ayeah Godlove Akoni

Mentor: Renish Bhaskaran