Build and Deploy a Full Stack E-Commerce App with an Admin Dashboard & CMS in 2024 | Next. Stripe

Introduction

In this tutorial, you'll learn how to build and deploy a full-stack e-commerce application with an admin dashboard and content management system (CMS) using Next.js, Stripe, TypeScript, and Payload CMS. This comprehensive guide will walk you through each step of the process, ensuring you have a functional webshop ready for deployment.

Step 1: Set Up Your Development Environment

Before you begin coding, make sure you have the necessary tools installed.

• Install Node.js and npm (Node Package Manager).
• Choose an IDE like WebStorm or Visual Studio Code for coding.
• Create a new directory for your project and navigate into it:

mkdir ecommerce-app
cd ecommerce-app

Step 2: Initialize Your Next.js Project

Create a new Next.js application from your project directory.

• Run the following command to create a new Next.js app:

npx create-next-app@latest .

• Choose TypeScript when prompted to set up TypeScript support.

Step 3: Install Required Packages

You will need several packages for the e-commerce functionality:

• Install Stripe for payment processing:

npm install stripe

• Install Payload CMS for managing content:

npm install payload

• Optionally, install other libraries like axios for API calls if needed:

npm install axios

Step 4: Configure Payload CMS

Set up Payload CMS to manage your products and content.

• Create a payload.config.ts file in the root of your project.

• Define your collections for products, categories, and any other content types. For example:

import { buildConfig } from 'payload/config';

export default buildConfig({
  collections: [
    {
      slug: 'products',
      fields: [
        { name: 'name', type: 'text' },
        { name: 'price', type: 'number' },
        { name: 'description', type: 'textarea' }
      ],
    },
  ],
});

Step 5: Create Your Product Pages

Design and implement the pages where users can view and purchase products.

• Create a pages/products/[id].tsx file to display individual product details.
• Fetch product data from Payload CMS using getStaticProps or getServerSideProps.

Example code to fetch data:

export async function getStaticProps({ params }) {
  const product = await fetchProductFromCMS(params.id);
  return { props: { product } };
}

Step 6: Implement Stripe Payment

Set up payment processing with Stripe.

• Create a checkout session on your server:

import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export async function createCheckoutSession(req, res) {
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: [{ price_data: { ... }, quantity: 1 }],
    mode: 'payment',
    success_url: `${process.env.NEXT_PUBLIC_URL}/success`,
    cancel_url: `${process.env.NEXT_PUBLIC_URL}/cancel`,
  });
  res.json({ id: session.id });
}

• Ensure to handle payment confirmation and success pages.

Step 7: Build the Admin Dashboard

Create an admin interface for managing products.

• Set up a separate admin route in your Next.js app (e.g., /admin).
• Use forms to add, update, or delete products, connecting them to Payload CMS API.

Example form submission:

async function handleSubmit(data) {
  await fetch('/api/products', {
    method: 'POST',
    body: JSON.stringify(data),
    headers: { 'Content-Type': 'application/json' },
  });
}

Step 8: Deploy Your Application

Once your application is ready, deploy it to a hosting platform.

• Use platforms like Vercel or Netlify for easy deployment of Next.js applications.
• Follow the deployment instructions specific to your chosen platform.

Conclusion

You have successfully built and deployed a full-stack e-commerce application with an admin dashboard and CMS. This project showcases the power of Next.js, Stripe, TypeScript, and Payload CMS. Consider enhancing your app with additional features such as user authentication, product reviews, or improved styling. Keep exploring and building!