Trang chủ

Mobile Development

Mobile App Development

React Native E-commerce App

React Native E-commerce App

Loại khoá học: Mobile Development

Build Android and iOS E-commerce using React Native

50.000 VND

25 VND

Đầy Đủ Bài Giảng

Học Online Tiện Lợi

Kích Hoạt Nhanh 2-5 Phút

Thanh toán tự động

Được phép tải xuống

Mô tả

In this React Native E-commerce app tutorial, you will learn how to use React Native to build an iOS and Android version app for cross platform.

We will start slowly with UI. First few hours we will focus on UI and build a beautiful UI. So in first few hours you will learn how to save data to async storage.

The UI will include the below features

1. view men's and women's item

2. scroll through items

3. view detail page for each items

4. add item to cart

5. remove items from cart

After a few hours we will start with restful API. To be able to work with restful api, we will use Nodejs for api building and work with mongodb for storing data in the database.

As we build APIs we will also implement JWT authentication and do login.

So eventually before we place order we have to login. Once we login we will place order using Stripe payment. Apart from that we will have search product and wish list.

At the end we will see how to host this in Railway server for free. So you will learn how to compile this for real world app and access from your android phone as apk and show the world your very first React Native e-commerce app.

Bạn sẽ học được gì

Build android and iOS e-commerce app using React Naitve

React Native basics and advanced techinques

Will learn nodejs and basics

Integrating nodejs with React Native app with mongodb

Integrating Stripe with React Native

Yêu cầu

A little React Native knowledge or programming knowledge would help

Nội dung khoá học

23 sections

Introduction

1 lectures

Introduction

06:45

Create and run the app

2 lectures

Creating react native app

04:03

Running the app for the first time

05:26

Home page and bottom bars

4 lectures

Loading custom fonts

07:04

Bottom Tab Navigator

10:27

Exporting Screens

01:00

Navigation and rendering the bottom tab

05:48

Home page and head bars

4 lectures

Head bar style

02:13

Setting up rows in react native

02:10

Cart Count absolute value

05:11

Cart btn Touchable Opacity

02:16

Home page and welcome page

2 lectures

Welcome Text

04:03

Welcome and reusable styles

03:12

Home page and search section

5 lectures

SearchBar

02:57

Search input

02:46

Search Camera Button

01:45

Positioning Search icons and Navigation to the search page

02:37

Set up search bar in the Search page

04:06

Home page and carousel

2 lectures

Carousel Slider

04:59

Carousel loop

00:49

Home page and heading

3 lectures

Creating Heading

01:04

New Rivals Heading

03:02

Heading Styles

02:28

Home page and card view

12 lectures

Introducing the Flatlist Component

02:22

Flatlist props

01:50

Render Components Flatlist Component

01:46

Render ProductCard to the flatlist

01:02

Product Card View

04:42

Using Images in React Native and styling them

01:39

Product details handling text

03:05

Price Text

01:30

Addding a Component on top of another using position

02:47

Navigating from a child component

03:18

Product Row style migration-

01:14

Products details page back button

05:48

Detail page

17 lectures

Product details Image

01:20

Title row

01:55

Title and price

01:49

Text with a rounded background

02:02

Mapping icons to form a rating bars

03:56

Cart Counter

02:27

Counter State

01:09

Increment Count

01:09

Decrement Count

01:05

Description

01:47

Justified Description Text

01:30

Product location and delivery row

02:00

location row

01:17

Buy now button

03:45

button text

02:13

Cart button

01:54

Product page adjustments

00:54

Backend section with endpoint, functions, routes, hooks and postman test

13 lectures

Creating Backend NodeJS project

02:30

Creating a node server

02:35

Creating database

02:57

Dotenv and connecting to the database

02:11

Running our server with db for the first time

01:13

Product Schema

01:50

Create Product Controller

02:11

Get Products Function

02:06

Get product by id

00:55

Search with Altas indexes

03:56

Product Router

02:33

Hooking routes to our server

02:23

Error fixing and testing endpoints in postman

04:01

Frontend and display data from the server

8 lectures

Creating a custom API hook

02:33

Fetch data with axios

01:53

Loading data with useEffect and fetching data manually

01:22

Hooking custom hook to Product Row

01:35

Activity Indicator and handling errors

02:03

Passing Data to a child component

01:28

Rendering Data on the ProductCard

00:46

Use useRoute to recieve params data and using it in Product DetailsPage

02:25

New Rivals frontend and detail

10 lectures

Creating new rivals

01:06

Setup navigation for NewRivals Page

01:21

Navigating to productList from Heading component

00:59

Components on top of each other

03:08

Product List Top bar

03:29

Creating ProductList Component

02:08

Loading data from the custom hook

03:12

Creating a grid view with a flatlist

02:33

Creating a grid with a flatlist

01:49

Creating a grid view

01:51

Product grid

10 lectures

Setting up search state variables

02:28

Testing our search input and state variables

01:17

Handling Search with axios and useState

02:03

Test Search endpoint in Postman

03:13

Logging research response and storing the search data in the state variable-

02:22

Handling Empty Search results

03:35

Displaying alist of search results

02:29

Creating a search Tile

05:40

Search Tile

04:31

Navigating to the product Details from the search tile

01:40

Work on Backend

23 lectures

Creating Models

03:30

Creating Schemas

02:48

Creating User Model

02:30

Creating the order Schema

04:44

Cart Schema

02:26

Creating Auth functions

02:51

CreateUser function

04:05

Save a user and sening back the response

01:39

Creating the loginUser function

08:18

auth router and hooking the router to index

03:17

Testing Auth endpoints in postman

02:36

Delete User function

03:35

GetUser function

02:49

User Routes and index

03:04

Test User endpoints in postman

03:34

Add to Cart funcition

06:45

Add to Cart function

05:49

GetCart function

01:29

GetCart function

04:19

Decrement Cart Item functionn

08:04

Cart router and hooking our router to index

05:10

Test the cart endpoints in postman

08:14

Order function and router

07:15

Profile section

10 lectures

Profile Screen

06:14

Profile Cover Image

02:27

Profile Image Component and style

02:56

Login Button and Text

06:27

Setup navigation to the Login Page

03:46

Menu Items View

02:22

Creating a didvider in react native

03:30

Creating the menu item and the menu

04:33

Creating and link functions to menu items

06:21

Menu item Navigation

03:36

Login section

9 lectures

Login Page ScrollView and Safeares

11:45

Login Cover Image and BackBtn Style

05:34

Heading text and creating the reusable button

07:15

Hooking the Button to the Loging Page

01:42

Installing Yup and Formik to handle TextInput

05:08

Email TextInput field

14:37

Password TextInput field and obsecureText

07:02

Dynamically change the Button color

03:48

HandleSubmit and Showing Alert on invalid form

03:39

Sign up and Login

9 lectures

Register Text Btn and navigation

03:38

Location TextInput

05:27

Username TextInput

05:34

Login Request

07:23

Logining in a user and getting the response

04:13

Storing data in async storage and understanding the the storage cycle from

08:11

Displaying user location on the Home Screen

03:17

Logout function

04:06

Register a new user

09:03

Middleware

3 lectures

Creating middleware

06:49

Testing the middleware in postman

02:35

Storing token in Async Storage

01:19

Cart section

5 lectures

AddToCart function

03:40

Testing the cart function and checking the cart item in the db

03:16

FetchCart Hook

09:17

User and non user logic

05:13

User and non user logic

04:10

Favourites section

7 lectures

Add to favorites

04:24

Add to favorites

05:27

Check favovarites

04:05

Showing the favorites state changes in the ui

02:06

Creating favorites page and rendering favorites component

12:41

Fav Tile aand deleting from favorites the fav page

11:08

Cart Page Back Button

02:20

Cart section

3 lectures

Making changes to fetchCart andcreating thr cart flatlist

04:33

Cart Tile

11:02

Fixing CartTile error and selected cart items for checkout

06:32

Checkout section

9 lectures

Checkout Button

01:49

Setting up stripe server

06:26

Hosting the payment server

04:31

Checkout function

05:08

Payment Webview

06:25

Making the first payment

01:31

Updating webhook url

02:04

Order page and oorders tile

11:59

Order styles and overview

05:41

Đánh giá của học viên

Chưa có đánh giá

Course Rating

5

0%

4

0%

3

0%

2

0%

1

0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Email

Nội dung

Khoá học liên quan

How To Create 2D Defender Game With Unity & C#

How To Create 2D Defender Game With Unity & C#

The Complete UML Course (2024): Learn to Design UML Diagrams

The Complete UML Course (2024): Learn to Design UML Diagrams

Master Network Automation with Python for Network Engineers

Master Network Automation with Python for Network Engineers

Unity Mobile Game Development - Exterminator

Unity Mobile Game Development - Exterminator

Mastering CSS Grid 2023 - With 3 cool projects

Mastering CSS Grid 2023 - With 3 cool projects

Django 3 - Full Stack Websites with Python Web Development

Django 3 - Full Stack Websites with Python Web Development

Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

Appium - Mobile Testing with Latest 2.0 and Live Projects

Appium - Mobile Testing with Latest 2.0 and Live Projects

Deep Learning for Object Detection with Python and PyTorch

Deep Learning for Object Detection with Python and PyTorch

Full Android Development Masterclass | 14 Real Apps-46 Hours

Full Android Development Masterclass | 14 Real Apps-46 Hours

Go Java Full Stack with Spring Boot and Angular

Go Java Full Stack with Spring Boot and Angular

Machine Learning Practical Workout | 8 Real-World Projects

Machine Learning Practical Workout | 8 Real-World Projects

WordPress 2024: The Complete WordPress Website Course

WordPress 2024: The Complete WordPress Website Course

Android App Development Master Course with Java | Android

Android App Development Master Course with Java | Android

Unreal Engine 5: Soulslike Melee Combat System

Unreal Engine 5: Soulslike Melee Combat System

ASP.NET Core Web Application Using Razor Pages

ASP.NET Core Web Application Using Razor Pages

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi