MERN Stack E-Commerce Mobile App with React Native [2021]
- Description
- Curriculum
- FAQ
- Reviews
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.
-
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
-
7
Installing NodeJs
How to install Nodejs , or Node Package Manager
-
8
Installing Expo
Installing Expo!
-
9
Installing and running Android Studio
Android Studio to run the Android Emulator!
-
10
Installing and running iOS Simulator
Running the iOS simulator to check your application if its working with iOS
-
11
Installing our Coding Editor (IDE)
Our Editor and Extensions!
-
12
Configure MongoDB Atlas
We dont need to use and install special software for hosting our database , MongoDB is now on the Cloud
-
13
Introduction
Why do we need the backend!
-
14
Overview to our RESTful API
We have an eshop , what APi's do we need?
-
15
Creating the Backend Server with Express
No Application without a server , or web server , here how to configure our API server
-
16
Reading Environment Variables
Placing the common constants among the application is good idea!
-
17
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
-
18
Logging API Requests
you need to keep on track all the requests which are coming to your API server.
-
19
Installing Mongoose and Connect to MongoDB Database
-
20
Read/Write Data to Database Using API
Lets connect the API to the Database!
-
21
Analysing the E-Shop Database
What is the database structure of our E-Shop?
-
22
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
-
23
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.
-
24
Introduction
-
25
Products Model & Scheme
-
26
Categories Model & Scheme
-
27
Add and Delete Categories
-
28
Get Categories and Category Details
-
29
Update Category
-
30
Post a New Product REST API
-
31
Get a Product & List of Products REST API
-
32
Population of Category in Get a Product API
-
33
Update a Product REST API
-
34
Delete a Product REST API and Validate Id
-
35
Get Products Count for Statistics Purposes
-
36
Get Featured Products REST API
-
37
Filtering and Getting Products by Category
-
38
Changing "_id" key to "id" - more frontend friendly
-
39
Section Code
-
40
Introduction
-
41
Post/Register a New User REST API
-
42
Users Model & Schema
-
43
Hashing the User Password
-
44
Get User and List of Users Excluding Password
-
45
Login a User REST API & Creating a Token
-
46
Protecting the API and Authentication JWT Middleware
-
47
Authentication Error Handling
-
48
Excluding REST API Routes From Authentication
-
49
Add More Secret User Information to Token
-
50
Users & Admins - User Role
-
51
Get User Count REST API
-
52
Section Code
-
53
Introduction
-
54
Orders & Order-Items Model & Scheme
-
55
Array of Refs - Example of Link Order to Order Items to Products
-
56
New Order & Create Order Items on Posting New Order
-
57
Get Order Detail and Populate Products in Order Items and User Data
-
58
Update Order Status & Delete Order
-
59
Delete Order Items after Deleting the Order
-
60
Explaining the Solution
-
61
Calculating Total Price of one Order
-
62
Get Total E-Shop Sales using $sum
-
63
Section Code
-
72
React Native Fundamentals
What is React Native? Get an overview of the Fundamentals
-
73
Project Setup and Folder Structure
Start a new React Native project and get to know the folder structure of a project generated with Expo
-
74
Components
Components are the building blocks of any Javascript framework.
Create and understand your first React Native Component.
-
75
State
Learn to manage the state of an application with with the state in-built feature from React
-
76
Props
Learn to pass data between components with the Props feature
-
77
Style
In this lecture the student will learn how to style a React Native components with inline Style and the StyleSheet
-
78
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
-
79
Get User Orders
-
80
Add Item
Write your first method to add an item to our List
-
81
Delete Item
Delete an item from our To Do List
-
82
Expo Menu
Overview of the options in the Expo simulator menu
-
83
Section Code
