MOVIEMIKES
OVERVIEW
Welcome to the MovieMikes! This web application provides information about different movies, directors, and genres. Users can sign up, update their personal information, and create a list of their favorite movies. I use MongoDB to store lists of films, genres, and director information. Simple and understandable, using Bootstrap and CSS to provide a responsive application for all users.
OBJECTIVE
Using React, build the client-side for MovieMike based on its existing server-side code (Movie API and database). Integrate features that allow account creation, and access to film information such as genres, directors, and similar films. Give the ability to customize a list of favorite movies that they can add or remove anytime.
TOOLS
HTML, JavaScript, React.js, Netlify, Bootstrap, Node.js, MongoDB (with MongoDB Atlas), Heroku, Postman (for testing)
DESIGN
Many movie-related websites are cluttered and difficult to navigate. Users often struggle to find specific information about movies, and there is a lack of personalized recommendations.
I used this conclusion as the foundation. I grabbed the most streamlined and easy-to-understand layouts. A home page that presents all films as a grid layout. Something that users are familiar with and can navigate freely. With the navigation at the top of the screen, users will always have access.
Users can click on an image of a movie, and be redirected to the About section of that movie. I designed this area to present the image cover art on the left while having Title and genre tags on the right. Keep the film summary at the bottom to fit the larger text.
As you scroll down you will be greeted with the recommended movie section, layout as a grid to support multiple similar movies.
CLIENT SIDE
MovieMike was made using React.js. I took advantage of React.js's virtual DOM and efficient rendering contributed to a fast and smooth user experience. When you have a web application that holds many movies and information about each movie, you will benefit from a quick and smooth experience.
ACCESSIBILITY
MovieMike adapts to different screen sizes, ensuring a seamless experience on desktops, tablets, and mobile devices. The application prioritizes intuitive navigation, making it easy for users to find what they are looking for.
MovieMike also has a tab to learn more about each genre and director.
USER ACCOUNT
Users can create an account with a simple registration process, providing their email address, username, and a secure password. Users can update their profile, including their username, email, birthdate, and password ensuring information is accurate and up-to-date.
MovieMike offers users complete control over their data. Users can choose to delete their account, permanently removing their information from the platform.
FAVORITE LIST
Favorite lists help users keep track of their desired movies, making it easier to plan their next movie night.
Adding movies to the favorites list is as simple as clicking a "bookmark" icon on a movie's details page.
BACKEND
The Server-side component of MovieMike provides endpoint access to information about different movies, directors, and genres. This also includes user login, sign-up, and user information. Must be the same user to view information.
The modular design of the API facilitates easy maintenance and updates, ensuring a smooth development process.
SERVER AND DATABASE
MovieMike API uses a Node.js, MongoDB, and JavaScript. JavaScript code sends an API request to the Node.js server to receive the request, process it, and interact with the MongoDB database to retrieve or update data.
MongoDB's NoSQL nature provides flexibility in handling diverse data structures and evolving requirements.
API GITHUB
TESTING
Postman allowed me to test individual API endpoints, ensuring they function correctly and return the expected data. Postman helped me identify and address potential errors in the API, ensuring a robust and reliable system.
CHALLENGES
Most of the MovieMike challenges came from learning how to set up the component views that would present crucial information about movies. Another challenge was learning Bootstrap and how to take full advantage of its pre-created class tags.
LOOKING BACK
MovieMike is a React JS-based application that provides a user-friendly platform for movie discovery. By leveraging the power of React.js and MovieMike database API, MovieMike offers a focus on user experience, recommendations of similar movies, and a way to personalize your favorites anytime.
I achieved all primary and side objectives, making the MovieMike user-friendly and informative.
Next time, I want to improve the user interface, currently it's very plain, with small issues on sizing. It would help improve the user experience and make the application more cozy. Other minor changes would be adding font resizing and dark mode and light mode toggles.
CREDITS
Lead Developer: Michael Pietroski
Tutor: Rylan Albach
Mentor: Trey Fletcher