Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Use ChatGPT and Vercel to Build Next js Ecommerce Frontend
Rating: 4.0 out of 5(1 rating)
29 students

Use ChatGPT and Vercel to Build Next js Ecommerce Frontend

Build Responsive, AI-Powered Frontend E commerce Website from Scratch with NextJS, Tailwind CSS, and Cutting-Edge Tools
Created byRaghunadh Hital
Last updated 11/2024
English
English [Auto],

What you'll learn

  • Develop a full-featured frontend eCommerce website from scratch using Next js, Tailwind CSS, and TypeScript.
  • Build fully functional frontend eCommerce pages with responsive design, ensuring seamless user experiences across all devices.
  • Develop hands-on experience using Next js, Tailwind CSS, TypeScript, and ShadCN UI to create a fully customized eCommerce frontend from the scratch.
  • Gain the skills to leverage AI tools like Vercel's VO and ChatGPT to design and build high-quality websites with speed and precision.
  • Learn how to craft effective prompts for AI tools, enabling them to automate frontend code generation for quick and accurate website design
  • Build a Complete Frontend E-commerce Project from Scratch by only using AI tools.

Course content

3 sections • 63 lectures • 10h 44m total length

  • Introduction3:45

    Build an e-commerce frontend from scratch using Next.js, Tailwind, CSS, and TypeScript with shared CDN UI. Learn to use high-quality prompts with ChatGPT to generate code.

  • Prerequisites0:33

    Identify the prerequisites for this course: a basic understanding of Next.js, TypeScript, and Tailwind CSS. These foundations prepare you for the course demo.

  • Demo29:18

    Demonstrate building a responsive Next.js ecommerce frontend by starting with a starter template and converting it into a full site using ChatGPT, Vercel, Tailwind CSS, and UI components.

  • Project Setup9:05

    Initialize a Next.js project with TypeScript, ESLint, and Tailwind CSS in a manual website folder; configure layout and test locally with npm run dev.

  • Designing Navbar - part127:15

    Design and implement a responsive navbar for a Next.js ecommerce frontend using Chassis UI, Tailwind, and Lucid React icons, featuring a mobile hamburger menu and a sheet-driven navigation panel.

  • Designing Navbar - part21:09:02

    Design a responsive navbar featuring a dialog-based search modal, a sign-in pop-up, and a cart drawer. Map trending searches and recommended products to a user interface using placeholders and icons.

  • Designing Footer10:10

    Design a responsive ecommerce footer for a Next.js frontend, integrating Lucid React icons, company details, social links, category navigation, and a newsletter signup.

  • Designing Bottom Bar28:41

    Design and implement a mobile bottom bar for a Next.js ecommerce frontend, with home, menu, shop, cart, and account icons, and state-driven modals and sheets using a state management library.

  • Home Page - Designing Banner Carousel16:53

    Design the home page with a banner carousel that auto-plays every five seconds and allows next/previous navigation using a current index state in a client component.

  • Home Page - Designing Special Combos Section6:36

    Design a special combos section on the homepage by building a tsx component that uses database-fetched combo data and presents a horizontally scrollable, responsive layout.

  • Home Page - Designing Best Sellers Section21:52

    Build a responsive best-sellers section on the home page by creating a reusable product card in Next.js with TypeScript, including badges, pricing, ratings, and a scrollable product strip.

  • Home Page - Designing Category Section3:50

    Build a home page luxury category section in a TSX component, fetch or mock categories with images, map them into a responsive grid, and import the component into page TSX.

  • Home Page - Designing Crazy Deals Section2:12
  • Home Page - Designing Need Of Website Section9:19

    Design the home page need section by outlining features and benefits as icon cards in a responsive grid using next/image assets for a Next.js ecommerce frontend.

  • Home Page - Designing Review Section13:32

    Design a home page review section with a carousel to display customer testimonials, fetching reviews from a database and rendering star ratings and Instagram details.

  • Home Page - Designing Blog Images Section3:08

    Design the blog images component for the home page as a five-image, horizontally scrollable grid of 300x300 images with borders, then link each image to its blog and commit changes.

  • Designing Product Page49:58

    Design a full product page with image carousel, pricing and tax details, add-to-cart, feature highlights, an accordion for details, reviews with star ratings, and related products.

  • Designing Shop Page20:36

    Design a responsive shop page in a Next.js ecommerce frontend, featuring product cards, sort by, and category, product type, color, and price range filters.

  • Designing Checkout Page22:53

    Build a checkout page in a Next.js app by wiring step-by-step address, coupon, and payment UI with reusable components, state management, and a responsive layout.

  • Designing Order Success Page16:35

    Design and implement a Next.js order confirmation page for an ecommerce frontend, including an app/order/[id].tsx page, order details, billing and shipping sections, and a clear confirmation message.

  • Designing Track Order Page14:46

    Design a track order page for a Next.js ecommerce frontend by building a client component to input an order id and fetch details including status and estimated delivery.

  • Designing My Orders Page11:36

    Design a profile orders page in a Next.js app with a tsx page, tabs for all, paid, and unpaid orders, and a table displaying id, products, method, total, and status.

  • Completing Patch Work11:05

    Patch and optimize the ecommerce frontend by creating responsive banners for desktop and mobile, fixing submenus and layout issues in special combos and crazy deals.

  • Fixing Small Issues0:52

    Fix small issues in the theme by removing unused flex classes and restoring alignment. Convert the theme into a Next.js ecommerce frontend by adding image links.

Requirements

  • A computer with access to the internet
  • Basic Concepts of Next js, Tailwind CSS, and TypeScript
  • No paid A.I software required
  • I'll guide you step-by-step through the entire process of installing and setting up all the necessary software, ensuring you're fully equipped to start building right away.

Description

Course Description: Supercharge Your Frontend Development with AI Tools

Welcome to a new era of web development! This course is designed to elevate your frontend development skills using powerful AI tools like Vercel's VO and ChatGPT. With these advanced tools, you’ll learn how to create stunning, high-quality website designs, drawing inspiration from your favorite sites—no matter the complexity.


What You’ll Learn:

In this course, we’ll guide you step-by-step through the process of building full-fledged web designs. You'll start by using cutting-edge technologies like Next.js, Tailwind CSS, TypeScript, and ShadCN UI to create a complete eCommerce website from scratch. By the end of the first and second sections, you'll have hands-on experience designing and developing a beautiful, functional frontend by building and converting a starter template into a real website.

In the third section, we’ll dive into the exciting world of AI-powered web development. Here, you’ll rebuild the same eCommerce website we've built in sections 1 & 2, but now using AI tools, dramatically speeding up your workflow. You’ll learn how to craft effective prompts to guide AI in generating high-quality frontend code, empowering you to create amazing designs in a fraction of the time.


Who Is This Course For?

This course is ideal for beginners, mid-level developers, and professionals who want to incorporate AI into their workflow. A basic understanding of frontend coding is recommended.


By the End of This Course, You Will:

  • Gain hands-on experience with Next.js, Tailwind CSS, TypeScript, and ShadCN UI by building a full eCommerce frontend.

  • Learn how to harness the power of AI tools like Vercel’s VO and ChatGPT to streamline web development.

  • Master the art of crafting precise prompts for AI to generate high-quality code quickly and efficiently.

  • Be able to design and build websites with speed and precision, transforming your ideas into fully functional, responsive web designs.

Who this course is for:

  • If you're a fronted developer
  • If you want to build a complete eCommerce Frontend with Next JS, Shadcn UI and Tailwind CSS
  • If you're interested in integrating Artificial Intelligence into frontend development

Report abuse