Lynx Game Search

You can watch the tutorial on freeCodeCamp.org YouTube channel where I teach how to build this project.

Table of contents

• Overview
• Screenshots
• Run the project
• Built with

Overview

About the App

Lynx Game Search, built with Lynx by ByteDance, is a comprehensive app designed to provide users with detailed information about various video games, including game covers, ratings, release dates, screenshots, genres, platforms, developers, and similar games. It also features a list of upcoming and ongoing gaming events, categorized game lists, and a robust search functionality.

Key Features

• Game Details

  • Displays video game cover, rating, release date, screenshots, genres, platforms, developers, and similar games.

• Gaming Events

  • Lists upcoming and ongoing gaming events.
  • Shows event logos, descriptions, and associated games.

• Game Categories

  • Currently Popular – Trending games based on engagement.
  • Recently Released – Highly rated games from the last three months.
  • Top-Rated (All Time) – Games with a rating of 9+.
  • Most Anticipated – Upcoming games sorted by hype.

• IGDB API Integration

  • Integrates with the IGDB API, owned by Twitch, to fetch comprehensive game data.

• Search Functionality

  • Users can search for any video games in the search screen.
  • All video games matching the search query will be fetched and displayed.

• Lynx Dual Thread Architecture

  • Main Thread: Handles all UI-related tasks to ensure smooth and responsive user interactions.
  • Background Thread: Manages data fetching and processing to keep the main thread free for UI updates.
  • Direct Element Manipulation: Allows direct manipulation of element properties using the main thread for immediate visual updates.

• Navigation:

  • react-router is used to manage multiple screens and facilitate smooth navigation between them.

• Data Fetching:

  • TanStack Query is used for data fetching and caching, ensuring efficient and reliable data management.

• TypeScript:

  • The app is developed using TypeScript for type safety and better code maintainability.

Screenshots

Run the project

First you need to have node install in your machine to run this project. Clone this project and open it on any Code Editor or IDE.

For detailed instructions on how to install the Lynx Explorer sandbox app to the simulator for testing the app, please refer to this link

Visit IGDB API Documentation and follow the instructions there to obtain an IGDB API key.

Now run this command. It will install all the dependencies in your project.

npm install

Then run this commands to start the project.

npm run dev

Built with

• Lynx
• ReactLynx
• Typescript
• react-router
• tanstack-query