HigherLowerMovies
In this project, I developed HigherLowerMovies, a web application where users can guess whether a movie has a higher or lower IMDb rating than another. As the sole developer, I aimed to create an engaging game that tests users knowledge of movie ratings while providing an enjoyable user experience.
Planning and Implementation
The project began with defining the key features and user flow. I focused on creating a seamless experience, starting with the game mechanics. I chose to use React for the frontend, which allowed for a dynamic interface and responsive design.
To implement the core functionality, I integrated a third-party API to fetch movie data. I designed the game logic to randomly present two movies, allowing users to compare their IMDb ratings. This required effectively handling asynchronous API requests and ensuring accurate data display.
During development, I encountered challenges related to state management and data fetching. I utilized React hooks like `useState` and `useEffect` to manage application state efficiently. This process enhanced my understanding of React's lifecycle and improved my ability to manipulate state based on user interactions.
Learning Outcomes
One of the most significant lessons from this project was the importance of user feedback. I implemented real-time feedback for users, notifying them if their guesses were correct, which improved engagement. This taught me the value of responsive design and how crucial it is to keep users informed during interactions.
Additionally, I developed my debugging and troubleshooting skills. I faced various issues with API integration, particularly regarding data formatting and error handling. By addressing these challenges, I became more proficient in using developer tools and interpreting error messages, which significantly enhanced my problem-solving capabilities.
Core Feature Development
As the sole developer, I was responsible for implementing all aspects of the game, including the user interface for selecting movies and the logic for comparing their ratings. My goal was to create a clean, intuitive design that allowed users to navigate the game effortlessly.
In the game, users are presented with two movies and prompted to guess which one has a higher IMDb rating. I developed the comparison logic and implemented real-time feedback based on users guesses, significantly enhancing the game's interactivity.
Score Tracking
To increase user engagement, I implemented a scoring system that tracks correct guesses and displays the score at the end of each game. I achieved this by utilizing local storage to save the user's score, enabling them to keep track of their progress and encouraging repeated gameplay.
Hosting
To make HigherLowerMovies accessible to users, I chose to host the application on Netlify. The deployment process was straightforward, allowing me to connect my GitHub repository directly. With Netlify’s continuous deployment feature, any updates made to the repository automatically reflected on the live site. This ensured that users always had access to the latest version of the game without any manual uploads.
Netlify also provided features such as a custom domain, SSL certificates for secure connections, and easy management of site settings, which further enhanced the deployment experience. By using Netlify, I ensured that HigherLowerMovies runs smoothly and is readily available for users to enjoy.
Visit the Project
The Github Repository can be found here: HigherLowerMovies.