You're welcome to Heroic Academy

Select your country of residence below to continue

Online Shop Mobile App Tutorial with MERN Stack

Create an ecommerce Android and IOS mobile app using MERN stack technology

Created by Uche Joe

Click PREVIEW COURSE to watch a short video that will tell you more about the course.

Close

Online Shop Mobile App Tutorial with MERN Stack

What you will learn and gain

You will learn how to Create an ecommerce Android and IOS mobile app using MERN stack technology

MERN Stack is a collection of powerful technologies and robust, used to develop scalable master web applications comprising backend, front-end, and database.MERN stands for MongoDB, Express, React, Node, after the four key technologies that make up the stack

What our students are saying

React Native is a popular JavaScript Library built by Facebook for creating cross-platform mobile applications.

Some amazing Mobile Apps Built with React Native include;

  • Facebook app
  • Facebook Ads App
  • Skype
  • Walmart
  • Airbnb
  • Uber Eats
  • Instagram App
  • Wix.

In this tutorial, you will use React Native to create a complete ecommerce mobile app.

Requirements

  • Laptop
  • Smart Phone

Who this course is for:

Those who are interested in learning how to build mobile applications especially cross-platform mobile apps.

Course Content

Section 1: Introduction

Introduction

Installation

Installing dependencies and starting your app

Section 2: React Native Basics

React Native Basics

Navigation Setup

Creating style variables

Section 3: Building Home Screen

Creating Home Screen

Header Component

Search Button

Categories Component

Search Component - part 1

Search Component - part 2

Search Component - part 3

Product Card Component - part 1

Product Card Component - part 2

Creating Footer - part 1

Creating Footer - part 2

Section 4: Product Details Screen

Product Image Scrollview

Product Details Layout - part 1

Product Details Layout - part 2

Product Details Layout - part 3

Creating Add to cart button

Conditions for Quantity increase

Toast Message

Section 5: Building Cart Screen

Cart Heading

Cart Layout - part 1

Cart Layout - part 2

Cart Layout - part 3

Confirm Order Screen

Confirm Order Item Component

Payment Screen - part 1

Payment Screen - part 2

Section 6: Authentication UI

Building Login Screen - part 1

Building Login Screen - part 2

Forgot Password Screen

Reset Password Screen

Sign up Screen

Section 7: Profile Routes UI

Building Profile Screen

Button Box Component

Loader Component

Edit Profile Screen

Change Password

Section 8: Building Orders Screen

Creating Orders Screen

Order Item Component - part 1

Order Item Component - part 2

Order Item Component - part 3

Section 9: Building Admin Routes UI

Admin Panel - part 1

Admin Panel - part 2

Admin Panel - part 3

Admin Panel - part 4

Admin Panel - part 5

Creating chart in React Native - part 1

Creating chart in React Native - part 2

Manage Categories Screen - part 1

Manage Categories Screen - part 2

Admin Orders Screen

Update Product - part 1

Update Product - part 2

Select Category Component - part 1

Select Category Component - part 2

New Product - part 1

New Product - part 2

Manage Product Images - part 1

Manage Product Images - part 2

Section 10: Building Camera Screen

Creating Camera Screen - part 1

Creating Camera Screen - part 2

Accessing Photo Gallery

Capture image using camera

Section 11: Backend Setup

Setting up backend

Creating first route

Setting up the database

Connecting to Atlas Cloud

Section 12: Creating User Backend

Creating User Schema

Post Man for API Testing

Register User API

Login and Hashing Password

Section 13: Error Handling

Error Handler Middleware

Async Error Handler

Section 14: Backend Authentication

Implementing JWT

Saving JWT in Cookie

Authentication Middleware

Get My Profile

Cookie Options

Logout API

Section 15: Update Profile Routes

Update Profile and Change password - part 1

Update Profile and Change password - part 2

Section 16: Image Upload API

Setting up Mutler

Uploading on Cloudinary

Update Profile Pic API

Section 17: Resetting Password API

Forgot Password API

Sending Email API

Reset Password API

Section 18: Product Backend

Creating Product Schema

Get Product API

Create New Product API - part 1

Create New Product API - part 2

Update Product

Add Images

Delete Product Images

Delete Product

Section 19: Category Backend

Add, Get, Delete Category API

Section 20: Admin Middleware

Admin Middleware

Section 21: Search and Filter Product

Search and Filter API

Section 22: Order Backend

Creating Order Schema

Place Order API

Get My Orders

Get Order Details and Process Order

Get Admin Orders

Section 23: Stripe Integration Backend

Process Payment API

Section 24: Deployment

Before Deployment - Out of Stock

Using Cors in Server

Deploying Server - part 1

Deploying Server - part 2

Debugging Server Deployment

Section 25: Integration with Redux

Implementing Redux Toolkit

Section 26: User Reducer

Creating User Reducer

Using axios in Login Action

Handling Message and Error - part 1

Handling Message and Error - part 2

Creating custom hook

Persisting User Data

Logout User Action

Signup Handler - part 1

Signup Handler - part 2

Section 27: Profile Reducer

Showing Profile Data

Change Password Handler - part 1

Change Password Handler - part 2

Debugging Change Password

Fixing few hooks errors

Update Profile Handler - part 1

Update Profile Handler - part 2

Update Profile Picture Handler

Section 28: Product Reducer

Get Product Reducer

Get Products Action

useSetCategories Hook

Search Query Handler

Fetching Product Details

Section 29: Cart Reducer

Creating Cart Reducer

Fetching Cart items from Redux

Add to cart handler

Remove from cart and Product Details Add to Cart

Increment or Decrement Product Quantity in Cart

Clear all items from cart

Fetching Checkout Details

Section 30: Place Order and Payment Handler

Place Order Reducer and Action

Place Order with Cash On Delivery

Implementing Stripe Payment - part 1

Implementing Stripe Payment - part 2

Section 31: Fetching Orders

Creating useGetOrders Hook

Fetching Orders - part 1

Fetching Orders - part 2

Process Order Handler

Section 32: Admin Handlers

Fetching Admin Products

Add and Delete Category Handler - part 1

Add and Delete Category Handler - part 2

New Product Handler

Update Product Handler

Update Product Image

Delete Product Image

Delete Product Handler

Section 33: Reset Password Handler

Forgot and Reset Password - part 1

Forgot and Reset Password - part 2

Section 34: Re-designing the Home Screen

Working on Top Navigation Bar - part 1

Working on Top Navigation Bar - part 2

Working on Top Navigation Bar - part 3

Working on Category Section

All Product Button

Hero Section and Product Slider - part 1

Hero Section and Product Slider - part 2

Debugging Slider Issues

Auto scroll slider

Slider dot indicator

Linking slider products

Product List - part 1

Product List - part 2

Adding loading indicator

Redesigning product details

Finalizing the app

Section 35: Building App Bundle

Build App Bundle and APK

Frequently Asked Questions

What is Heroic Universal Concept All About?

Heroic Universal Concept International is an ICT firm and a vision-driven movement aimed at harnessing the ingenuity of young people with the use of motivational and ICT tools, thereby helping them achieve their ultimate goal.

We offer ICT services and champion talent development programmes for young people.

Is your training online or physical?

Our training is online. We have hundreds of downloadable tutorial videos on different ICT courses hosted in our website.

As soon as you pay and register, you will be given access to the tutorial videos. You can download them and commence training, offline.

While you're learning, I will be guiding you from here whenever you need my assistance.

Where is your location?

We're based in Lagos but our training is online. So, you can access our courses from anywhere you are while we will be coaching you from here.

Do you have a physical class?

No, we don't.

Our training is 100% online.

What is your mode of teaching?

We teach with tutorial videos.

We have hundreds of downloadable tutorial videos on various ICT courses in our website.

You will have access to download them and learn with them as soon as you register for your desired course.

We made all the tutorials downloadable to help you save data and be free from challenges of poor internet connection.

Do you have online community where your students converge to exchange ideas?

We have Heroic Students WhatsApp group where our students converge and exchange ideas.

Information about Heroic Academy and other Heroic innovations are discussed in the group.

Do you mentor your students?

Sure, I do absolutely!

I'm always available Whenever my students need my attention.

I supervise their projects and tackle their challenges.

Can ICT courses be learnt online effectively?

Of course! The more convenient way to learn ICT skills these days is online.

There are some courses you may never have the opportunity of learning if you're waiting for opportunity to learn them physically.

Professionals are fast moving online. Very few of them will still have time to teach physically.

Programming is one of those skills you can easily learn online.

All you need is a good and experienced coach, and I'm here to help.

Is programming difficult?

It depends on who is coaching you and the time you dedicate to learning it.

If you're being coached by a very experienced and gifted coach, if you give it enough time, programming will be fun for you.

However, if you're struggling to learn by yourself or you're being coached by an inexperienced coach, you will find programming difficult.

Can I learn coding with my phone?

Yes, you can start learning with your phone if you don't have a laptop. Just buy a phone external keyboard, I will direct you on how to use it to start programming.

How do you mentor your students?

I mentor my students by; answering their questions and helping them solve some problems whenever they call my attention.

If my student need my attention, I usually ask them to send me a screenshot of the issue or a zip file of their work to enable me analyse their job and debug the error.

I usually make a new video to point out their errors if the situation is complex.

How can you convince me that you're genuine?

Chat me on Whatsapp via +2348037747461 and express your concern.

I will try my best to clear all your doubt.

I'm not used to online training, I'm afraid it won't work for me.

Online training is great when a gifted teacher is handling it. Look for a gifted teacher.

You will be missing opportunity to acquire great skills if you ignore online training.

Some skills are not common. Online training make them accessible.

If you have tried online training before and it didn't work for you, try again, this time, concentrate on getting a good teacher.

I tried my best to simply my lectures. You can chat me to see my students testimonials. They're testifying that I made my courses very simple.

Don't you think that poor internet connection can disrupt online training?

I made all my tutorials downloadable to win against poor internet connection.

You can download all your tutorials when the internet connection is ok and learn offline without worrying about network fluctuations.

What if I insist on one-on-one training. What's your advice?

Online training would have made learning a lot easier for you but if you insist on physical training, you have to take the pain of looking for someone or centers where the skills are taught.

The centers might not be close to you, so be ready to spent heavily on transportation.

I wrote an article where I compared online and physical training. You can chat me on Whatsapp to request for it.

I'm interested, how do I get started?

Go ahead and order for the course. If you need assistance, chat me on Whatsapp via +2348037747461.

Will I get certificate after the training?

Of course. Our organization is registered. We give our students certificate on completion.

I'm interested in the courses but I don't have money

If you can't afford the expensive courses, there are some cheap courses you can start from.

Just pay for the ones you can afford and get started instead of waiting.

You will gradually raise money to pay for the rest.

Are all your tutorial videos downloadable?

All the tutorials the Admin of this platform, Uche Joe created by himself are downloadable but the tutorials created by other expert partners created might not be downloadable.

However, you will surely enjoy the learning process.

You may also like

See all coursesarrow_forward