Next.js Google Clone Web App
/ 2 min read
This web app is a clone of Google search engine built with
Google Search API,
Hero Icons and hosted on
How I worked on this project
I created this project to expand on the data fetching skills and learn a bit more on possibilities of Next.js especially in combination with utility design framework such as Tailwind.
How to navigate this project
search.js- using getServerProps to fetch the google API. There is a useDummyData switcher that takes
Response.jsin the main folder and populates the results with static data to avoid exhausting API limit if the value is
- Environmental variables - it was the first time I tried to implement
.env.localso that the API keys are not exposed publicly and used
SearchResults.js- takes the results of the API response and renders them via
map()method as well as passes various props such as title, link and snippets of results with Tailwind styling.
- Hero Icons library - is used to visualize various options in the
Why it is built this way
- State management is not used with this project as its a simple app mainly to test out API fetch, render and styling.
- Tailwind CSS is a great library for styling. The utility classes make it super easy to rapidly style any components and make the app look usable.
Vercelmade it easy to generate and host this application but for the next project I will use more layers of complexity including databases.
What else would I do
- Finish video, image search sections so that the app is more robust.
- Add end-to-end tests with Cypress
- Setup CI/CD and ESLint on every pull request