Auronic - E-Commerce Platform

A modern, full-featured e-commerce website built with React, Vite, and Firebase. Auronic provides a seamless shopping experience with product browsing, intelligent AI-assisted search, secure checkout, and comprehensive order management.

Features

• Product Catalog: Browse, search, and filter products with detailed product pages
• Shopping Cart: Intuitive cart management with real-time updates
• Authentication: Secure user authentication powered by Firebase
• Checkout System: Streamlined multi-step checkout process
• Order Management: Track and manage user orders
• Blog System: Read product blogs and reviews
• AI Integration: OpenAI-powered search and recommendations
• Responsive Design: Mobile-first Tailwind CSS styling
• State Management: Redux Toolkit for predictable state handling

Tech Stack

• Frontend: React 19, Vite
• Styling: Tailwind CSS 4
• State Management: Redux Toolkit
• Authentication: Firebase
• Backend: Express.js
• Icons: React Icons
• Notifications: React Hot Toast
• AI: OpenAI API
• UI Components: Flowbite

Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd Auronic

2. Install dependencies:

npm install

3. Create a .env.local file in the root directory with required environment variables:

VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id
VITE_OPENAI_API_KEY=your_openai_key

Running the Application

Development Server:

npm run dev

The application will be available at http://localhost:5173

Build for Production:

npm run build

Preview Production Build:

npm run preview

Run Linter:

npm run lint

Project Structure

src/
├── Auth/              # Firebase authentication logic
├── Components/        # Reusable UI components
│   └── Product_component/
├── Pages/            # Page components (Home, Products, Blogs, etc.)
├── Store/            # Redux store configuration
│   └── Slices/      # Redux slices (AddToCart, etc.)
├── Error/            # Error page components
├── App.jsx          # Main application component
├── main.jsx         # Application entry point
└── index.css        # Global styles

Key Components

• Navbar: Navigation bar with cart integration
• Banner: Hero section and promotional content
• HomeProducts: Featured products display
• BlogSlider: Blog carousel component
• ProductDetail: Detailed product information page
• Checkout: Multi-step checkout process
• Orders: User order history and tracking

State Management (Redux)

The application uses Redux Toolkit for state management:

• AddToCart Slice: Manages shopping cart state

Authentication

Firebase Authentication is integrated for:

• User registration and login
• Sessions management
• Protected routes

Deployment

The application is configured for deployment on Vercel. Configuration is available in vercel.json.

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

This project is proprietary and confidential.

Support

For issues, suggestions, or questions, please contact the development team.