Skip to content

Zonama is a full-featured e-commerce app like amazon. It is also a full stack project with NextJS, MongoDB, paypal gateway, google map, and Material UI(MUI).

Notifications You must be signed in to change notification settings

yuxianxu/zonama-ecommerce-Nextjs-MUI

Repository files navigation

zonama

Zonama is a full-featured E-commerce app like amazon. It is also a full stack project with NextJS and MongoDB.

Live Demo

zonama

Technologies

  • NextJS: dynamic routing, image optimization, SSG(Static-site generation) and SSR(Server-side rendering)
  • MaterialUI: framework to build responsive website using custom theme, animation, darkmode, and carousel
  • ReactJS: including decomposing components, context API and hooks
  • Next Connect package: to build backend API
  • MongoDB and Mongoose: to save and retrieve data like products, orders and users
  • PayPal developer api: to make online payment
  • Deployment: Deploy web applications on servers like Vercel
  • JWT Auth: authorization
  • Cloudinary: images cloud storage
  • Google login: Will update this feature later

Homepage

Homepage

Feature

Full function

  • users: Sign up, browsing, searching, placing order, and checking delivery
  • administrators: scalable backend dashboard including creating new product page and managing orders

Products

  • list page
  • edit page
  • create page
  • image uploaded

Users

  • admin setting page
  • profile page
  • edit page

Orders

  • list page
  • summary
  • payment status
  • delivery status

Payment

  • payment methods
  • payment redirect page
  • paypal and credit card supported

More Screenshots

homepage

Homepage

Mobile view - responsive design

Mobile view

Search products by category

Search products by category

Footer

Footer

Shopping cart

Shopping cart

Checkout

Checkout

Checkout

Payment

Payment method Payment gateway

Administrator

Administrator - dashboard

Administrator - products

Administrator - users

Dark mode

Dark mode

Getting Started

First, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

More

This project is followed by Basir's channel on Udemy and modified by Yuxian Xu

About

Zonama is a full-featured e-commerce app like amazon. It is also a full stack project with NextJS, MongoDB, paypal gateway, google map, and Material UI(MUI).

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published