Build A Full Stack React Native E-commerce App in 1 video (2024) | Node.js | MongoDB & more | 🤐

Published: 14 July 2024
on channel: Dev Minds

14,132

298

#reactnative #fullstackreactnativeapp #devminds #reactnativetutorial #Build_Practice #coding #appdevelopment #mobileappdevelopment #mobileappdev

Let's build a full stack e-commerce app with react native:)
Tech Stack:
React Native,
NativeWind(Tailwind CSS),
Node.js,
Express.js,
MongoDB

🔗 Links - Clickable Links in the first comment:
Starter GitHub Code: github.com/Abdullah0Dev/stylish-starter
GitHub Code (give it a star ⭐): github.com/Abdullah0Dev/stylish
☝☝Assets + Figma Design Link + Code ☝☝
MORE IN THE FIRST COMMENT!

⏰ Time Stamps - To Save Your Time:

00:00:00 - 📜 Overview
00:01:55 - ⚙️ Installation & Setup
00:04:00 - 🚀 Onboarding Screen
00:08:23 - 🔑 Signup/Login Screen
00:31:10 - 🖥️ Onboarding Screen (React Native)
00:36:18 - 🏠 Home Screen Tab (React Native)
00:38:20 - 🔍 Custom Reusable Search Component (React Native)
01:00:46 - 🛍️ Product Item Reusable Component
01:19:02 - 📝 Product Item Details (Master React Native Routing)
01:42:26 - ⚙️ Setting Tab
01:57:05 - 🛠️ Custom Wrapper to Fix Virtualization Error
01:59:01 - 💾 Setup Backend (.env with MongoDB URL)
01:59:56 - 🌐 Backend - Index.js (Create Express Route & Connect to MongoDB)
02:02:10 - 🛠️ Create Product API Backend (Real-time CRUD Updates)
02:15:25 - 🔍 Test API with Postman or RapidAPI Client
02:20:26 - 🛠️ Finalize Front-end (Make Onboarding Appear Once with AsyncStorage)
02:27:05 - 📡 Use Real Data from Backend (React Native API Integration)
02:31:38 - 🔚 Final Overview & Outro

🎯 𝘼𝙢𝙖𝙯𝙤𝙣 𝘼𝙨𝙨𝙤𝙘𝙞𝙖𝙩𝙚𝙨 𝙋𝙞𝙘𝙠𝙨 𝙛𝙤𝙧 𝘿𝙚𝙫𝙚𝙡𝙤𝙥𝙚𝙧𝙨!

Looking to level up your dev setup? 🖥️ Check out these must-haves:

1. Magic Mouse 🖱️
Perfect for smooth scrolling and multi-touch gestures!
White: https://amzn.to/3SSJK5c
Black: https://amzn.to/3YMuzhL

2. Magic Keyboard
Sleek and responsive, making typing a breeze!
White: https://amzn.to/3YQsotE
Black (like mine!): https://amzn.to/4dmMLTw

3. MacBook 💻
On a budget? This MacBook gets the job done without breaking the bank: https://amzn.to/3WTP7Cr

4. Mac Mini 🔥
Highly recommended! Even the lower model is a beast for coding: https://amzn.to/4dqwGMN

5. Extra Monitor 📺
More screen, more productivity! https://amzn.to/4g6m2w6

6. iPhone 12 for Testing 📱
Test your apps like a pro on this reliable device: https://amzn.to/4e2xBCN

Got a business query? Need an app or website? Hit me up! 📩 [email protected]
Let's Do it:)

_____________
keywords:
React Native cli project, react native project, react native cli project for beginners, react native for beginners, build an e-commerce app from scratch, build an ecommerce app with react native, react native app, build react native app, Full stack react native app, Full stack React native app Build & Practice, dev minds, devminds, Dev Minds, dev minds react native, How to create nodejs api from scratch, how to create backend app, how to build a full stack app, node.js projects, React Native API integration, REST API