Build and Deploy an Ecommerce Website with NextJS 15, Stripe, TailwindCSS

Key Concepts

• Full-stack e-commerce platform: Building a complete online store with both front-end and back-end functionalities.
• Next.js: A React framework for building server-rendered and statically generated web applications.
• Tailwind CSS: A utility-first CSS framework for rapidly styling HTML elements.
• Shadcn UI: A collection of accessible and reusable UI components built with Radix UI and Tailwind CSS.
• Stripe: A payment gateway for processing online transactions and managing product information.
• Zustand: A minimalist state management library for React.
• Vercel: A platform for deploying and hosting web applications.

Project Setup and Initial Configuration

• Creating a Next.js app: Using npx create-next-app to scaffold a new Next.js project.
  • Project name is set to ".".
  • TypeScript, ESLint are enabled.
  • Tailwind CSS is installed manually to use version 4.
• Installing Tailwind CSS v4: Following the official documentation to install the latest version of Tailwind CSS.
  • Commands copied from Tailwind CSS documentation (link in description).
  • postcss.config.js file created and configured.
  • @tailwind directives imported in global.css.
• Installing Shadcn UI: Using npx shadcn-ui@latest init to initialize Shadcn UI.
  • Base color set to "neutral".
  • Legacy peer dependencies chosen to avoid conflicts.
• Setting up the layout: Modifying layout.tsx to include a <main> tag and a <Navbar> component.
  • <Navbar> component created in components/Navbar.tsx.

Navbar Component

• Creating the Navbar: Building the navigation bar with links to the homepage, products page, and checkout page.
  • Using <Link> component from next/link for navigation.
  • Placeholder for cart information added.
• Creating route components: Generating page.tsx files for the products and checkout routes within their respective folders in the app directory.

Homepage

• Homepage structure: Designing the homepage with a product image, text description, a "Browse all products" button, and a product carousel.
• Integrating Stripe: Connecting the project to Stripe to fetch product information.
  • Installing the Stripe library: npm install stripe.
  • Creating a stripe.ts file in the lib folder to instantiate the Stripe client with the secret key.
  • Secret key stored in .env file and accessed using process.env.STRIPE_SECRET_KEY.
• Fetching products from Stripe: Using the Stripe client to query product data.
  • stripe.products.list() used to retrieve a list of products.
  • expand property used to retrieve default price data.
  • limit property used to limit the number of products returned.
• Displaying product information: Rendering product images, titles, and descriptions on the homepage.
  • Using <Image> component from next/image.
  • Configuring next.config.js to allow image domains from Stripe.
• Carousel Component: Creating a dynamic carousel to display product images.
  • Using useState and useEffect to manage the carousel's state and animation.
  • Using setInterval to automatically switch between images every 3 seconds.
  • Using Shadcn UI's Card component for styling.

Products Page

• Fetching all products: Retrieving all products from Stripe without limiting the number of results.
• Product List Component: Creating a component to display a list of products with a search input.
  • Using products.map to iterate through the list of products.
• Product Card Component: Creating a reusable component to display individual product information.
  • Using <Link> component to navigate to the product detail page.
  • Using Shadcn UI's Card component for styling.
• Search Functionality: Implementing a search filter to filter products based on user input.
  • Using useState to manage the search term.
  • Using products.filter to filter the list of products based on the search term.
  • Filtering based on both product name and description.

Product Detail Page

• Dynamic Routing: Creating a dynamic route to display individual product pages based on the product ID.
  • Using square brackets [id] to define a dynamic route parameter.
• Fetching Product Details: Retrieving product details from Stripe based on the product ID.
  • Using stripe.products.retrieve() to fetch the product data.
• Product Detail Component: Creating a component to display detailed product information.
  • Displaying product images, titles, descriptions, and prices.
  • Adding "Add to Cart" buttons.

Cart Functionality

• Zustand Setup: Implementing state management using Zustand to manage the cart state.
  • Installing Zustand: npm install zustand.
  • Creating a cartStore.ts file in the store folder.
  • Defining interfaces for CartItem and CartStore.
  • Using create function from Zustand to create a store.
  • Using persist middleware to persist the cart data in local storage.
• Adding Items to Cart: Implementing the addItem function to add items to the cart.
  • Checking if the item already exists in the cart.
  • Updating the quantity if the item exists, otherwise adding the item to the cart.
• Removing Items from Cart: Implementing the removeItem function to remove items from the cart.
  • Filtering the list of items to remove the specified item.
• Clearing the Cart: Implementing the clearCart function to clear all items from the cart.
• Integrating Cart State: Using the useCartStore hook in the ProductDetail component to access and modify the cart state.
  • Displaying the quantity of the item in the cart.
  • Adding "Add to Cart" and "Remove from Cart" buttons.

Navbar Enhancements

• Adding Cart Icon: Adding a shopping cart icon to the navbar with a cart count.
  • Using heroicons library for the shopping cart icon.
  • Calculating the total number of items in the cart using items.reduce.
• Mobile Responsiveness: Implementing a mobile-friendly navbar with a hamburger menu.
  • Using useState and useEffect to manage the mobile menu state.
  • Using media queries to conditionally render the mobile menu.

Checkout Page

• Displaying Cart Items: Displaying a list of items in the cart with their names, prices, and quantities.
• Calculating Total: Calculating the total price of all items in the cart.
• Checkout Form: Creating a form to submit the cart data to Stripe.
  • Adding a hidden input field to store the cart items as a JSON string.
• Checkout Action: Creating a server action to handle the checkout process.
  • Parsing the cart items from the form data.
  • Creating line items in the format required by Stripe.
  • Creating a checkout session using stripe.checkout.sessions.create().
  • Redirecting the user to the Stripe checkout page using redirect().
• Success and Cancel URLs: Configuring the success and cancel URLs for the Stripe checkout session.
• Clear Cart on Success: Clearing the cart after a successful payment.
  • Creating a success page to display a thank you message.
  • Using useEffect to clear the cart when the success page is loaded.

Deployment

• Stripe Account Setup: Converting the Stripe account from test mode to live mode.
  • Completing the business profile and providing necessary information.
• GitHub Repository: Creating a GitHub repository for the project.
• Vercel Deployment: Deploying the project to Vercel.
  • Connecting the Vercel account to the GitHub repository.
  • Adding environment variables to Vercel.
  • Triggering a deployment by pushing code to the GitHub repository.
• Updating Base URL: Updating the NEXT_PUBLIC_BASE_URL environment variable in Vercel to the deployed URL.

Conclusion

The video provides a comprehensive guide to building a full-stack e-commerce platform using Next.js, Tailwind CSS, Shadcn UI, and Stripe. It covers everything from setting up the project and designing the UI to implementing cart functionality, processing payments, and deploying the application. The video emphasizes the importance of using modern technologies and best practices to create a scalable and user-friendly e-commerce experience.