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 jаvascript 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.

Homepage:

https://www.udemy.com/course/mastering-react-18-build-a-swiggy-style-food-app/