Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/amankushwaha577/googlesearch

REACT + TAILWIND + VITE + GOOGLE CUSTOM SEARCH API + JAVASCRIPT + HTML AND CSS
https://github.com/amankushwaha577/googlesearch

api custom google javascript tailwindcss

Last synced: about 1 month ago
JSON representation

REACT + TAILWIND + VITE + GOOGLE CUSTOM SEARCH API + JAVASCRIPT + HTML AND CSS

Host: GitHub
URL: https://github.com/amankushwaha577/googlesearch
Owner: amankushwaha577
Created: 2023-09-01T19:01:43.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2024-07-20T13:39:39.000Z (6 months ago)
Last Synced: 2024-07-20T14:51:36.919Z (6 months ago)
Topics: api, custom, google, javascript, tailwindcss
Language: JavaScript
Homepage: https://google-search-amankushwaha.vercel.app
Size: 397 KB
Stars: 7
Watchers: 1
Forks: 0
Open Issues: 1
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# ``` GOOGLE SEARCH ```
I'm thrilled to present my latest project GoogleSearch, A Fully responsive Google clone single-page application using React.js, Tailwind CSS, and the Google Custom Search API. Leveraging advanced technologies, I utilized React.js for building the frontend, Tailwind CSS for elegant styling, and integrated the Google Custom Search API for real-time search results. This project showcased my proficiency in fundamental React.js concepts, including JSX, components, props, state management, lifecycle methods, conditional rendering, lists with keys, and the Context API.

![Webp net-gifmaker](https://user-images.githubusercontent.com/53748350/269544164-2b19de38-3196-4397-832e-8bb9cbf59259.gif)

- ![#c5f015](https://via.placeholder.com/15/c5f015/000000?text=+) `1. Fetching Data from Google Custom Search API: To implement clone functional, I have Implemented logic to fetch search results from the Google Custom Search API. We need an API key and the API endpoint. Use fetch or a library like Axios to make HTTP requests.`

- ![#f03c15](https://via.placeholder.com/15/f03c15/000000?text=+) `2.Created the User Interface: Designed a visually appealing and responsive user interface using Tailwind CSS. Tailwind's utility classes make it easy to create a modern and clean look. `

- ![#1589F0](https://via.placeholder.com/15/1589F0/000000?text=+) `3. Context API: If your application becomes more complex and you need to share state between components that are not directly connected, you can use React's Context API for state management.`

- ![#f03c15](https://via.placeholder.com/15/f03c15/000000?text=+) `4. Demonstrated proficiency in core React.js concepts, including components, props, and state management.`

- ![#f03c15](https://via.placeholder.com/15/f03c15/000000?text=+) `5. Utilized React's lifecycle methods to optimize application performance.`

- ![#c5f015](https://via.placeholder.com/15/c5f015/000000?text=+) `6. Employed conditional rendering for a seamless user experience.`

- ![#f03c15](https://via.placeholder.com/15/f03c15/000000?text=+) `7. Effectively managed lists and keys to render dynamic content.`

# LANGUAGES, FRAMEWORKS, LIBRARY AND DATABASE

- ![#BE0DF2](https://via.placeholder.com/15/1589F0/000000?text=+) `REACT.js`
- ![#1512F8](https://via.placeholder.com/15/1589F0/000000?text=+) `Tailwind CSS`
- ![#c2E010](https://via.placeholder.com/15/c5f015/000000?text=+) `Google Custom Search API`
- ![#f03c15](https://via.placeholder.com/15/f03c15/000000?text=+) `HTML5, CSS3 and Bootstrap4`
- ![#5DF20D](https://via.placeholder.com/15/f03c15/000000?text=+) `VIT`
- ![#c2E010](https://via.placeholder.com/15/c5f015/000000?text=+) `JavaScript`

# ONLINE REACHABILITY:

TECHNICAL SIDES OF FRIEND'S SPY
```sh
1. Utilized React.js to create a responsive and dynamic single-page application.
2. Implemented JSX for rendering components and user interface elements.
3. Designed an elegant and modern user interface using Tailwind CSS.
4. Successfully integrated the Google Custom Search API to fetch real-time search results.

```