Fully functional google search with next.js
In this article, we are gonna build a Battery Informer which will display the battery status and the other information along with it such as the charging status, charging level and the discharging time.
Nov 3, 2021
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
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