Summary
Keywords
Full Transcript
📲 Build your UI faster and more efficiently with Gluestack. Start using it for free today: https://bit.ly/3zMmBeA ⭐ Want to make deployment effortless? Try Genezio to simplify scaling and deploying your API. Sign up for free: https://bit.ly/483mM1F In this tutorial, we’ll build the frontend UI for our ecommerce application using React Native, Expo, and Gluestack. You’ll learn how to design a beautiful, responsive interface while integrating with the REST API we created in part one. We’ll also cover managing server-side data with TanStack Query to keep everything efficient and responsive. Let's get started 1️⃣ Watch part one on building a scalable API with NodeJS here: https://youtube.com/live/RDM-nk5f4SE *📝 Project Page:* https://notjust.dev/projects/ecommerce-app-ui *📃 Guide:* https://assets.notjust.dev/ecom *💻 Source Code:* https://github.com/notJust-dev/FullstackEcommerce ⚛️ *React Native Mastery* is the *ONLY* course you need to Master mobile development with React Native & Expo 🚀 *Join the waitlist now:* https://www.notjust.dev/react-native-mastery 📚 This video includes a lot of tools and technologies, providing an excellent opportunity to learn about: - React Native: Build cross-platform mobile apps with ease. - Expo: Simplify development and testing with Expo's powerful toolchain. - Expo Router: Manage navigation between screens effortlessly. - Gluestack: Design a professional UI with Gluestack's flexible components. - TanStack Query: Handle data fetching and caching for seamless integration with the backend. - REST API Integration: Connect the UI with the backend API for products and orders, built in part one. 💡 Have an idea for a future tutorial? Share it on our Idea Board: https://github.com/orgs/notJust-dev/discussions *💬 Join the notJust Development gang and let's build together:* Twitter: https://twitter.com/VadimNotJustDev Instagram: https://www.instagram.com/VadimNotJustDev Facebook: https://www.facebook.com/notjustdev LinkedIn: https://www.linkedin.com/in/vadimsavin Discord: https://discord.gg/VpURUN2 Timecodes: 0:00 Intro and Project Overview 4:51 Step-by-step Guide & Project Demo 6:22 Tutorial Series Setup 8:10 Get Started with the Project 13:52 Setup Expo Router 29:50 Import the Dummy Data 32:25 Setup the Products List Structure 40:21 Setup Gluestack 51:25 Render the Products List 1:06:21 Implement the Product Details Screen 1:28:53 Fix and Make Web Responsive 1:55:27 Tanstack Query and API Integration 2:28:06 Implement Shopping Cart with Zustand 3:02:51 Build the Login Screen UI 3:14:26 Setup Authenticaton 3:38:18 Adding the Submit Orders Functionality 3:51:51 Outro Disclaimer: This build is for educational purposes only. All views, opinions, and technology choices expressed in this video are my own and do not represent the views, opinions, or technology choices of any entity I have been, am now, or will be affiliated with. #notjustdev #ecommerce #reactnative
