Post Content
Learn how to use React Native to build a sophisticated MacOS app that allows users to search and explore books using the Google Books API and manage their personal bookshelves. You’ll also implement AI-powered summaries and ensure smooth navigation and state management. By the end, you’ll have a fully integrated app with advanced features and understand how to build your own MacOS applications.
Course created by Brijen Makwana.
? Source Code: https://github.com/BrijenMakwana/read-scout
Contents
(0:00:00) Book Management MacOS App (React Native)
(0:01:29) Setup React Native on your Mac
(0:02:31) Initialize the Project
(0:06:11) Cleanup the Project
(0:09:21) SearchBar Component
(0:16:15) Intro to Google Books API
(0:16:58) Use Postman to test the API
(0:18:29) Integrate Google Books API in the Project
(0:24:28) Setup Tanstack Query
(0:28:41) useSearch Custom Hook
(0:34:07) BookItem Component
(0:44:31) Render Books on Home Screen
(0:48:42) Add support for Icons in the Project
(0:51:17) Rating in BookItem
(0:55:58) Setup React Navigation
(0:58:50) Add new Route for Book Screen
(1:04:37) useBook Custom Hook
(1:09:19) Implement Book Screen
(1:31:38) Add types to React Navigation
(1:34:52) SelectBookShelf Component
(1:44:47) Add new Route for Bookshelves Screen
(1:51:39) SegmentedButtons Component
(2:02:35) Intro to Zustand
(2:04:34) Setup Zustand
(2:09:04) Zustand store for Bookshelves
(2:15:30) BookShelfItem Component
(2:18:02) Render Books on Bookshelves Screen
(2:23:41) Implement update book in Zustand
(2:26:31) Implement remove book in Zustand
(2:33:22) Implement Local Storage Support
(2:41:11) AI Book Summary
(2:44:44) Setup Google Generative AI
(2:47:00) useAI Custom Hook
(2:55:21) Outro
? Thanks to our Champion and Sponsor supporters:
? davthecoder
? jedi-or-sith
? 南宮千影
? Agustín Kussrow
? Nattira Maneerat
? Heather Wcislo
? Serhiy Kalinets
? Justin Hual
? Otis Morgan
? Oscar Rahnama
—
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news Read More freeCodeCamp.org
#programming #freecodecamp #learn #learncode #learncoding
+ There are no comments
Add yours