Mastering React 18: Build A Swiggy-Style Food App

Learn to build a fast, scalable food delivery app using React 18, Parcel, and modern best practices!

What you'll learn

Master React 18 – Understand the latest features, hooks, and best practices.

Build a Swiggy-Style Food App – Develop a real-world food delivery platform from scratch.

Optimize Performance – Learn React optimizations like lazy loading, code splitting, and memoization.

State Management with Redux Toolkit – Manage global state efficiently for a scalable app.

React Router for Seamless Navigation – Implement dynamic routing and page transitions.

Work with APIs – Fetch and display real-time restaurant data using modern API integration.

Industry Best Practices – Follow scalable, maintainable coding standards used in top companies.

Requirements

Basic knowledge of JavaScript and ES6+ syntax.

Familiarity with HTML & CSS fundamentals.

Basics of React.js is required

A willingness to learn and build real-world projects!

Description

100+ Videos | 7+ Hours | Hands-on Project | Fast-Paced LearningLooking to master React 18 and build real-world applications? This crash course takes you through building a complete food delivery app from scratch, mimicking Swiggy’s functionality using the latest tools and best practices.What You’ll Learn:React 18 Fundamentals & Advanced Concepts – Hooks, Context API, Lazy Loading, Error BoundariesParcel Bundler – Super-fast builds, Hot Module Replacement (HMR), Code Splitting, Tree ShakingRouting & Navigation – Implementing React Router for a seamless user experienceState Management – Efficient data handling using Context API and useReducerAPI Integration – Fetch live restaurant data dynamicallyShimmer UI & Skeleton Loading – Enhance UX with smooth preloading effectsCustom Hooks & Performance Optimization – Write cleaner, reusable, and efficient codeAuthentication & Authorization – Implement user login and security best practicesWhether you're an intern, junior developer, senior developer, tech lead, architect, or senior architect, this course offers a tailored path to elevate your expertise. You'll engage in hands-on projects, reinforce your learning with quizzes, and stay updated with yearly content refreshes.Why Take This Course?Crash Course Format – Straight to the point, no fluff, practical codingProject-Based Learning – Work on a real-world food delivery appIndustry-Relevant Skills – Learn how modern web apps are built and deployedWho Should Enroll?- Interns: Build a solid foundation for a tech career by applying academic knowledge to real-world projects.- Junior Developers: Upgrade your skill set with advanced full-stack e-commerce development practices.- Senior Developers: Lead the way in e-commerce application development.- Tech Leads: Direct cutting-edge projects with confidence, leveraging Web Technology using React.- Architects: Incorporate insights into your design strategies for innovative, scalable e-commerce solutions.- Senior Architects: Pioneer the integration of robust architecture, leading high-impact projects with expertise.By the end of this course, you’ll have a fully functional Swiggy-style food delivery app and the confidence to build scalable React applications!Join now and start building your next big project!

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Solution Walkthrough

Lecture 3 Github Strategy

Lecture 4 Application Demo

Lecture 5 About the Blog

Section 2: 2. Getting Started

Lecture 6 Introduction

Lecture 7 Introduction to Parcel

Lecture 8 Initializing the Project

Lecture 9 Installing Dependencies

Lecture 10 Creating Index Page

Lecture 11 Running the App

Lecture 12 Fixing the Script Reference

Lecture 13 Fixing the Console Warning

Lecture 14 Creating Folder Structure & Infra Setup

Lecture 15 Github Strategy

Section 3: Creating Application Design

Lecture 16 Introduction

Lecture 17 Creating App Layout

Lecture 18 Creating the Header Component

Lecture 19 Fixing the Style

Lecture 20 Creating Restaurant Card

Lecture 21 Creating Body Component

Lecture 22 Implementing the Search Functionality

Lecture 23 Fetching Top Rated Restaurants

Lecture 24 Implementing Reset Filters

Section 4: Fetching Data From API

Lecture 25 Introduction

Lecture 26 Setting the API

Lecture 27 Installing JSON Server

Lecture 28 VS Code Extensions

Lecture 29 Using Use Effect Hook

Lecture 30 Fetching Data From API

Lecture 31 Using the Fetched Data from the server

Lecture 32 Creating Shimmer Component

Lecture 33 Implementing Shimmer Component

Lecture 34 Fixing the Display Logic

Section 5: Routing

Lecture 35 Introduction

Lecture 36 Creating App Layout

Lecture 37 Understanding Import React

Lecture 38 Creating About Us Component

Lecture 39 Creating About Us Style

Lecture 40 Creating Contact Us Page - 1st Part

Lecture 41 Creating Contact Us Page - 2nd Part

Lecture 42 Installing React Router DOM

Lecture 43 Creating Route Definition

Lecture 44 Modifying the App Layout

Lecture 45 Modifying the Header page

Lecture 46 Fixing the Contact Page CSS

Lecture 47 Creating Error Page

Section 6: Creating the Menu Section

Lecture 48 Introduction

Lecture 49 Creating the Menu Page 1st Part

Lecture 50 Understanding the Menu Page

Lecture 51 Fetching Data for Menus -1st Part

Lecture 52 Fetching Data for Menus - 2nd Part

Lecture 53 Styling the Menu Page

Lecture 54 Modifying Restaurant Card

Lecture 55 Making Router Changes

Lecture 56 Fixing the Route

Lecture 57 Fixing the CSS

Section 7: Creating Custom Hooks

Lecture 58 Introduction

Lecture 59 Creating Custom Hook Use Restaurants

Lecture 60 Using Custom Hook inside Body Component

Lecture 61 Creating Custom Hook Use Restaurant Menu

Lecture 62 Using Restaurant Menu Hook inside Body

Lecture 63 Fixing the Async Call

Lecture 64 Creating Spinner Component

Lecture 65 Created Lazy Loaded Routes

Lecture 66 Adding Suspense to Lazy Routes

Lecture 67 App Layout Changes

Lecture 68 Fixing Code Splitting

Section 8: Creating Redux Store

Lecture 69 Introduction

Lecture 70 Creating Cart Page

Lecture 71 Creating Cart Style

Lecture 72 Updating Route

Lecture 73 About React Redux

Lecture 74 Installing the Packages

Lecture 75 Creating Cart Slice

Lecture 76 Creating the Store

Lecture 77 Testing Functionality So far

Lecture 78 Using Dispatch Action in Restaurant Menu Page

Lecture 79 Fixing the State Issue

Lecture 80 Fixing the Key attribute issue

Lecture 81 Fetching the cart items using Selector

Lecture 82 Identifying the Cart Issue

Lecture 83 Fixing the Cart Logic

Section 9: Improving the UX

Lecture 84 Introduction

Lecture 85 Installing Toast and Font Awesome Packages

Lecture 86 Adding the Cart Icon

Lecture 87 Fixing the Style

Lecture 88 Fixing the Cart Count in Header

Lecture 89 Adding the Toast Notifications

Lecture 90 Modifying the Cart Slice Implementation

Lecture 91 Modifying the Cart Page

Lecture 92 Styling the Icons

Section 10: Implementing Checkout

Lecture 93 Introduction

Lecture 94 Creating the Auth Slice

Lecture 95 Understanding the difference between Slice Implementations

Lecture 96 Implementing the Store Changes

Lecture 97 Creating Login Component

Lecture 98 Styling the Login page

Lecture 99 Adjusting the Route Definition in Index page

Lecture 100 Adjusting the Header Page

Lecture 101 Aligning the Menus

Lecture 102 Modifying the Cart Functionality

Section 11: Bonus Section

Lecture 103 Bonus Lecture

Aspiring React developers looking to gain hands-on experience by building a real-world project.,Frontend developers who want to upskill and integrate their applications with a backend API.,Entrepreneurs and business owners looking to create a food ordering platform.,Students and professionals who want to strengthen their portfolio with a practical React project.