chainshifu-ecommerce

Building ecommerce website with React Js + Next Js + TypeScript + Node Js + Express + MongoDB + Material-UI + Tailwind-CSS ⚡️ Made with developer experience first ESLint + Prettier + VSCode setup with complete user authentication (a mobile-friendly).

Table of contents

• Author
• Demo
• Technologies
• Optimizations
• Contributing
• Status
• Features
• Inspiration
• Related Projects
• Support
• Feedback
• Run Locally
• Screenshots

Author

@chainshifu

Technologies

Client:

• React Js
• Next Js
• TypeScript
• Redux
• Tailwind CSS
• Material-UI
• Material-UI
• Vercel Hosting

Server:

• Node.js
• Express
• MongoDB
• JSON Web Token (JWT)
• bcryptjs
• Heroku Hosting

Demo

Back-End API REPO

LIVE API Demo

Testing Email: testverstion@gmail.com

Testing Password: 12345test

Optimizations

• Next' Js Image component
• Next' Js file-system based router
• Next' Js Server-side rendering
• Memoization (useMemo, Memo)
• Function components
• React hooks
• React useEffect cleanup
• TypeScript

Features

(Users)

• Complete user authentication
• Users can sign in
• Users can sign out
• Users can verify email
• Users can Change Password
• View all products
• View products detail
• Filter products by category
• Search for products
• Add products to their basket
• Checkout total payment
• Checkout order page
• Products pagination
• Stripe Checkout/Payments (TODO)

(Admin)

• Complete Admin Authorization
• Add products
• Update products
• Delete products
• Limit Products
• Add Users
• Update Users
• Delete Users
• Update User Role

Contributing

Contributions are always welcome!

Support

For support, email chainshifu@outlook.com.

Run_Locally

Clone the project

https://github.com/chainshifu/ECommerce-next

Go to the project directory

  cd ECommerce-next

Install dependencies

yarn install
# or
npm install

Start the server

npm run dev
# or
yarn dev

ESLint + Prettier + Lint-Staged Check

yarn lint
# check-types errors
yarn check-types
# check code format
yarn check-format
# check lint errors
yarn check-lint
# format code and fix prettier erros
yarn format
# test all ESLint + Prettier + types erros
yarn test-all
# or if You're using npm you can use npm instead of yarn for all the above ESLint + Prettier + Lint-Staged Check steps

Status

Project is: in progress I'm working on it in my free time

Inspiration

Build By chainshifu Arbaa Project inspired by [Amazon] https://www.amazon.com

Screenshots

Signup Page

LogIn Page

Forgot Password Page

Reset Password email Link

Reset Password Page

Update Profile Page

Home Page

Home Page (Filter by category(Bookks))

Home Page (Filter by category(Sports))

Home Page (Filter by category(Toys))

Home Page (Filter by category(Men's clothing))

Home Page (Search Product (Jewelery))

Product Detail Page

Shopping Cart Page

Orders Page

Admin Products Page

Admin Users Page

Admin Users Table Page

Admin Add Product Page

Admin Update Product Page

Admin Add User Page

Admin Update User Page