Skip to content

Latest commit

 

History

History
121 lines (71 loc) · 3.94 KB

README.md

File metadata and controls

121 lines (71 loc) · 3.94 KB

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