Skip to content

E-commerce App using NEXTJS 13 , TypeScript , SWR , Redux toolkit , Mongoose , react hook forms

Notifications You must be signed in to change notification settings

Abdullah-moiz/nextjs-ecommerce

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

App is live and running at

  • don't forget to leave a star ! :)

Authors

Features

NOTE

  • Admin Dashboard is only accessible to you if you clone it you can't Signup for Admin Account I have added dummy Product and categories

multi User Login System

  • SignIn / SignUp âś”
  • Forget Password âś”
  • JWT validation on each Authorized Request âś”
  • Authorization validation for Admin Access and Customer Access âś”

ADMIN PANEL

  • Add a product âś”
  • view Product âś”
  • Delete a Product âś”
  • update product âś”
  • Add a Category âś”
  • view Category (Data tables) âś”
  • update Category âś”
  • Delete category âś”
  • search category By name âś”
  • search product by category Name âś”
  • Handle Order Delivery âś”
  • Pending Order List âś”
  • Completed Order List âś”

Customer

  • View Product & Category âś”
  • view product related to specific category âś”
  • view dynamic pages detail with breadcamp âś”
  • Add product to cart âś”
  • Remove Product from cart âś”
  • Increase Decrease cart Item Quantity âś” (IF product Instock Quantity is less then your cart quantity then you are unable to increase that product Quantity)
  • Alert if InStock Quantity isn't Available âś”
  • Bookmark favourite Product âś”
  • remove product from bookmark âś”
  • Order a Product âś”
  • After Creating an Order Product Exists in Cart for current User will be Cleared âś”
  • track Order Status âś”
  • View Order Detail âś”

Note

More Functionality will be added with time

Tech

  • Nextjs 13
  • Typescript
  • tailwind css
  • Redux toolkit
  • joi validation
  • mongoDB
  • SWR hooks for fetching API

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

DB_URI = Your mongoDB URL

JWT_SECREAT = Your custom JWT_SECREAT key

NEXT_PUBLIC_API_BASE_URL = Base URL for localhost => http://localhost:3000

Installation

Install my-project with npm

  npm install
  npm run dev (for development server)
  npm run build (for Production)
  npm run preview (To View Production Server )

Screen shots

Admin Dashboard

1

Admin Add Product

image

Admin Add Category

image

Admin View Category

image

Admin View Product

image

Admin Search Product with category Name

image

Admin Search category with category Name

image

Pending Order List

image

Completed Order List

image

Landing Page

image

image

image

view Product of Specific category with Dynamic Breadcamp

image

image

view Product of Detail with Dynamic Breadcamp

image

Cart Page

image

Alert IF Item Quantity isn't available in stock

image

Favourite Products

image

Delete Favourite Products

image

Search Favourite Products with product Name

image

Order a Product

image

Track Orders

image

Check order Details

image