Basic Shopping Website Frontend

An E-commerce / shopping website which was inspired by famous CMS like Shopify, Woocommerce.

Production Website

Getting Started

To run fronend in local, following these steps.

1.) Clone this repo.

git clone https://github.com/Vjumpkung/basic-shopping-website-frontend.git

2.) set up .env and install dependencies

• first rename .env.example to .env

NEXT_PUBLIC_API_URL=
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
NEXT_PUBLIC_CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=

Fill out these 4 variables.

NEXT_PUBLIC_API_URL (backend URL)

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME= cloudinary cloud name

NEXT_PUBLIC_CLOUDINARY_API_KEY= cloudinary api key

CLOUDINARY_API_SECRET= cloudinary secret

*using cloudinary for add upload image feature.

then... install dependencies

npm install

run the development server:

npm run dev

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

build:

npm run build

start (production mode)

npm run start

To Do List

User

• Show all products
• Product page
• Login/Logout
• Add to cart
• Orders
• Manage Address
• Change username/password
• Payment (Promptpay QR with specific amount)
• Upload slip (like forms)

Admin

• Products
• Choices
• Website Settings (name and logo)
• User
• Orders
• Slip
• Shipping