https://github.com/codingtuto/google-clone
C'est le clone de Google où vous pouvez rechercher n'importe quoi et il affichera exactement le même résultat que nous avons utilisé l'API personnalisée de Google à travers laquelle nous avons réalisé ce projet, il est entièrement réactif et vous pouvez également l'installer en tant que PWA.
https://github.com/codingtuto/google-clone
api coding google-api nextjs team
Last synced: 3 months ago
JSON representation
C'est le clone de Google où vous pouvez rechercher n'importe quoi et il affichera exactement le même résultat que nous avons utilisé l'API personnalisée de Google à travers laquelle nous avons réalisé ce projet, il est entièrement réactif et vous pouvez également l'installer en tant que PWA.
- Host: GitHub
- URL: https://github.com/codingtuto/google-clone
- Owner: codingtuto
- License: other
- Created: 2022-03-26T17:47:12.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-03-26T19:15:28.000Z (over 3 years ago)
- Last Synced: 2025-07-08T23:04:34.717Z (3 months ago)
- Topics: api, coding, google-api, nextjs, team
- Language: JavaScript
- Homepage: https://google-clone-ten-alpha.vercel.app/
- Size: 900 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Google Clone avec Next.js
C'est le clone de Google où vous pouvez rechercher n'importe quoi et il affichera exactement le même résultat que nous avons utilisé l'API personnalisée de Google à travers laquelle nous avons réalisé ce projet, il est entièrement réactif et vous pouvez également l'installer en tant que PWA. Vous pouvez également visiter les liens sans danger, mais il y a un inconvénient à ce que Google n'autorise que 100 requêtes à partir d'une seule clé API par jour. Ainsi, cette application ne peut rechercher que 100 fois par jour.
## Fonctionnalités
- Recherche Google précise et en temps réel
- Mode plein écran
- **PWA** installable
- Rechercher n'importe quelle requête
- Réactivité totale
- Prise en charge du thème sombre en fonction de l'appareil de l'utilisateur
## Technologies utilisées
## Démonstration
[Cliquer ici pour voir le site](https://google-clone-ten-alpha.vercel.app/)
## Commencer
Créer un répertoire ou un dossier
```bash
mkdir project
```
Cloner le projet
```bash
clone git https://github.com/codingtuto/google-clone.git
```
Aller dans le répertoire du projet
```bash
cd project
```
Installer les dépendances
```bash
npm install
# ou
yarn
```
Tout d'abord, lancez le serveur de développement :
```bash
npm run dev
# ou
yarn dev
```
Ouvrez http://localhost:3000 avec votre navigateur pour voir le résultat.
Vous pouvez commencer à éditer la page en modifiant pages/index.js. La page se met à jour automatiquement lorsque vous modifiez le fichier.
Les routes API sont accessibles sur http://localhost:3000/api/hello. Ce point de terminaison peut être modifié dans pages/api/hello.js.
Le répertoire pages/api est mappé sur /api/\*. Les fichiers de ce répertoire sont traités comme des itinéraires d'API au lieu de pages React.
## Variables d'environnement
Pour exécuter ce projet, vous devrez ajouter les variables d'environnement suivantes à votre fichier .env
`NEXT_PUBLIC_API_KEY` - [Cliquez ici](https://developers.google.com/custom-search/v1/introduction#identify_your_application_to_google_with_api_ke)
- Allez sur le lien et cliquez sur **Obtenir une clé**
- Si vous avez déjà créé un projet, continuez, sinon créez-en un nouveau et suivez les étapes après avoir terminé, vous obtiendrez la clé API
`NEXT_PUBLIC_CONTEXT_KEY` - [Cliquez ici](https://cse.google.com/cse/create/new)
- Accédez au lien et saisissez "www.google.com", puis cliquez sur **Créer**
- puis cliquez sur `Obtenir le code`
- vous obtiendrez la balise de fichier de script dans ce fichier, telle que `` nous n'avons besoin que du `cx ` valeur *copier* cela et coller dans votre `.env`
`NEXT_PUBLIC_GEOLOCATION_API` - [Cliquez ici](https://ipdata.co/)
- Allez sur le lien et créez un compte et obtenez l'API gratuitement
- Il y a une limite de 1500 demandes par jour, alors soyez prudent avec cela et collez-le dans `.env`
## Licence
[MIT](https://choosealicense.com/licenses/mit/)
## Retour d'information
Si vous avez des commentaires, veuillez nous contacter à notre bot Telegram @codingsupport_bot
## Développeur
- [@codingtuto](https://t.me/codingtuto)