This little project is a comprehensive web application that provides users with a collection of free games. It incorporates several modern web development techniques and tools to ensure a seamless and efficient user experience.
- Fetch API Async/Await: Uses the Fetch API with async/await for handling asynchronous operations, ensuring smooth and efficient data fetching.
- Responsive Design: Fully responsive design to provide an optimal viewing experience across a wide range of devices (desktops, tablets, and mobile phones).
- Loading State: Includes a loading state to enhance user experience during data fetching operations.
- Reactive Input Search: Features a reactive search input that provides instant search results as the user types.
- Pagination: Implements pagination to manage and display large sets of game data effectively.
- Serverless Functions: Utilizes serverless functions to handle backend logic, reducing server maintenance overhead.
- Express: Employs the Express framework for server-side logic and API routes.
- Filters: Implements filters to refine search results based on specific criteria.
- Sorting: Allows users to sort search results based on various criteria, such as release date, popularity, or alphabetical order.
Inspiration and Learning The inception of this little project was driven by my initial experimentation with a free games API. What began as a simple test quickly evolved into a more ambitious endeavor, fueled by my curiosity and desire to enhance my web development skills.
API Key Management One of the key learning experiences was managing an API key securely. Prior to this project, I had never worked on an API project that required an API key. This project provided me with the opportunity to apply best practices for securing API keys in a Node.js and Express environment.
Leveraging the knowledge I gained from learning Node.js and Express a few months ago, I was able to build the server-side logic for this project. It was a rewarding experience to see my theoretical understanding come to life in a practical application.
Deploying the project to Vercel introduced a new set of challenges. Initially, I struggled with deploying a constantly listening server on Vercel. This led me to explore and learn how to implement serverless functions on Vercel, which was a valuable addition to my skill set.
Reactive Input Search Creating a reactive input search was a feature I had never implemented before. I enjoyed the process of making the search functionality responsive and efficient, providing instant feedback as users typed their queries.
Implementing a loading state to enhance user experience during data fetch operations was another new experience. Additionally, I added pagination to effectively manage and display large sets of game data. Both of these features were built using vanilla JavaScript, further solidifying my understanding of core JavaScript concepts.
While I could continue to add more features to this project, I have decided to shift my focus towards learning React. This project has equipped me with a solid foundation in fullstack development, and I am excited to take my skills to the next level with React.
Adding filters to refine search results based on specific criteria was a challenging yet rewarding experience. I developed a deeper understanding of how to manipulate and display data based on user-selected criteria.
Implementing sorting functionality provided users with the ability to organize search results based on various criteria such as release date, relevance, popularity, or alphabetical order. This feature was particularly interesting to develop as it involved creating dynamic and user-friendly interfaces that responded to user selections.
