Google Clone
Building Google Clone App with React Js, Next Js, TypeScript, Tailwind CSS,
NextAuth, React Icons, Vercel Hosting (mobile-friendly).
Table of contents
Author
@Saddam Arbaa
Technologies
- React Js
- Next Js
- TypeScript
- Tailwind CSS
- NextAuth
- React Icons
Features
- Google Sign-In
- Github Sign-In
- Search for web and Images using Google API
- Pagination
- Loading Skeleton
Demo
LIVE DEMO
Optimizations
- Next Js Image component
- Next Js file-system based routing
- Next Js Server-side rendering
- TypeScript
- Vercel Hosting
- React Server Components
Contributing
Contributions are always welcome!
Support
For support, email [email protected].
Feedback
If you have any feedback, please reach out to me at [email protected]
Twitter
https://twitter.com/ArbaaSaddam/
Linkedin.
https://www.linkedin.com/in/saddamarbaa/
Github
https://github.com/saddamarbaa
Instagram
https://www.instagram.com/saddam.dev/
Facebook
https://www.facebook.com/saddam.arbaa
Run_Locally
Clone the project
https://github.com/saddamarbaa/google-clone-app-nex-js-typescript
Go to the project directory
cd google-clone-app-nex-js-typescript
Install dependencies
npm install
Start the server
npm run dev
# or
yarn dev
Environment
-
To run this project, you will need the following environment variables to your .env.local
-
FIREBASE_GOOGLE_WEB_CLIENT_ID
-
FIREBASE_GOOGLE_WEB_CLIENT_SECRET
-
NEXT_AUTH_SECRET
-
NEXT_AUTH_URL
-
GOOGLE_API_KEY
-
GOOGLE_CONTEXT_KEY
-
GITHUB_ID
-
GITHUB_SECRET
get google API key from the following link
https://console.cloud.google.com/apis/dashboard
get google Context key from the following link
https://cse.google.com/create/new
Status
Project is now complete in (React + TypeScript + Next.js) so my next step I would love to converted to (React + TypeScript + Next.js + Node.js + Express + MongoDB)
Inspiration
Build By Saddam Arbaa Project inspired by [Google] https://www.google.com/
Related_Projects
Realtor Clone App built with React Js + TypeScript + Tailwind CSS + Vercel Hosting + Firebase
Github Repo
LIVE DEMO
Netflix Clone App built with React Js + TypeScript + Redux + Stripe Checkout/Payments + Vercel Hosting + Firebase
Github Repo
LIVE DEMO
Twitter Clone App built with React Js + Next Js + TypeScript + Tailwind CSS + Vercel Hosting
Github Repo
LIVE DEMO
Front-End Mentor Rest Countries API Challenge app built with React Js + Next Js + TypeScript + Tailwind CSS + Vercel Hosting
Github Repo
LIVE DEMO
LinkedIn Clone App built with React Js + TypeScript + Redux + Styled Components + Material-UI + Firebase Realtime Database + Vercel Hosting
Github Repo
LIVE DEMO
Instagram Clone App built with React Js + Next Js + TypeScript + Redux + Tailwind CSS + Heroicons
Github Repo
LIVE DEMO
Facebook Clone App built with React Js + Next Js + TypeScript + Redux + Styled Components
Github Repo
LIVE DEMO
Messenger Clone App built with React Js + Next Js + Redux + Styled Components + Material-UI
Github Repo
LIVE DEMO
Gmail Clone App built with React Js + Next Js + TypeScript + Styled Components + Material-UI + Firebase Realtime Database + Vercel Hosting
Github Repo
LIVE DEMO
Signal Clone App built with React Native + TypeScript + Expo + React Navigation + Firebase Realtime Database + User Authentication + Passwordless Authentication with Magic Link
Github Repo
WhatsApp Clone App built with React Js + React Context API + Styled Components + Material-UI + Firebase Realtime Database + Firebase Hosting
Github Repo
LIVE DEMO
Slack Clone App built with React Js + Next Js + Styled Components + firebase-hooks + Material-UI
Github Repo
LIVE DEMO
Airbnb Clone App built with React Js + Next Js + Redux + Tailwind CSS
Github Repo
LIVE DEMO
Amazon Clone App built with React Js + TypeScript + Redux + Styled Components
Github Repo
LIVE DEMO
Tesla Clone App built with React Js + TypeScript + Redux + Styled Components + Material-UI + Vercel Hosting
Github Repo
LIVE DEMO
Screenshots
Web Search loading UI
Image Search loading UI
Error Handling UI
Search Page
Home Page
Responsive on mobile screens
LogIn Page