🛒 Electronic Shop - Digital Solution Hub

👉 View Live Website

A modern, fully responsive, and feature-rich frontend web application for a digital electronics and repair store. Built with React.js and Tailwind CSS, this project showcases a seamless user interface with dynamic routing, category filtering, and direct WhatsApp integration for business inquiries.

🌟 Key Features

• 📱 Fully Responsive Design: Optimized for all devices (Mobiles, Tablets, and Desktops) using Tailwind CSS.
• 🛍️ Dynamic Product Catalog:
  • Real-time search functionality.
  • Custom-built category dropdown for seamless filtering.
• 💬 WhatsApp Integration: Customers can directly inquire about a specific product via a pre-filled WhatsApp message.
• 🖼️ Premium UI Components:
  • Auto-playing Hero Image Slider.
  • Product Image Gallery with clickable thumbnails.
  • "You Might Also Like" (Related Products) section.
• 📍 Live Location Mapping: Integrated Google Maps for the physical store location.
• ⚡ Fast & Modern: Clean architecture with reusable React components and React Router for smooth navigation without page reloads.

🛠️ Tech Stack

• Frontend Framework: React.js
• Styling: Tailwind CSS
• Routing: React Router v6
• Icons & Graphics: Custom SVGs & Unsplash Images

🚀 Getting Started

Follow these instructions to get a copy of the project up and running on your local machine.

Prerequisites

Make sure you have Node.js installed on your system.

Installation

1. Clone the repository:

   git clone [https://github.com/your-username/om-infotech.git](https://github.com/your-username/om-infotech.git)

2. Navigate to the project directory:

   cd om-infotech

3. Install the dependencies:

   npm install

4. Start the development server:

   npm run dev

5. Open your browser and visit http://localhost:5173/

📂 Project Structure

src/
├── assets/          # Static files like images and icons
├── components/      # Reusable React components (Navbar, ProductCard, Footer, etc.)
├── data/            # Local JSON data (data.json) for products
├── pages/           # Main page components (Home, AllProducts, ProductDetail)
├── App.jsx          # Main application routing
└── index.css        # Tailwind directives and global styles

🤝 Contributing

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

📜 License

This project is open-source and available under the MIT License.

---

Developed by Ankit Kumar