NextJS MongoDB E-Commerce Platform

Here's a comprehensive tutorial on using NextJS with MongoDB as an e-commerce platform:

Introduction

Welcome to the world of e-commerce! Building an e-commerce platform can be a challenging but rewarding experience. NextJS is a popular framework for building server-side rendered (SSR) web applications, and MongoDB is a powerful NoSQL database for storing and managing your data. In this tutorial, we'll show you how to use NextJS with MongoDB to build a fully-fledged e-commerce platform.

Prerequisites

Before we begin, make sure you have:

• Node.js installed (latest version recommended)
• yarn or npm installed (to manage dependencies)
• Familiarity with JavaScript, React, and Next.js (if you're new to these technologies, I recommend checking out the Next.js documentation and some basic tutorials)

Step 1: Setting up your project

Create a new directory for your project, and navigate to it:

mkdir my-e-commerce-platform
cd my-e-commerce-platform

Initialize a new Next.js project using the create-next-app command:

npx create-next-app my-app --ts

This will create a new Next.js project with a TypeScript configuration.

Step 2: Installing necessary dependencies

Install the following dependencies:

• express for handling HTTP requests and responses
• mongoose for interacting with your MongoDB database
• multer for handling file uploads
• stripe for processing payments (optional)

You can install these dependencies by running the following command:

yarn add express mongoose multer stripe

Step 3: Setting up your database

Create a new file called database.js and add the following code:

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost/my-e-commerce-platform', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  useFindAndModify: false,
});

module.exports = mongoose;

This code sets up a connection to your local MongoDB instance. Make sure to replace mongodb://localhost/my-e-commerce-platform with your own database connection string.

Step 4: Creating models and schema

Create a new file called models/index.js and add the following code:

const mongoose = require('../database');

const productSchema = new mongoose.Schema({
  name: String,
  description: String,
  price: Number,
  images: [String],
});

const Product = mongoose.model('Product', productSchema);

const orderSchema = new mongoose.Schema({
  date: Date,
  totalPrice: Number,
  products: [{ type: mongoose.Schema.Types.ObjectId, ref: 'Product' }],
});

const Order = mongoose.model('Order', orderSchema);

module.exports = { Product, Order };

This code defines two models: Product and Order. The Product model has fields for the product name, description, price, and images. The Order model has fields for the order date, total price, and an array of product IDs.

Step 5: Creating API endpoints

Create a new file called api/index.js and add the following code:

const express = require('express');
const router = express.Router();
const { Product, Order } = require('../models');

router.get('/products', async (req, res) => {
  const products = await Product.find().exec();
  res.json(products);
});

router.get('/orders', async (req, res) => {
  const orders = await Order.find().exec();
  res.json(orders);
});

router.post('/orders', async (req, res) => {
  const order = new Order({
    date: new Date(),
    totalPrice: req.body.totalPrice,
    products: req.body.products,
  });
  await order.save();
  res.json(order);
});

router.post('/products', async (req, res) => {
  const product = new Product({
    name: req.body.name,
    description: req.body.description,
    price: req.body.price,
    images: req.body.images,
  });
  await product.save();
  res.json(product);
});

module.exports = router;

This code creates four API endpoints:

• GET /products retrieves a list of products
• GET /orders retrieves a list of orders
• POST /orders creates a new order
• POST /products creates a new product

Step 6: Creating a Next.js pages

Create a new file called pages/index.tsx and add the following code:

import Head from 'next/head';
import Link from 'next/link';
import { Product } from '../models';

const Home = () => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    async function fetchProducts() {
      const response = await fetch('/api/products');
      const productsData = await response.json();
      setProducts(productsData);
    }
    fetchProducts();
  }, []);

  return (
    <div>
      <Head>
        <title>My E-commerce Platform</title>
      </Head>
      <h1>My E-commerce Platform</h1>
      <ul>
        {products.map((product) => (
          <li key={product._id}>
            <Link href="/products/[id]" as={`/products/${product._id}`}>
              <a>{product.name}</a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Home;

This code creates a simple home page that retrieves a list of products from the API endpoint and displays them as links.

Step 7: Creating a product detail page

Create a new file called pages/products.tsx and add the following code:

import { Product } from '../models';
import { getStaticPaths } from 'next';

const ProductPage = async ({ params }) => {
  const product = await Product.findById(params.id).exec();

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <img src={product.images[0]} alt={product.name} />
    </div>
  );
};

export const getStaticPaths = async () => {
  const products = await Product.find().exec();
  const paths = products.map((product) => ({
    params: { id: product._id.toString() },
  }));
  return { paths, fallback: false };
};

export default ProductPage;

This code creates a product detail page that retrieves the product by ID and displays its name, description, and first image.

Step 8: Creating an order page

Create a new file called pages/order.tsx and add the following code:

import { useState } from 'react';
import { Order } from '../models';

const OrderPage = () => {
  const [products, setProducts] = useState([]);
  const [totalPrice, setTotalPrice] = useState(0);

  const handleAddToCart = (product) => {
    setProducts([...products, product]);
    setTotalPrice((prevTotalPrice) => prevTotalPrice + product.price);
  };

  const handleCheckout = async () => {
    const order = new Order({
      date: new Date(),
      totalPrice,
      products: products.map((product) => product._id),
    });
    await order.save();
    // Send a confirmation email and reset the cart
  };

  return (
    <div>
      <h1>Order</h1>
      <ul>
        {products.map((product) => (
          <li key={product._id}>
            <span>{product.name}</span>
            <span>Price: ${product.price}</span>
            <button onClick={() => handleRemoveFromCart(product)}>Remove</button>
          </li>
        ))}
      </ul>
      <p>Total Price: ${totalPrice}</p>
      <button onClick={handleCheckout}>Checkout</button>
    </div>
  );
};

export default OrderPage;

This code creates an order page that allows users to add products to their cart and calculates the total price. It also includes a checkout button that creates a new order when clicked.

Step 9: Running the application

Run the application using the following command:

yarn next dev

Open your web browser and navigate to http://localhost:3000 to see your e-commerce platform in action!

That's it! You've just built a fully-fledged e-commerce platform using Next.js and MongoDB. From here, you can add more features, such as payment processing, user accounts, and more. Good luck with your project!