Mern Stack E Commerce Mobile App React Native Redux Expo

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

Last updated 2022-01-10 | 4

- 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

What you'll 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

* Requirements

* Basic Knowledge with Javascript

Description

  • 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

Course content

23 sections • 211 lectures

What are we going to build? Preview 04:20

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!

What is MERN Stack? Preview 03:05

Technology stack and MERN stack, the general definition. 

How to Get the Most of This Course Preview 02:12

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

How to use this course Preview 00:38

If you get stuck and Errors Preview 01:03

Pickup Your Task and We Review it - How this course is interactive? Preview 02:18

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!

Join Students Tasks Board - Invitation Link + Git Repo Preview 00:21

Course Outlines Preview 02:58

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

Installing NodeJs Preview 01:55

How to install Nodejs , or Node Package Manager

Installing Expo Preview 03:04

Installing Expo!

Installing and running Android Studio Preview 03:28

Android Studio to run the Android Emulator!

Installing and running iOS Simulator Preview 01:39

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

Installing our Coding Editor (IDE) Preview 02:06

Our Editor and Extensions!

Installing PostMan to Test our API's Preview 01:50

Postman is a great tool to test our API's

Configure MongoDB Atlas Preview 01:57

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

Introduction Preview 01:22

Why do we need the backend!

Overview to our RESTful API Preview 03:26

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

File Structure Preview 01:10

We will build the startup file structure

Creating the Backend Server with Express Preview 06:38

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

Reading Environment Variables Preview 04:59

Placing the common constants among the application is good idea!

Create First API Call & Parsing Json Data Preview 06:47

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

Important note about parsing json data Preview 00:19

Logging API Requests Preview 02:38

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

Installing Mongoose and Connect to MongoDB Database Preview 10:02

Read/Write Data to Database Using API Preview 14:31

Lets connect the API to the Database!

Analysing the E-Shop Database Preview 05:40

What is the database structure of our E-Shop?

Create Backend API Routes & Schemas Preview 09:48

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

Enabling CORS & Why Do We Need It? Preview 03:15

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

Introduction Preview 02:44

Products Model & Scheme Preview 06:12

Categories Model & Scheme Preview 01:43

Add and Delete Categories Preview 12:39

Get Categories and Category Details Preview 02:48

Update Category Preview 04:09

Post a New Product REST API Preview 05:55

Get a Product & List of Products REST API Preview 03:47

Population of Category in Get a Product API Preview 03:01

Update a Product REST API Preview 03:17

Delete a Product REST API and Validate Id Preview 03:45

Get Products Count for Statistics Purposes Preview 03:43

Get Featured Products REST API Preview 05:18

Filtering and Getting Products by Category Preview 06:54

Changing "_id" key to "id" - more frontend friendly Preview 02:05

Section Code Preview 00:03

Introduction Preview 05:12

Users Model & Schema Preview 02:01

Post/Register a New User REST API Preview 05:18

Hashing the User Password Preview 02:57

Get User and List of Users Excluding Password Preview 02:56

Login a User REST API & Creating a Token Preview 11:25

Protecting the API and Authentication JWT Middleware Preview 06:07

Authentication Error Handling Preview 05:07

Excluding REST API Routes From Authentication Preview 06:48

Add More Secret User Information to Token Preview 02:38

Users & Admins - User Role Preview 06:46

Get User Count REST API Preview 02:16

Section Code Preview 00:03

Introduction Preview 01:54

Orders & Order-Items Model & Scheme Preview 05:00

Array of Refs - Example of Link Order to Order Items to Products Preview 01:12

New Order & Create Order Items on Posting New Order Preview 11:42

Get Order Detail and Populate Products in Order Items and User Data Preview 08:10

Update Order Status & Delete Order Preview 04:29

Delete Order Items after Deleting the Order

Deleting Order is not enough, we still have the related order items in the database. Rewrite the "Delete Request" code to make it able to delete also the order items after success of deleting the order

Explaining the Solution Preview 01:54

Calculating Total Price of one Order Preview 07:01

Get Total E-Shop Sales using $sum Preview 06:42

Get User Orders Preview 03:25

Section Code Preview 00:02

Introduction Preview 02:22

Configure Server Side Upload Preview 11:24

Testing Image Upload with Postman Preview 04:55

Validating Uploaded File Types Preview 06:16

Image Upload With Product Post Request Preview 01:10

Image Upload With Product PUT Request Preview 03:19

Product Gallery Multiple Images Upload Preview 07:17

Excluding Uploads Folder From Authentication Preview 02:57

Section Code Preview 00:02

React Native Fundamentals Preview 02:54

What is React Native? Get an overview of the Fundamentals

Project Setup and Folder Structure Preview 08:25

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

Components Preview 04:13

Components are the building blocks of any Javascript framework.

Create and understand your first React Native Component.

State Preview 04:11

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

Props Preview 03:59

Learn to pass data between components with the Props feature

Style Preview 07:17

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


ScrollView and TextInput Preview 03:00

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

Add Item Preview 05:32

Write your first method to add an item to our List

Delete Item Preview 04:22

Delete an item from our To Do List

Expo Menu Preview 01:41

Overview of the options in the Expo simulator menu

Section Code Preview 00:05

Intro and Folder Structure Preview 06:10

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

FlatList Products Preview 06:04

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

Product List Preview 05:18

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

Product Card Preview 16:06

Create our Product Card and add it to our List.

Regarding Layout and Images Preview 00:23

Header Preview 07:22

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

Important note on Native Base Preview 00:22

Native Base Preview 05:36

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

Searched Product Preview 10:09

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

Search List Preview 10:02

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

LogBox Preview 01:48

Get to know the React Native LogBox and learn how to enable or disable it.

Banner Preview 11:43

Build an image slider and create the Banner for our e-shop app.

Section Code Preview 00:05

Categories Preview 03:27

Add the categories to our React Native App.

Category Filter Preview 08:06

Filter our Products by category.

Category Badges Preview 10:04

Build clickable TouchableOpacity badges to filter our products by category.

Category Container Preview 07:26

Build a simple container to show our categories badges.

Section Code Preview 00:05

React Navigation Preview 02:35

Overview of React Native Navigation Library.

Installing React Navigation Preview 02:10

Learn how and which packages to install to make use of the React Navigation.

Bottom Tab Navigation Preview 19:29

Build a Bottom Tab Navigation Bar with custom icons.

Navigation with Route Params Preview 11:50

Navigate to a screen with specific data passed to it.

Single Product Preview 07:13

Build the Detail Page for a single product, making use of the Route Params data and navigation.

Section Code Preview 00:05

What is Redux? Preview 02:00

Brief overview and explanation of what Redux stands for.

Installing Redux Dependencies Preview 01:49

Install the specific Redux dependencies needed in our React Native App.

Redux Store Preview 03:52

Create a Redux Store to hold the state of our Application.

Cart Items Reducer Preview 06:24

Add a Reducer to link the actions and state to our Store.

Cart Actions Preview 03:24

The last part of the Redux in our application. Build the action methods to use in the entire app. Clear, Add and Remove items from cart.

Section Code Preview 00:05

Cart Navigator

The student should introduce a new navigator so we can use our Cart components

Add Items To Cart Preview 07:46

Learn how to add items to Cart.

Single Product

The student should had the Add Item to Cart functionality into our ADD button in Single Product page

Cart Item Preview 10:52

Create a separated component to use as an Item in our Cart.

Bottom Container Preview 05:53

Build a bottom container to hold our total price and Cart action buttons.

Cart Icon Preview 08:47

Modify our Cart icon to hold a badge with the count of number of items in our Cart.

Clear Cart Preview 02:12

Use the Redux action to clear the entire Cart items.

Remove Single Item from Cart Preview 13:12

Remove a single item from our Cart.

Section Code Preview 00:05

Checkout Navigator Preview 08:26

Create the Checkout Navigator with a nested navigator with React Navigation.

Custom Form Preview 11:27

Lear to build a custom form to use in many parts of our application.

Shipping Page Preview 22:23

Build the screen that will take our address and contact details to our order.

Payment Page Preview 16:18

Create a list with methods of payment for the user to chose from.

Confirm Page Preview 12:20

Create a Confirm Page where the user can review the order and confirm it.

Confirm Items Preview 10:03

Build a components to show the items and the user details in our order.

Section Code Preview 00:05

Base URL Preview 03:46

Add the connection string as baseURL to our React Native Application.

Ngrok [OPTIONAL] Preview 00:07

Application Data Preview 00:48

Add some already created products and categories to our database.

Connect Products Preview 04:42

Get the Database products and render them in our Product List through an API call.

Connect Categories Preview 03:22

Get the Database categories and render them in our Category List through an API call.

useFocusEffect and useCallback Preview 02:32

Learn how to use two re-render methods from our React Navigation and React Libraries.

Activity Indicator Preview 03:48

Add a Spinner to our List Components to show while we wait for the data to be rendered.

Preparing for deployment Preview 00:11

Deploying our server to Heroku with GitHub [OPTIONAL] Preview 09:09

Learn how to deploy and make use of our server with Heroku.

Section Code Preview 00:05

User Navigator Preview 07:26

Create an User Navigator with Login, Register and User Profile Screens.

Login Screen Preview 09:24

Configure Login Screen and create the Login Form .

Handling Submit Preview 02:30

Learn how to handle the submit to our server to Login the user.

Error Preview 04:13

Add and new Error component to show where an error can occur.

Register Screen Preview 12:54

Configure our Register Screen with our custom Form.

Register User Preview 03:55

Handle the registration of a new user.

Toast Preview 06:00

Learn how to add and use the Toast package to notify our users about a successful or unsuccessful operation.

Adding Toast to the entire App Preview 03:46

Add the Toast to the parts of our application that should make use of it.

Section Code Preview 00:05

Intro Preview 01:06

A brief description of what is and how to use Context API.

Installing Dependencies Preview 02:14

Installing the needed dependencies to make use of the Context API in our React Native ecommerce application.

Actions Preview 14:52

Add the Action for the user registration and authentication with Context API.

Reducer Preview 02:32

Include a Reducer from our Context API.

isEmpty Preview 03:32

Build a separated method to check if a input or value is empty.

Store Preview 09:06

Create our Context API Store to hold our user state.

Adding Context to Login Preview 04:59

Adding the Context store and Hook to our Login.

Profile Page Preview 15:58

Creating and configuring our user Profile Page.

Section Code Preview 00:05

Admin Navigator Preview 12:36

Create a new Admin navigator to hold the Screens that will be used in our Admin Panel.

Product List Setup Preview 09:59

Set up our Admin Product List.

Product List Preview 04:34

Finish configuring our Admin Product List.

List Item Preview 08:19

Create and add a List Item to our List.

List Item Styling Preview 04:51

Style our List Item.

List Header Preview 06:05

Create a custom Header to our FlatList.

Product Filter Preview 03:54

Add a method to filter the list products by keyword.

Modal Preview 12:12

Open a Modal with long press to show Edit and Delete commands.

Section Code Preview 00:05

Intro Preview 02:08

Get to know better what are Styled Components and their use in React.

Easy Button Preview 08:54

Create our Styled Component Easy Button.

Adding Easy Button to Modal Preview 04:38

Learn how to make use of our Easy Button in the list Modal.

Adding Easy Button to rest of the App Preview 09:26

See the various uses of a Styled Component button in the entire Application.

Traffic Light Preview 03:51

Create a Traffic Light Styled Component to show the availability of a Single Product.

Using Traffic Light Preview 07:41

Apply our Traffic Light Component to the React Native e-shop.

Section Code Preview 00:05

Delete Item Preview 04:05

Add a method to delete a product Item.

Button Container Preview 06:07

Add a Button Container to our Product.

Product Form Preview 19:16

Build the Product Form where we can add new products to our Application.

Category Picker Preview 06:55

Get the categories from our database and add them to a picker in our Product Form.

Categories Button Container Preview 03:27

Add a Button Container to our Categories Component.

Access Photo Library Preview 11:51

Learn how to access the mobile device native photo library with Expo.

Add Products Preview 10:25

Introduce the Add Products method to add new products to our e-shop.

Upload Image Preview 06:52

Learn how to upload an image from our device photo library.

Update Product Preview 10:20

Update a product details by making use of the edit button.

Categories Preview 11:31

Configure the categories screen.

Category Item Preview 08:21

Build and Add a category item to our categories List.

Add Category Preview 05:16

Add a new category to our List.

Delete Category Preview 03:51

Delete a category from the List.

Section Code Preview 00:05

Confirm Order Preview 08:21

Configure our Confirm Order Screen.

Orders Preview 07:49

Process our orders and pass data through components.

Order Card Preview 12:12

Create our order card to show in Admin Panel and User Profile.

Order Status Preview 13:16

Check and change the status of our order in Admin Panel.

IMPORTANT! Update on sending Orders Preview 01:35

Cart Button Check Preview 02:29

Update Status Preview 07:02

Create a method to update the status of the order.

User Orders Preview 16:31

Add the order of each user to their profile page.

Edit Mode Preview 03:06

Add an Edit Mode so the orders status can be only changed in Admin Panel.

Section Code Preview 00:05

Icon and Splash Screen Preview 02:01

Add the icons to our Splash Screen and make it available in our device.

Build Android Preview 00:03

Learn how to deploy our Application to an Android device.

Deploy to Google PlayStore Preview 00:05

Build iOS Preview 00:03

Learn how to deploy our Application to an iOS device.

Deploy to Apple App Store Preview 00:06

Useful Links Preview 00:03

Conclusion Preview 00:38