🔍 Google Beta - Modern Search Engine Clone

A modern, feature-rich Google Search clone built with React and powered by Google Custom Search API

---

🌟 Project Overview

Google Beta is a sophisticated web application that replicates Google Search functionality with modern React 19, featuring voice search, responsive design, and real-time API integration. This project demonstrates advanced frontend development skills and production-ready code architecture.

🎯 Key Features

• 🎤 Voice Search: Web Speech API integration with automatic search execution
• 🔍 Real-time Search: Google Custom Search API with instant results
• 📱 Responsive Design: Mobile-first approach with TailwindCSS
• 🖼️ Image Search: Grid-based visual search functionality
• ⚡ Modern Stack: React 19, Vite, React Router, and Axios
• 🎨 Authentic UI: Pixel-perfect Google design recreation

---

🛠️ Technical Architecture

Core Technologies

• React 19.1.1: Latest React with concurrent features
• Vite 7.1.0: Lightning-fast build tool and dev server
• TailwindCSS 4.1.11: Utility-first CSS framework
• React Router 7.8.1: Client-side routing with URL parameters
• Google Custom Search API: Real search results integration

Project Structure

src/
├── components/           # React components
│   ├── Home.jsx         # Landing page
│   ├── SearchResult.jsx # Search results page
│   ├── SearchInput.jsx  # Voice-enabled search input
│   ├── SearchedItemTemplate.jsx # Result display
│   └── Pagination.jsx   # Navigation controls
├── utils/
│   ├── api.js          # Google API integration
│   ├── ContextApi.jsx  # Global state management
│   └── Constants.jsx   # App constants
└── App.jsx            # Main application

---

🚀 Getting Started

Prerequisites

• Node.js (v16+)
• Google Custom Search API key

Installation

1. Clone and install

   git clone https://github.com/asadaliofficials/Google-Beta.git
   cd google-beta
   npm install

2. Configure API

   Update src/utils/api.js:

   const params = {
   	key: 'YOUR_GOOGLE_API_KEY',
   	cx: 'YOUR_SEARCH_ENGINE_ID',
   };

3. Run development server

   npm run dev

4. Build for production

   npm run build

---

🎯 Advanced Features

Voice Search Implementation

• Web Speech API integration
• Real-time speech recognition
• Automatic search execution
• Cross-browser compatibility

State Management

• React Context for global state
• URL state synchronization
• Persistent search history
• Optimized re-renders

Performance Optimization

• Debounced API requests
• Lazy loading for images
• Efficient component structure
• Clean code architecture

---

👨‍💻 Developer

Asad Ali
Full Stack Developer & UI/UX Designer

---

📄 License

MIT License © [Asad Ali]

---

Built with ❤️ by Asad Ali

"Creating modern web experiences that bridge design and functionality."