DEV Community

Cover image for Google-clone - Google Search Clone Built Using React/Next js And Tailwind CSS
Prithvi Yewale
Prithvi Yewale

Posted on

Google-clone - Google Search Clone Built Using React/Next js And Tailwind CSS


project screenshot

A functional replica of Google's search page, you can use it for searches. Styled with Tailwind CSS to Rapidly build and look as close as possible to current google search page, the search results are pulled using Googles Programmable Search Engine and it was build using Next.js the react framework.

Project is live here

Please do not spam searches.

Built With

(back to top)

Getting Started


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
Enter fullscreen mode Exit fullscreen mode


git clone

  • Add Next

yarn add next react react-dom

  • Install all dependencies

  • Create a .env.local file to store your api keys

API_KEY = ' ' //API Key
CONTEXT_KEY = ' ' // Context Key ( 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

(back to top)


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
  4. Push to the Branch
  5. Open a Pull Request

(back to top)

Contact Gmail
@PrithviYewale Twitter
@prithvi_yewale Instagram

Project Link:

(back to top)

Top comments (0)