FullStack Food Delivery App-Stripe Payment & Admin Dashboard

Focused View

Vetrivel Ravi

11:07:45

127 View

1 - Introduction

1 - Introduction.mp4

10:50

2 - Project Setup

2 - Setting Up Nodejs Yarn.mp4

02:58

3 - Visual Studio Code Developer Extensions.mp4

05:24

4 - Project Structure.mp4

01:46

5 - GitHub Setup Configuration.mp4

06:39

6 - Customising our repository README File.mp4

08:04

3 - App Configuraitions Setup

7 - Creating React App.mp4

05:09

8 - Firebase Project Creation.mp4

06:09

9 - Setting up Google Firebase Cloud Functions.mp4

04:53

10 - Setting up Configuring TailwindCSS With our React App.mp4

10:20

10 - assets.zip

11 - React App Main Router Navigation Setup Configuration.mp4

06:54

4 - Building UI Block Components

12 - Main Login Container UI Build Part 1.mp4

14:32

13 - Main Login Container UI Build Part 2.mp4

14:35

14 - Main Login Container UI Build Part 3.mp4

16:55

15 - Main Login Container UI Build Part 4.mp4

04:13

5 - Firebase Authentication

16 - Firebase Initialization.mp4

09:09

17 - Google Firebase Authentication.mp4

02:37

18 - Google Authentication Initiation.mp4

09:16

19 - Server Cloud Function Configuration.mp4

12:09

20 - API Endpoint for Token Validation.mp4

13:43

21 - JSON Web Token Validation.mp4

07:20

22 - SignUP With Email Password.mp4

09:09

23 - SingIn With Email Password.mp4

06:17

6 - Under Standing Redux

24 - React Redux Configuration.mp4

10:47

24 - assets.zip

25 - Dispatching User Action to Global Store.mp4

16:05

7 - Creating Reusable UI Block Components

26 - Main Page Loader Animation UI Component.mp4

03:17

27 - Setting Up Alert Notifications.mp4

17:53

28 - Main Header UI Part 1.mp4

11:10

29 - Main Header UI Part 2.mp4

20:27

30 - Implementing Signout.mp4

06:58

8 - Admin Dashboard UI Functionalities

31 - Main Left Section Left Sidebar.mp4

10:23

31 - assets.zip

32 - Dashboard Header.mp4

15:34

33 - Dashboard Main Navigation Router.mp4

06:01

34 - Integrating Material UI Datatable.mp4

26:43

35 - Dashboard New Item.mp4

09:13

36 - Dashboard New Item Part 2.mp4

13:06

37 - Uploading Images to Cloud Storage.mp4

12:58

38 - Uploading Progress Bar UI Delete Image.mp4

05:42

39 - Save New Product To Firestore Collection.mp4

23:19

40 - Fetching Products from Collections Pushing it to Redux Store.mp4

18:07

41 - Dashboard Items Integrating Data with Datatable.mp4

09:36

42 - Delete the Product from Collection From Datatable.mp4

09:20

43 - Update User Detail.mp4

06:14

44 - Adding ChartUI Core UI Component.mp4

11:32

9 - Client Screen UI Design

45 - Home Screen UI Build.mp4

17:09

45 - assets.zip

46 - Home Slider Using Swiper Slider.mp4

12:43

47 - Slider Card Component Making It Reusable.mp4

07:10

48 - Adding Data Filter Section.mp4

11:12

10 - Cart UI

49 - Inserting Data into the cart.mp4

13:40

50 - Storing Cart Items into Redux Store.mp4

06:57

51 - Main Cart UI Layout.mp4

19:17

52 - Increasing Decreasing the Cart Quantity.mp4

12:32

11 - Stripe Payment Gateway

53 - Stripe Payment Gateway Integration.mp4

18:25

54 - Creating our Own Line Items.mp4

10:41

55 - Implementing Stripe Webhook Events.mp4

13:55

56 - Creating New Custer using Stripe Webhook.mp4

08:54

57 - Pushing order details to our database.mp4

09:36

12 - Order Tracking Status Updation

58 - Fetching Orders from Collection Push it to Redux Store.mp4

07:39

59 - Orders Datacard Wireframing the layout.mp4

04:54

60 - Order Datacar UI Customisation.mp4

17:17

61 - Updating Order Status.mp4

04:51

62 - Displaying the Orders placed by specific User.mp4

10:34

63 - Fixing Minor Bugs.mp4

06:53

Description

Building real time project using React Redux, Firebase, Strip Payment Gateway , Order Tracking, Custom api endpoints

What You'll Learn?

How to create modern UI using React Js
Learn how to integrate Stripe Payment Gateway
How to create Custom API Endpoints using Nodejs Express along with Firebase Cloud Functions
Learn how to use Framer Motion Animations in your websites
Learn how build a modern UI and deploy it into firebase freely
Learn how to build material UI using Tailwind CSS & Material UI

Who is this for?

Students who are willing to start their carrier as Full Stack Web developer

More details

Description
I will show you how simple it is to create a full stack food delivery app using Firebase, reactjs, tailwind css.
Technologies we are going to discuss are listed and explained bellow.
What is Firebase ?
Firebase is a platform developed by Google for creating mobile and web applications. It was originally an independent company founded in 2011. In 2014, Google acquired the platform and it is now their flagship offering for app development.

What is React?
React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

What is firebase cloud functions?
Cloud Functions for Firebase is a serverless framework that lets you automatically run backend code in response to events triggered by Firebase features and HTTPS requests. Your JavaScript or TypeScript code is stored in Google's cloud and runs in a managed environment.

What is Framer Motion?
Framer Motion is a new open source, production-ready motion library for React on the web.

What is Framer used for?
Framer is primarily a design and prototyping tool. It allows you to design interactive prototypes of websites and applications using production components and real data.

Stripe Payment Gateway
It brings together everything that's required to build websites and apps that accept payments and send payouts globally. Stripe's products power payments for online and in-person retailers, subscriptions businesses, software platforms and marketplaces, and everything in between.

Stripe Webhooks
A webhook is an HTTP endpoint that receives events from Stripe. Webhooks allow you to be notified about payment events that happen in the real world outside of your payment flow such as: Successful payments ( payment_intent. succeeded ) Disputed payments ( charge.
Who this course is for:
Students who are willing to start their carrier as Full Stack Web developer

User Reviews

Rating

average 0

Total votes0

Focused display

Hi, my name is Vetrivel Ravi, I am a Full Stack Developer and the founder of CodeWithVetri, Working as Full Stack Developer in Qatar. Having 5+ years of experience id Training & as well in Development. My primary focus is on building Front End Web Applications, REST APIS's Integrations. My skill set include languages like JavaScript, Python, JAVA along with frameworks like Node Js, Django, AngularJs.do this because I love helping businesses showcase their full potential to the customer through software solutions, may that be a website and anything else. Also, I just love the process of software development, whereby you can take something from an idea to a real product that many can use.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.