Full-Stack E-commerce Mobile App: React Native & Node. js
Qais Hani
Ve esta clase y miles más
Ve esta clase y miles más
Lecciones en esta clase
-
-
1.
Promotional Video & Class Demo
1:38
-
2.
Setting Up Development Environment & Essential Prerequisites - Made with Clipchamp
2:54
-
3.
Setting Up Our Express Backend
5:13
-
4.
Install Mongoose and Product Model
8:49
-
5.
Building Our Product API - Controllers Part 1
9:43
-
6.
Building Our Product API - Controllers Part 2
8:59
-
7.
Building Our Product API - Controllers Part 3
7:23
-
8.
Connecting Products to Our API - Product Routes
5:21
-
9.
Setting Up Our Database - MongoDB Atlas & Connection
7:09
-
10.
Building Our User Data Model
7:23
-
11.
Secure User Sessions with JWTs - Generating Our Authentication Token
6:03
-
12.
Managing Users Controller Authentication, Registration, and Profiles Part 1
10:47
-
13.
Managing Users Controller Authentication, Registration, and Profiles Part 2
9:40
-
14.
Managing Users Controller Authentication, Registration, and Profiles Part 3
10:24
-
15.
Connecting Users to Our API - User Routes
4:52
-
16.
Implementing Authentication Middleware - Protecting Our Routes
7:22
-
17.
Securing Our API - Applying Authentication and Admin Middleware
5:11
-
18.
Enhancing Our Backend - CORS, Cookie Parsing
2:53
-
19.
Seeding Our Database - Importing Sample Data
12:06
-
20.
Fix Bugs
7:34
-
21.
Install Expo App And Run It
4:30
-
22.
Expo App Setup - Root Layout And Tab Layout
12:05
-
23.
Start With Redux Toolkit - Base API Slice
-
24.
Redux Toolkit - Products API Slice And Store Configuration
10:27
-
25.
Build Our First React Native Component - Rating
6:37
-
26.
Message Component
7:23
-
27.
Building the Product Component Part 1
10:05
-
28.
Building the Product Component Part 2
11:05
-
29.
Crafting the Dynamic Header Component Part 1
8:47
-
30.
Crafting the Dynamic Header Component Part 2 - Made with Clipchamp
10:58
-
31.
Crafting the Dynamic Header Component Part 3
13:15
-
32.
Implementing the Home Screen Part 1
8:30
-
33.
Implementing the Home Screen Part 2
11:32
-
34.
Implementing the Home Screen Style
10:07
-
35.
Building the Product Details Screen Part 1
9:30
-
36.
Building the Product Details Screen Part 2
11:15
-
37.
Building the Product Details Screen Part 3 - Image Card Component
8:28
-
38.
Building the Product Details Screen Part 4 - Product Details Card Component
10:11
-
39.
Building the Product Details Screen Part 5 - Image Card Component
7:26
-
40.
Building the Product Details Screen Part 6 - Image Card Component Styles
11:43
-
41.
Advanced Cart Management - Redux Slice with AsyncStorage Persistence Part 1
7:21
-
42.
Advanced Cart Management - Redux Slice with AsyncStorage Persistence Part 2
14:54
-
43.
Integrating Cart Functionality into Header and Product Details
10:43
-
44.
Building the Cart Screen Part 1
11:16
-
45.
Building the Shopping Cart Screen Part 2
10:39
-
46.
Building the Shopping Cart Screen Part 3
9:53
-
47.
Building the Shopping Cart Screen Part 4
12:02
-
48.
Setting Up User Authentication (Auth Slice and API Endpoints)
12:45
-
49.
Persisting Our Redux Store - Integrating Redux-Persist for Auth and Cart
10:38
-
50.
Implementing the User Login Screen Part 1
9:57
-
51.
Implementing the User Login Screen And Form Container Component Part 2
9:55
-
52.
Implementing the User Login Screen Part 3
10:43
-
53.
Implementing the User Login Screen Part 4
10:28
-
54.
Implementing the User Login Screen Part 5
12:41
-
55.
Centralized Error Handling Middleware
6:59
-
56.
Building the User Registration Screen Part 1
10:11
-
57.
Building the User Registration Screen Part 2
8:42
-
58.
Integrating Product Reviews Section Part 1
13:47
-
59.
Integrating Product Reviews Section Part 2
7:01
-
60.
Implementing the _Add Review_ Modal and Functionality Part 1
13:37
-
61.
Implementing the Add Review Modal and Functionality Part 2
9:11
-
62.
Implementing the Add Review Modal and Functionality Part 3
13:31
-
63.
Implementing the Shipping Screen Part 1
10:59
-
64.
Implementing the Shipping Screen Part 2
10:48
-
65.
Implementing the Shipping Screen Part 3
10:26
-
66.
Selecting the Payment Method Screen Part 1
-
67.
Selecting the Payment Method Part 2
5:25
-
68.
Designing the Order Model (Mongoose Schema)
10:22
-
69.
Order API Controllers & Price Calculation Utilities Part 1
6:34
-
70.
Order API Controllers Part 2
8:50
-
71.
Order API Controllers Part 3
10:41
-
72.
Order API Controller Part 4
4:36
-
73.
Order API Routes
6:13
-
74.
PayPal Client Configuration
-
75.
PayPal API Routes and Integration Part 1
9:23
-
76.
PayPal API Routes and Integration Part 2
12:10
-
77.
PayPal API Routes and Integration Part 3
3:00
-
78.
Implementing Order API Slice with PayPal Integration Part 1
7:16
-
79.
Implementing Order API Slice with PayPal Integration Part 2
7:55
-
80.
Building the Place Order Screen Part 1
13:33
-
81.
Building the Place Order Screen Part 2
12:47
-
82.
Building the Place Order Screen Part 3
14:37
-
83.
Building the Place Order Screen Part 4
8:01
-
84.
Implementing the Order Screen and PayPal Integration Part 1
-
85.
Implementing the Order Screen and PayPal Integration Part 2
11:32
-
86.
Implementing the Order Screen and PayPal Integration Part 3
14:10
-
87.
Fix Message displaying in Order Screen and Disabled Add To Cart Button
13:17
-
88.
Fix Fragment Error
2:58
-
89.
Building My Orders Screen Part 1
9:55
-
90.
Building My Orders Screen Part 2
5:43
-
91.
Building the _My Orders_ Screen Part 2
13:25
-
92.
Implementing The Profile Screen Part 1
12:49
-
93.
Implementing The Profile Screen Part 2
14:20
-
94.
Implementing The Profile Screen Part 3
7:55
-
95.
Implementing The Account Information Screen Part 1
13:19
-
96.
Implementing The Account Information Screen Part 2
13:08
-
97.
Implementing The Account Information Screen Part 3
9:46
-
98.
Implement Orders List Screen Part 1
14:44
-
99.
Implement Orders List Screen Part 2
13:53
-
100.
Implementing The User List Screen Part 1
13:18
-
101.
Implementing The User List Screen Part 2
13:44
-
102.
Implementing The User List Screen Part 3
5:07
-
103.
Implementing User Details Screen Part 1
12:32
-
104.
Implementing User Details Screen Part 2
14:12
-
105.
Implementing User Details Screen Part 3
6:14
-
106.
Backend - Image Uploads Route with Multer Part 1
6:32
-
107.
Backend - Image Uploads Route with Multer Part 2
8:40
-
108.
Implementing The Product List Screen Part 1
14:11
-
109.
Implementing The Product List Screen Part 2
14:03
-
110.
Implementing The Product List Screen Part 3
8:00
-
111.
Implementing The Product List Screen Part 4
7:27
-
112.
Implementing The Product Edit Screen Part 1
8:20
-
113.
Implementing The Product Edit Screen Part 2
8:04
-
114.
Implementing The Product Edit Screen Part 3
13:31
-
115.
Implementing The Product Edit Screen Part 4
13:58
-
116.
Implementing The Product Edit Screen Part 5
7:09
-
117.
Implementing The Product Edit Screen Part 6
18:12
-
118.
Replacing React Navigation with Expo Router in Our App
5:55
-
119.
Layout Screens Fix And Add Loaders in Product List Screen
5:10
-
120.
Outro & Resolving Expo SDK Incompatibility Issues
2:04
-
-
- --
- Nivel principiante
- Nivel intermedio
- Nivel avanzado
- Todos los niveles
Generado por la comunidad
El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.
14
Estudiantes
--
Proyectos
Acerca de esta clase
Class Overview:
Ready to build a fully functional, real-world e-commerce mobile application? In this comprehensive class, you'll master the art of full-stack development using React Native for a stunning mobile frontend and Node.js, Express.js, and MongoDB for a robust backend. You'll gain hands-on experience by coding a complete e-commerce solution from scratch, giving you practical skills that are highly in demand.
What You Will Learn:
- Build a professional React Native mobile frontend with dynamic product displays and user interfaces.
- Develop a powerful Node.js/Express.js backend to handle API requests and data management.
- Integrate MongoDB for efficient and scalable database storage.
- Implement secure user authentication including registration, login, and private routes.
- Create a comprehensive admin panel for managing products (create, read, update, delete).
- Enable seamless product image uploads directly from the mobile app to the server.
- Process payments securely via integrated options like PayPal or credit card.
Understand and implement RESTful API integration between your mobile app and backend.
Why You Should Take This Class:
In today's digital world, mobile e-commerce is booming, and the demand for developers who can build these applications is at an all-time high. This class provides you with the end-to-end knowledge needed to launch your own mobile store or contribute to significant projects. You'll gain invaluable full-stack mobile development skills that are directly applicable to the job market. By building a complete project, you'll not only understand how all the pieces fit together but also develop strong problem-solving abilities. As an experienced full-stack web and mobile developer, I'm passionate about sharing practical knowledge and guiding you through every step of this exciting journey.
Who This Class is For:
This class is perfect for aspiring mobile developers and full-stack developers who have a foundational understanding of JavaScript (ES6+). If you're familiar with basic React concepts (components, props, state) and have some exposure to command-line tools and HTTP methods, you'll get the most out of this class. It's ideal for anyone looking to build a significant portfolio project, expand their skillset into mobile development, or gain a holistic view of building a modern application.
Materials/Resources:
To follow along with this class, you will need:
- A computer capable of running Node.js (LTS version recommended).
- VS Code (Visual Studio Code) as your primary code editor.
- An Android or iOS device with the Expo Go app installed, or a reasonably powerful PC for running an Android emulator.
Conoce a tu profesor(a)
As a full-stack web and mobile developer, I have a deep passion for crafting robust and user-friendly applications. My expertise lies in leveraging the MERN stack (MongoDB, Express.js, React.js, Node.js) to build scalable and efficient web solutions. I'm also proficient in React Native, enabling me to develop powerful cross-platform mobile applications with native performance and modern design.
I'm excited to share my knowledge and guide you step-by-step through the process of building your own professional online store. Whether your goal is to strengthen your frontend skills, dive into mobile development, or grasp the entire lifecycle of an application, this journey is designed to empower you to bring your innovative ideas to life. Let's embark on this learning adventure togethe... Ver perfil completo
Proyecto de clase práctica
Build your very own functional E-commerce Mobile App, complete with secure payment processing, user authentication, and product management features!
In this class, your project will be to develop a full-stack e-commerce mobile application using React Native for the frontend and Node.js, Express.js, and MongoDB for the backend. This project is designed to give you hands-on experience in every core aspect of building a modern mobile commerce platform.
Clarify the Steps:
- Set Up Your Environment: Configure your development tools, including Node.js, VS Code, and Expo, ensuring your local setup is ready to build mobile apps.
- Develop the Backend API: Create robust RESTful APIs using Node.js, Express.js, and MongoDB for handling users, products, orders, and image uploads.
- Build the React Native Frontend: Design and implement the mobile application's user interface, including navigation, product displays, and user profiles.
- Implement User Authentication: Integrate secure user registration and login functionalities, allowing users to interact with the app.
- Create Admin Product Management: Develop a dedicated section for administrators to add, edit, and delete products, including image uploads.
- Integrate Payment Processing: Implement a secure payment gateway for transactions via PayPal or credit card.
- Connect Frontend & Backend: Integrate your React Native mobile app with the backend APIs, ensuring seamless data flow and functionality.
Define the Final Deliverable:Your final deliverable for this project will be your fully functional React Native E-commerce Mobile App. You should upload screenshots or a short video demonstrating your app running, showcasing:
- The user login/registration process.
- The product listing screen.
- A product detail page.
- The payment processing flow (e.g., successful checkout).
- (If applicable) A glimpse of the admin product management screen with an item successfully added or edited.
Valoración de la clase
¿Por qué unirse a Skillshare?
Mira las galardonadas Skillshare Originals
Cada clase tiene lecciones cortas y proyectos prácticos
Tu membresía apoya a los profesores de Skillshare
Aprende desde cualquier lugar
Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.
Clases relacionadas
