DEV Community 👩‍💻👨‍💻

Cover image for Fully functional google search with Next.js
Jatin Sharma
Jatin Sharma

Posted on • Updated on

Fully functional google search with Next.js

In this article, I am going to tell you about how I made Google fully functional Clone with next.js and tailwind. So Let's dive in.

In this we are not redirecting user to the google page, instead we are using google custom search API to perform all operation in the same domain User can only fetch this API about 100 times so be careful with that you cannot search more that 100 times

Note - If you are developing this by yourself then must use mock data so don't exhaust your API request limit

Features

  • Realtime and Accurate Google Search
  • Full Screen mode
  • Installable PWA
  • Search Any Query
  • Full Responsiveness
  • Show your location based on you IP
  • Dark Theme support based on user's device setting

Technologies I've used -

Screenshots

Desktop - Home Page

desktop

Desktop - Results Page

desktop

Mobile - Home Page

Mobile - Results Page

This is obvious that I cannot share all the code there for that you have to visit the repository, which link is given below, this is not a complex application it is very easy to set up you just need to have a basic understanding of React and TailwindCSS.
First, you need to create the next.js app and install all the dependencies which are required you can look at my package.json, and then you just code.

For detailed info about this project Visit Here

Important Links
Get the Code
LIVE Demo

Conclusion

This project taught me many things such as next.js sever side, router and many more use full things you can also build that from scratch. I

If you like it then you can now extend your support by buying me a Coffee.😊👇

Buy Me A Coffee

You might be interested in -

Top comments (3)

Collapse
 
ats1999 profile image
Rahul kumar

Next Google

image

Old Google

google

Collapse
 
lukeshiru profile image
Luke Shiru

The demo might be broken. The title reads "fully functional" yet the only thing that works is the search button, everything else is unresponsive.

Collapse
 
j471n profile image
Jatin Sharma Author

It still in development and yes only search works for now but i am planning to expand that with so many features such as login, search images and etc. Thanks for your feedback :)

🌚 Life is too short to browse without dark mode