E-Commerce Website is a full-stack Next.js e-commerce template that combines Auth0 login, a MongoDB GraphQL backend, and Stripe.js payments with admin pages for managing products and orders.
What is E-Commerce Website?
E-Commerce Website is a Next.js-based storefront and admin panel that uses Auth0 for customer login, MongoDB with GraphQL for data, and Stripe.js for checkout. It takes product listings, user authentication, and order data as input and produces a customer shopping experience plus an admin interface for adding products, changing stock, and viewing orders. A live demo is hosted at https://e-commerce-website-j8wvkus9z-pudderz.vercel.app/. The repository is public on GitHub.
Key Features
- Auth0 login authentication — Customers sign in through Auth0, which handles credentials and identity for the storefront.
- JWT access tokens — Authenticated requests to the GraphQL API are authorized using JWT access tokens.
- MongoDB GraphQL backend — Queries and mutations for products and orders run against a MongoDB database.
- Stripe.js payments — Checkout uses Stripe.js, so card payments are processed without a custom payment gateway.
- Google Analytics most popular section — Analytics data powers a "most popular" product section on the storefront.
- Admin pages — Administrators can add products, change stock levels, and view incoming orders.
- Next.js framework — The entire project, including both storefront and admin routes, is built on Next.js for React.
Who is it for?
- Independent store owners — Launch a storefront with authentication, payments, and an admin panel without building the stack from scratch.
- Next.js developers — Use the codebase as a reference for wiring Auth0, GraphQL with MongoDB, and Stripe together in one project.
- Full-stack learners — Study how JWT-protected GraphQL mutations and Stripe checkout are implemented in a real application.
What can you do with E-Commerce Website?
- Sell products online — Set up a storefront where visitors log in with Auth0, browse products, and pay through Stripe.js.
- Manage inventory — Use the admin pages to add new products and update stock counts.
- View orders — Check incoming orders in the admin area to see what customers purchased.
- Showcase popular items — The Google Analytics integration creates a "most popular" section based on real visitor behavior.
How does E-Commerce Website work?
The project separates a Next.js frontend from a MongoDB-backed GraphQL API. Users log in with Auth0 to obtain JWT access tokens, which are sent with GraphQL mutations and queries. The storefront calls Stripe.js for payment processing, while admin routes use the same API to create products, change stock, and list orders.
FAQ
What tech stack does E-Commerce Website use?
It uses Next.js on the frontend, a GraphQL API backed by MongoDB, Auth0 for authentication, JWT access tokens for authorization, and Stripe.js for payments. Google Analytics is also integrated to power a most-popular product section.
Is there a live demo?
Yes, a demo is available at https://e-commerce-website-j8wvkus9z-pudderz.vercel.app/. The demo shows the storefront and admin functionality in action.
What admin features are included?
Admin pages let you add products, change stock levels, and view orders. The project's to-do list notes that dark mode, more detailed order information, file upload sanitization, and admin route styling are not yet implemented.
