Ecommerce App

Ecommerce App is a Next.js ecommerce web application template that pairs a customer storefront with an admin dashboard for managing products, orders, revenue, and client statistics. Published on GitHub by user abdelfetah18, this project uses Sanity.io as the content platform, Tailwind CSS for styling, and JWT authentication via the jose library for Next.js Edge Runtime.

What is Ecommerce App?

Ecommerce App is a full-stack ecommerce web application built on Next.js, using Sanity.io for the database/content backend and Tailwind CSS for styling. It takes product and order data managed through an admin dashboard and produces a customer-facing storefront with pages for home, my orders, checkout, sign-in, and sign-up, plus a statistics dashboard showing revenue and client metrics. The template runs on Node.js with production build and start commands provided.

Key Features

• Product and order CRUD — Create, edit, delete, and update products and orders from the admin dashboard.
• Revenue and client statistics — The dashboard displays total revenue, number of clients, and per-client statistics.
• Dark/light mode — Site-wide theme toggle between dark and light color schemes.
• Sanity.io integration — Sanity serves as the unified content platform, enabling real-time content collaboration.
• JWT authentication — Uses the jose library for JSON Web Tokens in Next.js Edge Runtime middleware to protect routes.
• Tailwind CSS styling — Utility-first CSS framework used for responsive and rapid UI development.
• Customer-facing pages — Includes Home, MyOrders, Checkout, SignIn, and SignUp screens.
• Admin pages — Includes Dashboard and CreateProduct views for store management.

Who is it for?

• Ecommerce developers — Use the template as a reference implementation for integrating Next.js, Sanity, and JWT auth in a storefront.
• Store owners — Get a ready-made dashboard to manage inventory, track orders, and monitor revenue without building admin tools from scratch.
• Next.js learners — Study how middleware-based JWT authentication and server-side rendering work together in an ecommerce context.

What can you do with it?

• Run an online store end-to-end: Manage products and orders through the dashboard while customers browse, sign in, and check out on the front end.
• Customize the commerce flow: Extend the Sanity schema or Tailwind theme to fit a specific brand or product catalog.
• Learn JWT edge auth: Examine the middleware setup using the jose library to see how protected routes behave in the Next.js Edge Runtime.

How does it work?

Clone the repository, install dependencies, and run npm run build followed by npm run start to start the production server on http://localhost:3000. The app connects to Sanity for data storage and uses JWT middleware for authentication on protected routes.

FAQ

What database does Ecommerce App use?

The template uses Sanity.io, a unified content platform, as its database. The repository includes a database schema screenshot showing the Sanity schema structure.

How do I authenticate users?

Authentication is handled with JSON Web Tokens (JWT) using the jose library, which is compatible with Next.js Edge Runtime middleware for route protection.

What styling framework is used?

Tailwind CSS is used for all styling, making the project easier to design and customize with utility classes.

Does it have dark mode?

Yes, the app includes a dark/light mode theme switch that changes the entire UI.