Ecommerce Website Next.js Typescript

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

#reactjs #nextjs #typescript #tailwindcss #redux #material-ui #eslint-prettier

Demo Download

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).

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