Real World Ecommerce System
Table of Contents
Introduction
📝 In this project we are using react as front end frameworks. It included both user and admin side UI Element. 💡 Component are divided based on functionality . ✨ Key idea of designing the system keeping reusablity, lower coupling know more... .
If this repository is helping your ⭐️⭐️⭐️ star ⭐️⭐️⭐️ is the best support for me.
🕐 This repository will keep update. It is welcome for any pull request for making the code better 🚀🚀🚀.
Realworld Ecommerce System - This repository is only containe frontend. 💾 Backend
Technology
- ReactJS Model Front end JS Framework. we are using React 18
- React-query Sate management tools for handdling asynchronous data state (Server State) like products and collections.
- react-router-dom handle for page routering
- zustand Light weight and scalable state-management tools and we use it to handle the Client (UI) state like current user, selected theme etc
- zod Data validation tool and use it to validate the form data
- framer-motion Easy and light weight Animation Library
- Stripe Third party Payment API, provide secure payment handling.
- chakra-ui simple, modular compent I also created Autocomplete component for the Chakra UI in this project
Features
💁♂️ User authentication 🖥️ Product Catalog 🛒 Product Cart 💵 Secure Payment integration 📈 Amazing Admin dashboard 💽 Data fetch from backend server ✨ Low Coupling & High Cohesion ✨ Highly Reuesablity 💡 Code Quality
Included Admin Dashboard
Data Visualization
Custom Admin Dashbaord created for CRUD Actions.
Custom Admin Dashbaord created entities with react hook form.
More and more feature ...
Prerequisites
🔧 This project is required Node.js, React 18, PostgreSql database system. 💵 You may need to register a Stripe API key
🔧 sample.env is provided just put the API key to VITE_STRIPE_PRUBLIC_KEY=
Installation
📦 Clone the repo and run yarn install
Start
After the successfull installation of the packages: yarn dev
Usage
🚀 I tried to divided the component based on functionality, so that we can reuse the component easily in the other project. All the component are following the rulers of Low Coupling, High Cohesion.
System Overview
In this project mainly included following feature, we can easily reuse those feature.
- User / Authorization
- Collection
- Product
- Cart
- Form
- Table
- UI Interface
- Admin Interface
- Ads (upcoming)
Code Quality
- Eslint and prettier are used.
- Typescript used for type Check.
- Jset and Cypress Unit Test and End2End Test will do later.
Contributing
🤝 The project is currently fully build by Hugo Lam 🤝 Specify will add for contributing to this project.
License
📄 This project is licensed under the MIT License.
❤️❤️❤️ if you think it is helpful, pls give ⭐️. It is welcome for contributing.