FullStack Food Delivery App-Stripe Payment & Admin Dashboard

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

3.85 (18 reviews)
Udemy
platform
English
language
Web Development
category
instructor
97
students
11 hours
content
Mar 2023
last update
$69.99
regular price

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

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.

Content

Introduction

Introduction

Project Setup

Setting Up Nodejs & Yarn
Visual Studio Code Developer Extensions
Project Structure
GitHub Setup & Configuration
Customising our repository README File

App Configuraitions & Setup

Creating React App
Firebase Project Creation
Setting up Google Firebase Cloud Functions
Setting up & Configuring TailwindCSS With our React App
React App - Main Router Navigation Setup & Configuration

Building UI Block Components

Main Login Container UI Build - Part 1
Main Login Container UI Build - Part 2
Main Login Container UI Build - Part 3
Main Login Container UI Build - Part 4

Firebase Authentication

Firebase Initialization
Google Firebase Authentication
Google Authentication Initiation
Server Cloud Function Configuration
API Endpoint for Token Validation
JSON Web Token Validation
Sign-UP With Email Password
Sing-In With Email & Password

Under Standing Redux

React Redux Configuration
Dispatching User Action to Global Store

Creating Reusable UI Block Components

Main Page Loader Animation UI Component
Setting Up - Alert Notifications
Main Header UI - Part 1
Main Header UI - Part 2
Implementing Signout

Admin Dashboard UI & Functionalities

Main Left Section - Left Sidebar
Dashboard Header
Dashboard Main Navigation Router
Integrating Material UI - Datatable
Dashboard - New Item
Dashboard - New Item Part 2
Uploading Images to Cloud Storage
Uploading Progress Bar UI & Delete Image
Save New Product To Firestore Collection
Fetching Products from Collections & Pushing it to Redux Store
Dashboard Items - Integrating Data with Datatable
Delete the Product from Collection From Datatable
Update User Detail
Adding ChartUI - Core UI Component

Client Screen UI Design

Home Screen UI Build
Home Slider Using Swiper Slider
Slider Card Component - Making It Reusable
Adding Data Filter Section

Cart UI

Inserting Data into the cart
Storing Cart Items into Redux Store
Main Cart UI - Layout
Increasing & Decreasing the Cart Quantity

Stripe Payment Gateway

Stripe Payment Gateway Integration
Creating our Own Line Items
Implementing - Stripe Webhook Events
Creating New Custer using Stripe Webhook
Pushing order details to our database

Order Tracking & Status Updation

Fetching Orders from Collection & Push it to Redux Store
Orders Datacard - Wire-framing the layout
Order Datacar - UI Customisation
Updating Order Status
Displaying the Orders placed by specific User
Fixing Minor Bugs

Screenshots

FullStack Food Delivery App-Stripe Payment & Admin Dashboard - Screenshot_01FullStack Food Delivery App-Stripe Payment & Admin Dashboard - Screenshot_02FullStack Food Delivery App-Stripe Payment & Admin Dashboard - Screenshot_03FullStack Food Delivery App-Stripe Payment & Admin Dashboard - Screenshot_04

Reviews

Abdullah
September 30, 2023
so bad explanation, unclear!!!!!! project is good for itself, I follow the course but explanation is so awefull.
Rafael
March 7, 2023
Algumas falhas, muito tempo perdido na busca dos erros, muito copia e cola. Não disponibilizou legenda e ficaram faltando algumas ferramentas. No mais um ótimo curso, parabéns.

Charts

Price

FullStack Food Delivery App-Stripe Payment & Admin Dashboard - Price chart

Rating

FullStack Food Delivery App-Stripe Payment & Admin Dashboard - Ratings chart

Enrollment distribution

FullStack Food Delivery App-Stripe Payment & Admin Dashboard - Distribution chart
5155134
udemy ID
2/13/2023
course created date
3/27/2023
course indexed date
Bot
course submited by