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

Build E-Shop Mobile App with Admin Panel and Authentication using React Native, Redux, Context API and much more
Instructor:
Tiago Pereira
4,634 students enrolled
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

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.

Welcome to the course

1
What are we going to build?

Introduction to the project which we will do in the course , remember: the real experience comes only with the real projects, and this course is a real project!

2
What is MERN Stack?

Technology stack and MERN stack, the general definition. 

3
How to Get the Most of This Course

Its very important to know how to go in this course to get the most of it!

4
Pickup Your Task and We Review it - How this course is interactive?

We are trying to make this course interactive as possible, like the relation between the teacher and the student, we will give you homework and you do it, and get your marks!

5
Join Students Tasks Board - Invitation Link
6
Course Outlines

The main outlines of the course : Building real world application with React native

Tools and Environment

1
Installing NodeJs

How to install Nodejs , or Node Package Manager

2
Installing Expo

Installing Expo!

3
Installing and running Android Studio

Android Studio to run the Android Emulator!

4
Installing and running iOS Simulator

Running the iOS simulator to check your application if its working with iOS

5
Installing our Coding Editor (IDE)

Our Editor and Extensions!

6
Configure MongoDB Atlas

We dont need to use and install special software for hosting our database , MongoDB is now on the Cloud

Working with Backend

1
Introduction

Why do we need the backend!

2
Overview to our RESTful API

We have an eshop , what APi's do we need?

3
Creating the Backend Server with Express

No Application without a server , or web server , here how to configure our API server

4
Reading Environment Variables

Placing the common constants among the application is good idea!

5
Create First API Call & Parsing Json Data

Lets make our first API call , and check if we are able to send and recieve .json data from/to server

6
Logging API Requests

you need to keep on track all the requests which are coming to your API server.

7
Installing Mongoose and Connect to MongoDB Database
8
Read/Write Data to Database Using API

Lets connect the API to the Database!

9
Analysing the E-Shop Database

What is the database structure of our E-Shop?

10
Create Backend API Routes & Schemas

Every API has specific routes to fetch what data are needed from the database, also we need to have the right models which are implementing our database tables to get and insert data to the database

11
Enabling CORS & Why Do We Need It?

A common security error can raise when you start your project is the CORS, here how to bypass it.

Backend: Products & Categories

1
Introduction
2
Products Model & Scheme
3
Categories Model & Scheme
4
Add and Delete Categories
5
Get Categories and Category Details
6
Update Category
7
Post a New Product REST API
8
Get a Product & List of Products REST API
9
Population of Category in Get a Product API
10
Update a Product REST API
11
Delete a Product REST API and Validate Id
12
Get Products Count for Statistics Purposes
13
Get Featured Products REST API
14
Filtering and Getting Products by Category
15
Changing "_id" key to "id" - more frontend friendly
16
Section Code

Backend : Users & Authentication

1
Introduction
2
Post/Register a New User REST API
3
Users Model & Schema
4
Hashing the User Password
5
Get User and List of Users Excluding Password
6
Login a User REST API & Creating a Token
7
Protecting the API and Authentication JWT Middleware
8
Authentication Error Handling
9
Excluding REST API Routes From Authentication
10
Add More Secret User Information to Token
11
Users & Admins - User Role
12
Get User Count REST API
13
Section Code

Backend: Orders

1
Introduction
2
Orders & Order-Items Model & Scheme
3
Array of Refs - Example of Link Order to Order Items to Products
4
New Order & Create Order Items on Posting New Order
5
Get Order Detail and Populate Products in Order Items and User Data
6
Update Order Status & Delete Order
7
Delete Order Items after Deleting the Order
8
Explaining the Solution
9
Calculating Total Price of one Order
10
Get Total E-Shop Sales using $sum
11
Section Code

Backend: Product Image & Gallery Upload

1
Introduction
2
Configure Server Side Upload
3
Testing Image Upload with Postman
4
Validating Uploaded File Types
5
Image Upload With Product Post Request
6
Product Gallery Multiple Images Upload
7
Excluding Uploads Folder From Authentication
8
Section Code

React Native Fundamentals: Todo List

1
React Native Fundamentals

What is React Native? Get an overview of the Fundamentals

2
Project Setup and Folder Structure

Start a new React Native project and get to know the folder structure of a project generated with Expo

3
Components

Components are the building blocks of any Javascript framework.

Create and understand your first React Native Component.

4
State

Learn to manage the state of an application with with the state in-built feature from React

5
Props

Learn to pass data between components with the Props feature

6
Style

In this lecture the student will learn how to style a React Native components with inline Style and the StyleSheet


7
ScrollView and TextInput

Learn the ScrollView container in a React Native App for scrolling in a mobile device and also how to make use of the Input

8
Get User Orders
9
Add Item

Write your first method to add an item to our List

10
Delete Item

Delete an item from our To Do List

11
Expo Menu

Overview of the options in the Expo simulator menu

12
Section Code

Easy Shop: Products

1
Intro and Folder Structure

Create our ecommerce app and also the folder structure we will use in it.

2
FlatList Products

Add our first products and show them through the newly introduced FlatList.

3
Product List

Continuing to configure our product list with styling and new methods.

4
Product Card

Create our Product Card and add it to our List.

5
Header

Generate and Style and Header that we will use in the entire React Native app.

6
Native Base

Learn how to use a third party UI library, Native Base, in our React Native App.

7
Searched Product

Introduce the method to search for products through keywords typed in an input.

8
Search List

Render a new list with the elements filtered by the search keywords

You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!

Be the first to add a review.

Please, login to leave a review
782158196f27534acbc4093531d11c78
Course available for 2 days
30-Day Money-Back Guarantee

Includes

18 hours on-demand video
22 articles
Full lifetime access
Access on mobile and TV
Certificate of Completion

External Links May Contain Affiliate Links read more

Join our Telegram Channel To Get Latest Notification & Course Updates!
Join Our Telegram For FREE Courses & Canva PremiumJOIN NOW