Google Clone
Google Clone (Practice on Next.js 13 and Tailwind CSS)
The Google Clone project is a web application that aims to replicate the functionality and design of Google's search engine. It is built using Next.js and Tailwind CSS, and it utilizes Google's custom search API to fetch search results and display them in a similar format to Google's search results page. The project is designed to be responsive and mobile-friendly, allowing users to search the web on both desktop and mobile devices. The search engine allows users to enter search queries and view search results with clickable links and descriptions. Additionally, the project includes link to navigate to Google's image search page.
Table of Contents
Features
- Search the web using Google's search algorithm
- View search results with clickable links and descriptions
- Navigate to Google's image search page
- Responsive design for desktop and mobile devices
Demo
You can view a live demo of the project at Vercel.
Installation
To run the project locally, you'll need to clone the repository and install the dependencies using npm or yarn.
git clone https://github.com/Ramy5/Google-Clone.git
cd Google-Clone
npm install
or
yarn install
You'll also need to obtain a Google custom search API key and search engine ID. You can follow the instructions in the Google Custom Search API documentation to obtain these.
Create a .env.local file in the root of the project and add the following environment variables:
GOOGLE_API_KEY=<your Google custom search API key>
GOOGLE_CONTEXT=<Your Google CX context>
Then, start the development server:
npm run dev
Or
yarn dev
The project should be running at http://localhost:3000.
Usage
To use the search engine, simply enter your search query in the search bar and hit the Enter key or click the "Google Search" button. You can navigate to the image search page by clicking the link at the bottom of the search results page.
Technologies Used
This project was built using the following technologies:
