FullStack Food Delivery App-Stripe Payment & Admin Dashboard

Install Node.js from nodejs.org, choosing the recommended version, then install yarn globally with npm install -g yarn, and verify both installations using node --version.

Set up a fullstack food app development environment with Visual Studio Code, install nodejs and yarn, customize themes and icons, enable prettier on save, and install ES7 React snippets.

Create a two-folder project structure with client and server, add readme.md files for documentation, and set up a GitHub repository to push the project.

Set up GitHub for a reactjs project by creating a public repository named fullstack_app, configuring git, initializing a local repo in Visual Studio Code, and pushing to remote.

Customize the repository readme by adding a title, thumbnail snap.png, links, and a commands table; commit and push the changes to GitHub for client and server readmes.

Create a React app inside the client folder using yarn create react-app, resolve folder and README issues, and prepare Firebase and Tailwind CSS setup.

Create a new Firebase project, enable Firestore and storage, set production mode and security rules, then register a web app and prepare environment configurations for the front end.

Set up and initialize Firebase cloud functions in the server directory by installing Firebase tools, logging in, configuring an existing project with JavaScript, and installing dependencies and eslint.

Set up Tailwind CSS with a React app by configuring project structure, installing Tailwind, initializing Tailwind config, importing index.css, and using Tailwind utilities for styling.

Configure react-router-dom for navigation by installing react-router-dom, react-icons, and framer-motion, wrap the app in a router, define routes for login and main containers, and export them for /login and /main.

Build the main login container UI with a glass morphic overlay, background image, and responsive left panel using a Tailwind setup and reusable login inputs.

Build a reusable login input component in a components folder, wire it into the login container, and implement props for placeholder, icon, state, type, and sign-in or sign-up modes.

Build a main login container UI with sign up and sign in toggles, including password and confirm password fields, plus framer motion for smooth fade-in animations.

Build the main login container user interface with a centered flex layout, add a white divider line, implement a sign-in with Google button, and outline api endpoints for token validation.

Integrate firebase on the frontend by installing firebase, creating a config file, and initializing the app with env variables. Protect keys by using dot env, exporting storage, and updating gitignore.

Enable Firebase authentication with email/password and Google sign-in, configure client IDs and authorized domains, and set up email verification and account linking for the app.

Enable sign in with Google via Firebase authentication, choose popup or redirect, configure the Google provider, implement onClick and async signInWithPopup, and obtain an id token for backend validation.

Configure server cloud functions for a Firebase hosted Express API, load environment variables, enable cors, and export the app for a secure, scalable backend.

This lecture shows how to create an api endpoint for token validation, using a user route and jwt from the authorization header, with Firebase Admin for verification.

Validate a JWT on the frontend by calling an Axios API with a bearer token. Parse the response to obtain user data for state management.

Learn to implement sign up with email and password in a React/Firebase app, validating inputs, confirming passwords, creating user accounts, and clearing fields after signup.

Build and integrate a main page loader animation ui component within the full-stack food delivery app, aligning loading visuals with the Stripe payment and admin dashboard workflow.

Build a reusable alert notifications system with type and message, powered by Redux actions and a reducer, and display fixed top alerts with icons and color variants.

Build the main header UI for the full-stack food delivery app by creating a fixed top header with a logo, navigation links, and active link styling.

Configure the dashboard main navigation by creating routes and components for home, orders, items, new item, and users, wire them with React Router Dom, and finalize with material table integration.

Learn to integrate a data table using Material UI, install and configure Material Table, wrap it in a theme provider, and connect remote data with defined columns and actions.

Designs a new item form in the admin dashboard by building a reusable input value field component, mapping status categories, and highlighting the selected category with border styling.

Demonstrates deleting an uploaded image from cloud storage with Firebase storage deleteObject, resetting the image download URL, and displaying a custom progress bar and status messages indicating removal.

Create and submit a new product to a Firestore collection by collecting product details, uploading an image, and wiring a front-end button to a backend route with axios.

Develop and connect a product reducer and actions to fetch all products from a Firestore collection, expose them via an API, and dispatch to the Redux store on dashboard load.

Delete a product from the collection in the datatable using a confirmation dialog, an API call with the product id, and show a product removed successfully alert.

Builds the home screen UI for the fullstack food delivery app, creating the home component, responsive grid, hero text, delivery image, and product cards with stagger animation from firebase data.

Create a reusable slider card component for the home slider and filter section, wiring shared data, index, and props with image, name, rupee price, and a cart button.

Add a data filter section after home slider by creating a filter component with category statuses; click categories such as fruits to update active filter and display filtered products.

Learn to push cart items to a Redux store using set, get, and clear actions, wire the cart reducer, dispatch updates from App.js and Header, and render live cart counts.

Finish calculating the cart total and implement increment and decrement quantity in the cart, adding use effect for totals, and building api routes to update items.