EveryHuman-AU Frontend

This is the frontend application for EveryHuman AU, an e-commerce platform that offers a wide range of products to customers. This application was built using React and leverages several modern web technologies to enhance user experience, including Zustand for state management and DaisyUI + Tailwind CSS for styling.

Table of Contents

• Features
• Technologies Used
• Getting Started
• Folder Structure
• Key Functionalities
• Sample Video
• Screen Shots

Features

1. Homepage: Displays a list of featured products and highlights current offers.
2. Product Listing: Showcases all products with search, pagination, and filter options based on price.
3. Product Details: Each product page contains detailed information with options to add to cart.
4. Cart Management: Add, remove, and update products in the cart.
5. Order Placement: A complete checkout flow where users can place their orders.
6. Order Status Tracking: Users can check the current status of their orders.
7. Admin Dashboard: Admin can manage orders, handle refund requests, and update delivery statuses.
8. Dark Mode: User-friendly dark mode integrated across the application.
9. Local Storage: Saves Ordered data and order information in local storage to persist across sessions.
10. Responsive Design: Fully responsive and optimized for mobile and desktop devices.
11. Payment Integration: COD Dummy Integrates to simulate the payment process.

Technologies Used

• React: A JavaScript library for building user interfaces.
• Zustand: For global state management.
• Axios: For making API requests.
• React Router: For client-side routing.
• Tailwind CSS: For rapid UI development with utility-first styling.
• Vercel: Used for deployment.

Getting Started

Prerequisites

Make sure you have the following installed:

• Node.js (v16+)
• npm or Yarn

Installation

# Clone the repository:
git clone https://github.com/AdityaBhojane/EveryHuman-au-Frontend.git;

# Navigate into the project directory:
cd EveryHuman-au-Frontend

# Install dependencies:
npm i

# start project
npm run dev

Key Functionalities

Order Management: Customers can view their order details, track the status of each order, and manage refunds.

Admin Panel: The admin dashboard allows the management of orders, including updating order statuses and refund processing.

Local Storage: Order data is stored in local storage to maintain state across user sessions, ensuring a smooth user experience even after page refreshes.

Dynamic Routing: The project uses React Router for navigating between the pages, ensuring smooth and dynamic navigation.

Sample Video

Click for Sample 3min video

ScreenShots

Home Page :

Products card with pagination :

Store Page :

Store page filter :

Store page filter 2 :

Details Page :

Cart Page :

Processing Model :

Checkout Page :

Order Status Page :

Admin Dashboard :