Welcome to Shopi – where shopping meets simplicity💫
Crafted with the power of React.js, Vite.js, and Tailwind CSS, Shopi offers a dynamic and intuitive user experience. This project serves as a practice ground where I learned to seamlessly integrate these technologies into React, achieving a perfect synergy of style and practicality within the ecommerce domain.
-
Reactive Routing: Utilizes React Router DOM for smooth navigation and an intuitive user experience.
-
API Consumption: Interacts with an API to retrieve and display product information.
-
Product Detail Modal: Implements a modal to view detailed information for each product.
-
Shopping Cart Management: Allows users to add and remove products from their shopping cart.
-
Orders Pages: Provides a main page listing all orders and individual pages for each order.
-
Product Search: Enables users to easily search for products.
-
Product Filtering: Allows filtering products by title and category for a personalized shopping experience.
-
Data Persistence: Uses Local Storage to ensure users can complete their purchase flow even after closing the application.
-
Authentication: Implements an authentication system for a personalized experience.
-
Dynamic Views: Experience dynamic Sign-in views (Log In / Create Account) and a responsive Navbar that adjusts based on the user's authentication status, displaying options such as Email, My Orders, My Account, Sign Out, or Sign In.
-
Route Protection: Ensures that only authenticated users have access to certain parts of the application.
Check out a live demo of Shopi here
Elevate your online shopping experience with Shopi 🩷🩷🩷
Home Page
Product Detail Modal
Sign In View 1
Sign In View 2
My Order
My Orders
Check Out Side Menu
My Account
- Clone the repository:
git clone https://github.com/amandalimon/ecommerce-practice-react-vite-tailwind.git - Install dependencies:
npm install - Start the application:
npm start