Thanks to visit codestin.com
Credit goes to github.com

Skip to content

A complete E-Commerce app built with React, TypeScript, and Zustand. It features product filtering, cart, checkout, order management, and user accounts with persisted state.

Notifications You must be signed in to change notification settings

sohailexe/zustand-ecommerce

 
 

Repository files navigation

zustand-ecommerce 👟

A complete E-Commerce app for Borcelle, a shoe store, built with React, TypeScript, Zustand, and Vite.

Description 📝

Borcelle is an online store for shoes built using React, TypeScript, Zustand, and Vite. This application features product filtering by category, price, and color, along with a search functionality by product title. The app also includes a full shopping experience, including cart management, checkout, order tracking, and user account management. The state is persisted using Zustand's persist middleware, ensuring that the app’s state is maintained even after a page refresh.

Features 🚀

  • Product Filtering 🔍: Filter shoes by category, price range, color, and search by title.
  • Shopping Cart 🛒: Add, remove, and update product quantities in the cart.
  • Checkout Process 💳: Simulated checkout flow that can be extended to integrate payment gateways.
  • Order Management 📦: Track your orders and view order status.
  • User Accounts 👤: User registration, login, and profile management.
  • State Persistence 🔒: Zustand with persist middleware ensures app state is saved in localStorage.
  • Responsive Design 📱: Optimized for both desktop and mobile devices.

Tech Stack ⚙️

  • React – For building user interfaces.
  • TypeScript – For type safety and better developer experience.
  • Vite – For fast builds and development.
  • Zustand – For state management with persist middleware.
  • SCSS/CSS – For styling.
  • React Icons – For adding icons to UI components.

Installation 🛠️

  1. Clone the repository:
 git clone https://github.com/your-username/zustand-ecommerce.git
  1. Navigate to the project directory:
  cd zustand-ecommerce
  1. Install dependencies:
  npm install
  1. Run the project:
  npm run dev

The app will run at http://localhost:3000 (or the port defined by Vite).

Usage 💡

  • Use the sidebar to filter shoes by Category, Price, and Color.
  • Use the search input to find shoes by title.
  • Add shoes to the cart and proceed to checkout.
  • Manage your orders and update your user profile in the User Account section.
  • The application state persists across page refreshes.

Contributing 🤝

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

License 📜

This project is licensed under the MIT License.

Happy coding! 🚀

About

A complete E-Commerce app built with React, TypeScript, and Zustand. It features product filtering, cart, checkout, order management, and user accounts with persisted state.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 62.2%
  • SCSS 37.2%
  • Other 0.6%