FullStack Food Delivery App-Stripe Payment & Admin Dashboard

FullStack Food Delivery App-Stripe Payment & Admin Dashboard, available at $64.99, has an average rating of 3.85, with 63 lectures, based on 18 reviews, and has 104 subscribers.

You will learn about 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 This course is ideal for individuals who are Students who are willing to start their carrier as Full Stack Web developer It is particularly useful for Students who are willing to start their carrier as Full Stack Web developer.

Enroll now: FullStack Food Delivery App-Stripe Payment & Admin Dashboard

Summary

Title: FullStack Food Delivery App-Stripe Payment & Admin Dashboard

Price: $64.99

Average Rating: 3.85

Number of Lectures: 63

Number of Published Lectures: 63

Number of Curriculum Items: 63

Number of Published Curriculum Objects: 63

Original Price: $27.99

Quality Status: approved

Status: Live

What You Will 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 Should Attend

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

Target Audiences

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

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.

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Chapter 2: Project Setup

Lecture 1: Setting Up Nodejs & Yarn

Lecture 2: Visual Studio Code Developer Extensions

Lecture 3: Project Structure

Lecture 4: GitHub Setup & Configuration

Lecture 5: Customising our repository README File

Chapter 3: App Configuraitions & Setup

Lecture 1: Creating React App

Lecture 2: Firebase Project Creation

Lecture 3: Setting up Google Firebase Cloud Functions

Lecture 4: Setting up & Configuring TailwindCSS With our React App

Lecture 5: React App – Main Router Navigation Setup & Configuration

Chapter 4: Building UI Block Components

Lecture 1: Main Login Container UI Build – Part 1

Lecture 2: Main Login Container UI Build – Part 2

Lecture 3: Main Login Container UI Build – Part 3

Lecture 4: Main Login Container UI Build – Part 4

Chapter 5: Firebase Authentication

Lecture 1: Firebase Initialization

Lecture 2: Google Firebase Authentication

Lecture 3: Google Authentication Initiation

Lecture 4: Server Cloud Function Configuration

Lecture 5: API Endpoint for Token Validation

Lecture 6: JSON Web Token Validation

Lecture 7: Sign-UP With Email Password

Lecture 8: Sing-In With Email & Password

Chapter 6: Under Standing Redux

Lecture 1: React Redux Configuration

Lecture 2: Dispatching User Action to Global Store

Chapter 7: Creating Reusable UI Block Components

Lecture 1: Main Page Loader Animation UI Component

Lecture 2: Setting Up – Alert Notifications

Lecture 3: Main Header UI – Part 1

Lecture 4: Main Header UI – Part 2

Lecture 5: Implementing Signout

Chapter 8: Admin Dashboard UI & Functionalities

Lecture 1: Main Left Section – Left Sidebar

Lecture 2: Dashboard Header

Lecture 3: Dashboard Main Navigation Router

Lecture 4: Integrating Material UI – Datatable

Lecture 5: Dashboard – New Item

Lecture 6: Dashboard – New Item Part 2

Lecture 7: Uploading Images to Cloud Storage

Lecture 8: Uploading Progress Bar UI & Delete Image

Lecture 9: Save New Product To Firestore Collection

Lecture 10: Fetching Products from Collections & Pushing it to Redux Store

Lecture 11: Dashboard Items – Integrating Data with Datatable

Lecture 12: Delete the Product from Collection From Datatable

Lecture 13: Update User Detail

Lecture 14: Adding ChartUI – Core UI Component

Chapter 9: Client Screen UI Design

Lecture 1: Home Screen UI Build

Lecture 2: Home Slider Using Swiper Slider

Lecture 3: Slider Card Component – Making It Reusable

Lecture 4: Adding Data Filter Section

Chapter 10: Cart UI

Lecture 1: Inserting Data into the cart

Lecture 2: Storing Cart Items into Redux Store

Lecture 3: Main Cart UI – Layout

Lecture 4: Increasing & Decreasing the Cart Quantity

Chapter 11: Stripe Payment Gateway

Lecture 1: Stripe Payment Gateway Integration

Lecture 2: Creating our Own Line Items

Lecture 3: Implementing – Stripe Webhook Events

Lecture 4: Creating New Custer using Stripe Webhook

Lecture 5: Pushing order details to our database

Chapter 12: Order Tracking & Status Updation

Lecture 1: Fetching Orders from Collection & Push it to Redux Store

Lecture 2: Orders Datacard – Wire-framing the layout

Lecture 3: Order Datacar – UI Customisation

Lecture 4: Updating Order Status

Lecture 5: Displaying the Orders placed by specific User

Lecture 6: Fixing Minor Bugs

Instructors

Vetrivel Ravi
Full Stack Developer

Rating Distribution

1 stars: 3 votes
2 stars: 0 votes
3 stars: 5 votes
4 stars: 2 votes
5 stars: 8 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu