Saddam-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

@Saddam Arbaa

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

Live 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!

Related_Projects

Amazon Clone App built with React Js + TypeScript + Redux + Styled Components

Github Repo

LIVE DEMO

Airbnb Clone App built with React Js + Next Js + TypeScript + Redux + Tailwind CSS

Github Repo

LIVE DEMO

Netflix Clone App built with React Js + TypeScript + Redux + Stripe Checkout/Payments + Vercel Hosting + Firebase

Github Repo

LIVE DEMO

LinkedIn Clone App built with React Js + TypeScript + Redux + Styled Components + Material-UI + Firebase Realtime Database + Vercel Hosting

Github Repo

LIVE DEMO

Facebook Clone App built with React Js + Next Js + TypeScript + Redux + Styled Components

Github Repo

LIVE DEMO

Instagram Clone App built with React Js + Next Js + TypeScript + Redux + Tailwind CSS + Heroicons

Github Repo

LIVE DEMO

Support

For support, email saddamarbaas@gmail.com.

Feedback

If you have any feedback, please reach out to me at saddamarbaas@gmail.com

Twitter https://twitter.com/ArbaaSaddam/

Linkedin. https://www.linkedin.com/in/saddamarbaa/

Github https://github.com/saddamarbaa

Instagram https://www.instagram.com/saddam.dev/

Facebook https://www.facebook.com/saddam.arbaa

Run_Locally

Clone the project

https://github.com/saddamarbaa/Ecommerce-website-next.js-typeScript

Go to the project directory

  cd Ecommerce-website-next.js-typeScript

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 Saddam 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