An ECommerce website powered by CommerceJS and NextJS
- Open http://github.com/basir/coolshop-final.git
- Fork repo
- Open terminal
$ git clone [email protected]:basir/coolshop-final.git
$ cd coolshop-final
Create account on CommerceJS website and get your api keys.
COMMERCE_PUBLIC_KEY_LIVE=pk_xxx
COMMERCE_SECRET_KEY_LIVE=sk_xxx
$ npm install
$ npm run dev
Create a product on CommerceJS dashboard.
- Set SHIPPING OPTIONS to enabled
- Set Domestic (United States) to enabled
- open website on http://localhost:3000
- select one product
- add to cart
- proceed to checkout
- confirm order
- open admin dashboard on https://dashboard.chec.io/orders
- find the last order
- check email to see the order
- open https://vercel.com
- sign up and login to your account
- Open https://vercel.com/dashboard
- Click Import Project
- Click Import Git Repository
- Enter forked repo for coolshop on your github
- give permission in github to vercel
- Enter name:COMMERCE_PUBLIC_KEY_LIVE
- Enter value: your public key on Commercejs
- click deploy button
- wait to complete deployment
- click Visit Site at the end
- Introduction
- What we will build
- What we will learn
- What are requirements
- What is CommerceJS
- What is NextJS
- Conclusion
- Create NextJS App and Deploy on Vercel
- run npx create-next-app
- answer questions
- create github repo
- push to github
- create vercel account
- connect to vercel
- deploy on vercel
- Create Products On CommerceJS
- Create CommerceJS account
- Create a merchant
- Create a product
- Enter image, name, price, shipping, ...
- Create 2 more products
- List Products
- Create utils/commerce.js
- Edit pages/index.js
- commerce.products.list()
- Show products in divs
- Create React Context
- Create Store.js
- Create _app.js
- set publicKey in page props
- Design MaterialUI Layout
- Install MaterialUI packages
- Create _document.js
- Create Layout.js
- Style Product List Screen
- Use Layout
- Show alert on no product found
- Create Grid, Slide, ...
- Create Product Details Screen
- create products/[id].js
- create 2 columns
- Implement Add To Cart action
- check cart line items
- add or update item in the cart
- redirect to /cart
- Show Cart Menu on Header
- Create CART_RETRIEVE actions
- show cart items in header
- Create Cart Screen
- add cart items columns
- add cart summary columns
- update cart item
- remove cart item
- proceed to checkout
- Create Checkout Screen
- Create checkout form and order summary columns
- create steppers to make a wizard
- add customer details inputs
- add Shipping details inputs
- add Payment information inputs
- Implement Checkout Actions
- Create order
- Show error on creating order
- Set order in Context
- redirect user to confirmation screen on success
- Create order confirmation screen
- Show order summary
- Show order details