Google-clone - Google Search Clone Built Using React/Next js And Tailwind CSS
Tags: javascript, nextjs, react, tailwindcss
Published: 2022-05-17 03:56:12

## ABOUT THE PROJECT

![project screenshot](https://i.imgur.com/rZGgsqr.png)

A  functional replica of Google's search page, you can use it for searches. Styled with <a href="https://tailwindcss.com/">Tailwind CSS</a> to  Rapidly build and look as close as possible to current google search page, the search results are pulled using Googles <a href="https://developers.google.com/custom-search">Programmable Search Engine</a> and it was build using <a herf="https://nextjs.org/">Next.js </a>the react framework.

Project is live here https://google-clone-p8mn37r8a-cosmicwanderer7.vercel.app/

Please do not spam searches.

### Built With


* [Next.js](https://nextjs.org/)
* [Tailwind CSS](https://tailwindcss.com/)
* [Programmable Search Engine](https://programmablesearchengine.google.com/about/)
* [Yarn](https://yarnpkg.com/)

<p align="right">(<a href="#about-the-project">back to top</a>)</p>

## Getting Started

### Prerequisites

This are things you need to use the web app and how to install them.
* yarn


```
npm install --global yarn 
  yarn dev   // to run local server
```


### Installation


- Get a free API_KEY at [https://developers.google.com/custom-search/v1/introduction#identify_your_application_to_google_with_api_key](https://developers.google.com/custom-search/v1/introduction#identify_your_application_to_google_with_api_key)

- Get ( Search engine ID ) CONTEXT_KEY at https://cse.google.com/cse/create/new

- Clone the repo
   ```git clone https://github.com/cosmicwanderer7/google-clone.git```

- Add Next
   ```yarn add next react react-dom```

- Install all dependencies
   `yarn`

- Create a .env.local file to store your api keys
   ```API_KEY = ' ' //API Key https://developers.google.com/custom-search/v1/introduction#identify_your_application_to_google_with_api_key
   CONTEXT_KEY = ' ' // Context Key  https://cse.google.com/cse/create/new ( Search engine ID )```

- Use dummy data for testing
  ```const  useDummyData  =  false;
  //true for development testing (mock results) change it in search.js
  (Free version of google search api has a quota of 100 search results per day  use dummy data so that you don't exhaust the quota)```

- To run on local host use
  ```yarn dev //starts a local server```
<p align="right">(<a href="#about-the-project">back to top</a>)</p>

## Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.

If you have a suggestion that would make this better, please fork the repo and create a pull request. 

Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch
3. Commit your Changes 
5. Push to the Branch 
6. Open a Pull Request

<p align="right">(<a href="#about-the-project">back to top</a>)</p>





<!-- CONTACT -->
## Contact
  yewaleprithvi2003@gmail.com Gmail
 [@PrithviYewale](https://twitter.com/PrithviYewale) Twitter
 [@prithvi_yewale](https://www.instagram.com/prithvi_yewale/) Instagram
 
                    

         

Project Link: [https://github.com/cosmicwanderer7/google-clone](https://github.com/cosmicwanderer7/google-clone)

<p align="right">(<a href="#about-the-project">back to top</a>)</p>