Google-clone - React/Next js 및 Tailwind CSS를 사용하여 구축된 Google 검색 클론

프로젝트 정보

Google 검색 페이지의 기능 복제본으로 검색에 사용할 수 있습니다. Tailwind CSS으로 스타일을 지정하여 현재 Google 검색 페이지에 최대한 가깝게 빌드하고 표시하며 검색 결과는 GoogleProgrammable Search Engine을 사용하여 가져오고 반응 프레임워크Next.js 를 사용하여 빌드되었습니다.

프로젝트가 여기에 있습니다https://google-clone-p8mn37r8a-cosmicwanderer7.vercel.app/.

스팸 검색을 하지 마십시오.

내장

Next.js

Tailwind CSS

Programmable Search Engine

Yarn

( back to top )

시작하기

전제 조건

웹 앱을 사용하는 데 필요한 항목과 설치 방법입니다.

실

npm install --global yarn 
  yarn dev   // to run local server

설치

https://developers.google.com/custom-search/v1/introduction#identify_your_application_to_google_with_api_key에서 무료 API_KEY를 받으세요.

https://cse.google.com/cse/create/new에서 ( 검색 엔진 ID ) CONTEXT_KEY 가져오기

저장소 복제

git clone https://github.com/cosmicwanderer7/google-clone.git

다음 추가

yarn add next react react-dom

모든 종속성을 설치합니다.yarn

API 키를 저장할 .env.local 파일을 생성합니다.

API_KEY = ' ' //API Key https://developers.google.com/custom-search/v1/introduction#identify_your_application_to_google_with_api_key
CONTEXT_KEY = ' ' // Context Key https://cse.google.com/cse/create/new ( Search engine ID )

테스트에 더미 데이터 사용

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)

로컬 호스트에서 실행하려면 사용

yarn dev //starts a local server
( back to top )

기여

기여는 오픈 소스 커뮤니티를 배우고, 영감을 주고, 창조할 수 있는 놀라운 장소로 만드는 것입니다. 귀하의 기여에 크게 감사드립니다.

이를 개선하기 위한 제안이 있는 경우 저장소를 포크하고 풀 요청을 작성하십시오.

프로젝트에 별표를 주는 것을 잊지 마세요! 다시 한번 감사합니다!

프로젝트 포크

기능 분기 만들기

변경 사항 커밋

지점으로 밀기

풀 요청 열기

( back to top )

연락하다

[email protected] 지메일
트위터
인스 타 그램

프로젝트 링크: https://github.com/cosmicwanderer7/google-clone

( back to top )