Lynx Tutorial – JS Framework for Cross Platform Development

Lynx is a framework similar to React Native. In this course you will learn to build a game search application using Lynx, ByteDance's newly open-sourced cross-platform framework that delivers native performance with modern development practices. This comprehensive course guides you through setting up a Lynx project, implementing API integration, and mastering Lynx's unique dual-thread architecture for optimal performance. This tutorial provides an essential introduction to Lynx's UI components, state management with TanStack Query, and navigation implementation using React Router. ✏️ Course created by Brijen Makwana. 💻 Source Code: https://github.com/BrijenMakwana/lynx-game-search ❤️ Try interactive JavaScript courses we love, right in your browser: https://scrimba.com/freeCodeCamp-JavaScript (Made possible by a grant from our friends at Scrimba) ⭐️ Contents ⭐️ (0:00:00) Video Game Search Mobile App (Lynx) (0:01:49) Initialize the project (0:03:11) Setup Lynx Explorer App for the Testing (0:05:08) Understand the Project Structure (0:06:08) Setup Lynx Dev Tools (0:07:56) Cleanup the Project (0:10:17) GameCard Component (0:15:25) GameCategory Component (0:23:06) Intro to IGDB API (0:24:55) Use Postman to test IGDB API (0:29:12) Queries for Game Categories (0:33:22) Setup Tanstack Query (0:34:59) useGameQuery Custom Hook (0:42:30) Fetch images from IGDB API (0:45:10) Event Listeners in Lynx (0:46:13) Setup React Router (0:47:22) Add New Route for Game Details Screen (0:57:59) useGame Custom hook (1:05:57) Working on the Game Details Screen (1:27:44) GameList Component (1:29:51) Implementing Loader (1:32:15) Add CSS Animations (1:33:49) Run Code in the Main Thread because of the Dual Thread Architecture of Lynx (1:38:54) useGameEvents Custom Hook (1:41:29) GameEvents Component (1:45:29) EventCard Component (1:53:36) Add New Route for Game Event Screen (1:56:49) useGameEvent Custom Hook (2:00:46) Working on the Game Event Screen (2:07:05) Add New Route for Game Search Screen (2:12:32) Working on the Game Search Screen (2:13:04) Handle Input in Lynx (2:19:45) useSearch Custom Hook (2:24:53) Display Games in Search Screen (2:29:00) Outro 🎉 Thanks to our Champion and Sponsor supporters: 👾 Drake Milly 👾 Ulises Moralez 👾 Goddard Tan 👾 David MG 👾 Matthew Springman 👾 Claudio 👾 Oscar R. 👾 jedi-or-sith 👾 Nattira Maneerat 👾 Justin Hual -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news