MERN Stack E-Commerce Mobile App with React Native [2023]

Build E-Shop Mobile App with Admin Panel and Authentication using React Native, Expo, Redux, Context API and much more

4.42 (1080 reviews)
Udemy
platform
English
language
Mobile Apps
category
instructor
19,915
students
18.5 hours
content
Jul 2023
last update
$74.99
regular price

What you will learn

Build a Great eCommerce Mobile Application with React Native, Redux, Node, Express & MongoDB

Develop cross-platform (iOS and Android) mobile apps without knowing Swift, ObjectiveC or Java/ Android

An actual real-world project built in a linear and progressive manner

Great Division of the course so you can pick up FullStack, Frontend or Backend

Admin area to manage customers, products & orders from mobile phone!

Product search, carousel & more

Learn NodeJS API (Backend) Development

Learn to Implement Authentication based on JWT

Understand the terminology and concepts of Redux

Get up to speed with React design principles and methodologies

Make truly reusable components that look great

Discover mobile design patterns used by experienced engineers

Description

Building cross-platform mobile apps has become less time consuming and more effective with one of the most popular frameworks, React Native.

This is not a reading documentation course. You have here a real-world project to learn from, and you will see the exact place of every feature of every technology used in this course.

You will learn how to build a Mobile Application for iOS and Android with MERN stack using React Native.

In this course you will learn to use technologies like:

- React Native

- NodeJs

- Express

- MongoDB

- Redux

- Context API

- React Navigation

- Styled Components

- And Native Base


You will learn the basics of building React Native apps. First, you will discover how to set up your environment in record time, including how to debug and run your app on your phone. Then, you will explore the React Native component library and how to style your layouts for a great feel. Finally, you will delve into how to call an HTTP API from your app.

When you’re finished with this course, you will have the basic skills and knowledge of React Native needed to tackle profitable, cross-platform mobile projects without learning at least two new programming languages.


Also, this course is a perfect to the concepts of server-side web development. You’ll learn the different parts that make up the back-end of a website or web application, and you’ll gain familiarity with the Node.js runtime environment. After this course, you’ll be set up to explore popular Node frameworks like Express.js to build great API's.

You learn in this course how to use mongoDb without any installing extra tools, MongoDB is now on cloud, so you will store your database in safe place!


The main features:

  • Full featured shopping cart

  • Top products carousel

  • Product pagination

  • Product search feature

  • User profile with orders

  • Admin product management

  • Admin user management

  • Admin Order details page

  • Changing the orders states (shipped, delivered ..)

  • Checkout process (shipping, payment method, etc)

  • Using Database in the cloud

  • and much more ...


And not only this, you will have optional tasks to do and we can review them for you! Just pick up one task from the board and create the pull request to get the review, to be like in a real world experience!

After this course you will have a full working e-commerce iOS and Android App that you can use or add to your portfolio.

Content

Welcome to the course

What are we going to build?
What is MERN Stack?
How to Get the Most of This Course
Pickup Your Task and We Review it - How this course is interactive?
Join Students Tasks Board - Invitation Link
Course Outlines

Tools and Environment

Installing NodeJs
Installing Expo
Installing and running Android Studio
Installing and running iOS Simulator
Installing our Coding Editor (IDE)
Configure MongoDB Atlas

Working with Backend

Introduction
Overview to our RESTful API
Creating the Backend Server with Express
Reading Environment Variables
Create First API Call & Parsing Json Data
Logging API Requests
Installing Mongoose and Connect to MongoDB Database
Read/Write Data to Database Using API
Analysing the E-Shop Database
Create Backend API Routes & Schemas
Enabling CORS & Why Do We Need It?

Backend: Products & Categories

Introduction
Products Model & Scheme
Categories Model & Scheme
Add and Delete Categories
Get Categories and Category Details
Update Category
Post a New Product REST API
Get a Product & List of Products REST API
Population of Category in Get a Product API
Update a Product REST API
Delete a Product REST API and Validate Id
Get Products Count for Statistics Purposes
Get Featured Products REST API
Filtering and Getting Products by Category
Changing "_id" key to "id" - more frontend friendly
Section Code

Backend : Users & Authentication

Introduction
Post/Register a New User REST API
Users Model & Schema
Hashing the User Password
Get User and List of Users Excluding Password
Login a User REST API & Creating a Token
Protecting the API and Authentication JWT Middleware
Authentication Error Handling
Excluding REST API Routes From Authentication
Add More Secret User Information to Token
Users & Admins - User Role
Get User Count REST API
Section Code

Backend: Orders

Introduction
Orders & Order-Items Model & Scheme
Array of Refs - Example of Link Order to Order Items to Products
New Order & Create Order Items on Posting New Order
Get Order Detail and Populate Products in Order Items and User Data
Update Order Status & Delete Order
Explaining the Solution
Calculating Total Price of one Order
Get Total E-Shop Sales using $sum
Section Code

Backend: Product Image & Gallery Upload

Introduction
Configure Server Side Upload
Testing Image Upload with Postman
Validating Uploaded File Types
Image Upload With Product Post Request
Product Gallery Multiple Images Upload
Excluding Uploads Folder From Authentication
Section Code

React Native Fundamentals: Todo List

React Native Fundamentals
Project Setup and Folder Structure
Components
State
Props
Style
ScrollView and TextInput
Get User Orders
Add Item
Delete Item
Expo Menu
Section Code

Easy Shop: Products

Intro and Folder Structure
FlatList Products
Product List
Product Card
Header
Native Base
Searched Product
Search List
LogBox
Banner
Section Code

Easy Shop: Categories

Categories
Category Filter
Category Badges
Category Container
Section Code

React Navigation

React Navigation
Installing React Navigation
Bottom Tab Navigation
Navigation with Route Params
Single Product
Section Code

Redux

What is Redux?
Installing Redux Dependencies
Redux Store
Cart Items Reducer
Cart Actions
Section Code

Easy Shop: Cart

Add Items To Cart
Cart Item
Bottom Container
Cart Icon
Clear Cart
Remove Single Item from Cart
Section Code

Checkout

Checkout Navigator
Custom Form
Shipping Page
Payment Page
Confirm Page
Confirm Items
Section Code

Connecting to our server

Base URL
Application Data
Connect Products
Connect Categories
useFocusEffect and useCallback
Activity Indicator
Deploying our server to Heroku with GitHub [OPTIONAL]
Section Code

Easy Shop: User & Authentication

User Navigator
Login Screen
Handling Submit
Error
Register Screen
Register User
Toast
Adding Toast to the entire App
Section Code

Context API

Intro
Installing Dependencies
Actions
Reducer
isEmpty
Store
Adding Context to Login
Profile Page
Section Code

Easy Shop: Admin Panel [Part 1]

Admin Navigator
Product List Setup
Product List
List Item
List Item Styling
List Header
Product Filter
Modal
Section Code

Styled Components

Intro
Easy Button
Adding Easy Button to Modal
Adding Easy Button to rest of the App
Traffic Light
Using Traffic Light
Section Code

Easy Shop: Admin Panel [Part 2]

Delete Item
Button Container
Product Form
Category Picker
Categories Button Container
Access Photo Library
Add Products
Upload Image
Update Product
Categories
Category Item
Add Category
Delete Category
Section Code

Easy Shop: Orders

Confirm Order
Orders
Order Card
Order Status
Cart Button Check
Update Status
User Orders
Edit Mode
Section Code

Finishing Up

Icon and Splash Screen
Deploy Android
Deploy iOS
Useful Links
Conclusion

Screenshots

MERN Stack E-Commerce Mobile App with React Native [2023] - Screenshot_01MERN Stack E-Commerce Mobile App with React Native [2023] - Screenshot_02MERN Stack E-Commerce Mobile App with React Native [2023] - Screenshot_03MERN Stack E-Commerce Mobile App with React Native [2023] - Screenshot_04

Reviews

Huy
November 8, 2023
Can not follow the course on the session of react native app, because it was outdated for native-base
Panneer
May 10, 2023
course is very nice for backend part, you can learn and become master level in Mongo db, express JS and node JS. When comes to React native its intermediate level. Over all its worth of time and very usefull.
Gurpreet
May 10, 2023
Course is outdated, Lot of bugs, used functionalities and libraries are no longer existing. Complete waste of time and money.
Kevin
February 13, 2023
The course is very handy and easy to step forward, also the most important thing for me is being practical by presenting short clips. Thank you
Khaled
December 27, 2022
MERN Stack E-Commerce Mobile App with React Native [2022] The worst course I have been ever. bad explain, no one answer, very old method.. I sorry that I paid money for this sh**it .... plz be carefull before buy ... and the one star is just to write my comment.. this course deserve less than - START
teamrenee
November 17, 2022
The course is completely outdated and bugs everywhere. The title tricks you by saying 2022, but it’s far from it. The instructors haven’t been answering any questions for over a year.
Teeradet
October 6, 2022
The content and teaching are very good. but have been using it for many years Should update the video to a new one, it would be great.
Joe
October 5, 2022
This is not very current as many of the libraries are versions ahead and the steps have changed. In addition, he skips over how to install xcode for windows. Even after reading all the websites I can't tell if I have to install MAC OS or a vitual machine or a ios simulator or emulator. There really needs to be a lot more around that as not doing it correctly could really mess up my PC.
Waseem
July 20, 2022
Very Structured and Organised course! Instructor has made it very simple to understand my nightmare i.e backend
Saumit
January 30, 2022
This is a very nice course for mobile app development with mern and the teachers explain very well but i hate this course's QandA i dont know hwy but i have never got a response to my question for 3 weeks so at last i solved it on my own so i tell that this course is not for beginners you need the knowledge of problem solving and i give it a 4 star because it is missing product update through admin side and also admins cant see what are the products in the order.But i am happy with the rest of features and knowledge i got.
Ustat
January 16, 2022
Not a great reference resource which gives you details about the concepts. So you are vulnerable to new ideas of development, this style of explanation puts stones on your learning path. Second things, the REST API developed in this course is not great, doesn't have much validation of data etc. And thirdly, why do you not explain which primitive component we chose to build up our views/layouts. There are potentially more ways of doing something but one could be most efficient. You are not telling which one to choose and why, instead you just write out the code without explanation. And why do you want to use 3rd party front-end library on top of React-Native to build front-end of the course project. If I want to learn that 3rd party library, then I would search for it's courses, not React-Native course.
Rowee
January 11, 2022
I am not yet done but with the 4 sections I've already taken, I can say that this is really a good course. I like how organized they are in the file structuring. I hope I can continue enjoying the course.
Doan
January 5, 2022
Font-end use old version of native base. Can not install the old one. When use the new version from native base, the Header,Content component not more worked. You need completely learn the new component from nativebase yourself. Don't have any explain about useEffect() and lecturer just said, we've already learned from previous lesson. Front-End lecturer just read the code for us, don't even have explanation about the code. Backend is good. Waste of money for Front-End.
Anonymized
December 30, 2021
This is an amazing course for every engineer to get a great foundation on using the MERN stack with react native, and dive into hacking your own projects, simply amazing!!!
ALen
November 29, 2021
So far so good i understood everything in backend this guy made express simple.Great course for people who know basic java script.It's not a complete beginner friendly course so you also have to put an effort keep that in mind .

Coupons

DateDiscountStatus
1/3/2021100% OFF
expired
1/10/202190% OFF
expired
3/3/202190% OFF
expired

Charts

Price

MERN Stack E-Commerce Mobile App with React Native [2023] - Price chart

Rating

MERN Stack E-Commerce Mobile App with React Native [2023] - Ratings chart

Enrollment distribution

MERN Stack E-Commerce Mobile App with React Native [2023] - Distribution chart
3655146
udemy ID
11/23/2020
course created date
1/3/2021
course indexed date
Bot
course submited by