C L I C O N - eCommerce Platform

CLICON is an eCommerce platform similar to Amazon, allowing users to browse products, add them to their cart, and manage their orders. The platform includes user authentication, cart management, and product browsing by category.

• Browse Products: Explore a wide range of products across different categories.
• Add to Cart: Users can add products to their cart, update quantities, and remove items.
• User Authentication: Register and login to save your cart and track your orders.
• Category Filtering: Browse products based on specific categories.
• Cart Persistence: Users' carts are saved upon login, allowing them to return to their session.

└── 📁src
    └── 📁assets
        └── 📁images
            └── error.png
            └── Logo.png
    └── 📁components
        └── 📁bars
            └── DiscountBar.jsx
            └── Footer.jsx
            └── Header.jsx
            └── SubscribeBar.jsx
        └── 📁main
            └── HomeMain.jsx
        └── 📁products
            └── Categories.jsx
            └── Products.jsx
        └── Cart.jsx
        └── index.js
    └── 📁pages
        └── 📁ErrorPage
            └── ErrorPage.jsx
        └── 📁HomePage
            └── HomePage.jsx
        └── 📁ShopPage
            └── ShopPage.jsx
        └── 📁SignPage
            └── SignIn.jsx
            └── SignUp.jsx
        └── index.js
    └── 📁router
        └── index.jsx
        └── ProtectedRoute.jsx
    └── 📁store
        └── 📁slices
            └── cartSlice.js
            └── productsSlice.js
        └── store.js
    └── 📁styles
        └── 📁fonts
            └── _fonts.css
        └── global.css
    └── 📁utils
        └── icons.util.jsx
    └── App.jsx
    └── main.jsx

• Frontend: React, Vite, Tailwind CSS
• State Management: Redux
• Routing: React Router
• API: DummyJSON API for fetching products and handling basic user data
• Build Tool: Vite for fast and optimized development

1. Clone the repository:

   git clone https://github.com/yourusername/CLICON.git

2. Navigate to the project folder:

   cd CLICON

3. Install the dependencies:

   npm install

4. Start the development server:

   npm run dev

The project will be running.

• Browse products and categories.
• Add products to your cart.
• Login or register to save your cart and proceed with checkout.
• (you can use this account to login )

    username:michaelw
    password:michaelwpass

We used DummyJSON API to simulate product and user data.

• React: For building the user interface.
• Vite: As the build tool for fast and optimized bundling.
• Tailwind CSS: For responsive and utility-first styling.
• Redux: For global state management (managing cart, user authentication, etc.).
• React Router: For handling navigation and routing in the app.