Building a Simple Ecommerce Application with NextUI

Streamlining Development with UI Libraries

Developing a project from idea to production can be overwhelming, especially without a dedicated team of developers. Fortunately, UI libraries provide pre-built sets of functions and components that can be added to and modified in an application, simplifying the development process.

Introducing NextUI

NextUI is a new UI library for React and Next.js that provides many reusable components, such as navbar, tooltip, tab, and pagination components. In this article, we’ll explore how to use NextUI to build a simple ecommerce application.

What is a UI Library?

A UI library is a collection of pre-built UI components and elements that can be integrated into a project and customized to facilitate product development. These UI components and elements usually include buttons, navbars, tooltips, and more.

Why NextUI?

NextUI is a beautifully designed UI framework with visually appealing component style defaults. It also has accessible components and follows WAI-ARIA standards, offering keyboard support and logical focus management. Additionally, NextUI is built on top of the CSS-in-JS library Stitches, allowing for customization of any component using the css prop, styled function, or native CSS selectors.

import { styled } from '@nextui/core';

const CustomButton = styled('button', {
  backgroundColor: 'ed',
  color: 'white',
  borderRadius: '10px',
  padding: '10px 20px',
});

Setting Up Next.js and NextUI

To get started, we need to set up a Next.js app and install the NextUI package. Once installed, we need to set up the NextUIProvider at the root of our application.

import { NextUIProvider } from '@nextui/core';

function App({ Component, pageProps }) {
  return (
    <NextUIProvider>
      <Component {...pageProps} />
    </NextUIProvider>
  );
}

Building Our Application

With NextUI installed and set up, we can start building our application. We’ll create a SiteHeader using the NextUI Navbar component and add a store-hero/banner to the homepage using the Container, Card, and Spacer components.

import { Navbar, Container, Card, Spacer } from '@nextui/core';

function SiteHeader() {
  return (
    <Navbar>
      <Navbar.Brand>Ecommerce App</Navbar.Brand>
    </Navbar>
  );
}

function HomePage() {
  return (
    <Container>
      <SiteHeader />
      <Spacer y={2} />
      <Card>
        <Card.Body>Store Hero/Banner</Card.Body>
      </Card>
    </Container>
  );
}

Adding a Store-Hero to the Homepage

We’ll add a store-hero/banner to the homepage, introducing us to the Container, Card, and Spacer components. We’ll use a Spacer with a y (vertical) value of 2 to give space between the SiteHeader and store-hero.

Fetching Product Data

We’ll fetch product data within getServerSideProps from a demo API and return the data as props. We’ll then render a list of products with titles, descriptions, and prices.

export async function getServerSideProps() {
  const response = await fetch('https://demo-api.com/products');
  const data = await response.json();
  return {
    props: { products: data },
  };
}

Creating the ProductCard Component

We’ll create a ProductCard component using the Card component and add an add-to-cart function using the Context API.

import { Card } from '@nextui/core';
import { useContext, useState } from 'eact';
import { CartContext } from '../context/CartContext';

function ProductCard({ product }) {
  const [addedToCart, setAddedToCart] = useState(false);
  const { addToCart } = useContext(CartContext);

  const handleAddToCart = () => {
    addToCart(product);
    setAddedToCart(true);
  };

  return (
    <Card>
      <Card.Body>
        <h2>{product.title}</h2>
        <p>{product.description}</p>
        <p>${product.price}</p>
        <button onClick={handleAddToCart}>Add to Cart</button>
      </Card.Body>
    </Card>
  );
}

Global State Management Using Context API

We’ll set up global state management in Next.js using the Context API to manage the cart state.

import { createContext, useState } from 'eact';

const CartContext = createContext();

const CartProvider = ({ children }) => {
  const [cart, setCart] = useState([]);

  const addToCart = (product) => {
    setCart((prevCart) => [...prevCart, product]);
  };

  return (
    <CartContext.Provider value={{ cart, addToCart }}>
      {children}
    </CartContext.Provider>
  );
};

Adding the Badge to Display the Number of Cart Items

We’ll add a Badge to display the number of cart items using the Badge component.

import { Badge } from '@nextui/core';
import { useContext } from 'eact';
import { CartContext } from '../context/CartContext';

function CartBadge() {
  const { cart } = useContext(CartContext);

  return (
    <Badge>{cart.length}</Badge>
  );
}

Creating the CartItem Component

We’ll create a CartItem component to display individual cart items and update the cart state.

import { Card } from '@nextui/core';
import { useContext } from 'eact';
import { CartContext } from '../context/CartContext';

function CartItem({ product }) {
  const { cart, removeFromCart } = useContext(CartContext);

  const handleRemoveFromCart = () => {
    removeFromCart(product);
  };

  return (
    <Card>
      <Card.Body>
        <h2>{product.title}</h2>
        <p>${product.price}</p>
        <button onClick={handleRemoveFromCart}>Remove</button>
      </Card.Body>
    </Card>
  );
}

Adding the Carts Page

We’ll create a Carts page to display the cart items and update the cart state.

import { Container } from '@nextui/core';
import { useContext } from 'eact';
import { CartContext } from '../context/CartContext';

function CartsPage() {
  const { cart } = useContext(CartContext);

  return (
    <Container>
      <h1>Cart</h1>
      <ul>
        {cart.map((product) => (
          <li key={product.id}>
            <CartItem product={product} />
          </li>
        ))}
      </ul>
    </Container>
  );
}

Extending the Features of Our Ecommerce App

With the basics covered, we can extend the features of our ecommerce app and build out other applications using NextUI. Check out the official docs to learn more about NextUI and some great examples for React and Next.js.

• Learn more about NextUI
• Explore React and Next.js examples