Merge pull request #558 from gurjeetsinghvirdee/google-clone

Google Search Engine Clone Added
Ayush7614 · Mar 7, 2022 · df5e727 · df5e727
2 parents 382f050 + cfcf771
commit df5e727
Show file tree

Hide file tree

Showing 27 changed files with 52,340 additions and 3 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
diff --git a/Google-Search-Engine-Clone/.gitignore b/Google-Search-Engine-Clone/.gitignore
@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.eslintcache
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/Google-Search-Engine-Clone/README.md b/Google-Search-Engine-Clone/README.md
@@ -0,0 +1,30 @@
+## Google Search Engine Clone with React Js using Google Api
+
+<img src="https://github.com/gurjeetsinghvirdee/Bundli-Frontend/blob/google-clone/Google-Search-Engine-Clone/src/Images/Screenshot%20(696).png">
+
+<img src="https://github.com/gurjeetsinghvirdee/Bundli-Frontend/blob/google-clone/Google-Search-Engine-Clone/src/Images/Screenshot%20(697).png">
+
+
+### Deployed Version 
+
+### [Click Me!!!](https://quizzical-payne-d3e222.netlify.app/)
+
+
+## Getting Started
+
+
+### First Run this Command to Install All Modules inside the project
+
+```
+npm install
+```
+
+### Then run this command, it will open [localhost:3000](http://localhost:3000/) with your browser to see the Result:
+
+
+```
+npm start
+```
+
+### Hooray🥳 you are done with this
+## Happy Hacking🎉🎊
diff --git a/Google-Search-Engine-Clone/package-lock.json b/Google-Search-Engine-Clone/package-lock.json
diff --git a/Google-Search-Engine-Clone/package.json b/Google-Search-Engine-Clone/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "google-clone",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@material-ui/core": "^4.11.1",
+    "@material-ui/icons": "^4.9.1",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.2",
+    "@testing-library/user-event": "^12.2.2",
+    "express": "^4.17.1",
+    "heroku": "^7.47.4",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "4.0.1",
+    "web-vitals": "^0.2.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/Google-Search-Engine-Clone/public/index.html b/Google-Search-Engine-Clone/public/index.html
@@ -0,0 +1,42 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Google Search Engine Clone</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/Google-Search-Engine-Clone/public/manifest.json b/Google-Search-Engine-Clone/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/Google-Search-Engine-Clone/public/robots.txt b/Google-Search-Engine-Clone/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/Google-Search-Engine-Clone/src/App.css b/Google-Search-Engine-Clone/src/App.css
diff --git a/Google-Search-Engine-Clone/src/App.js b/Google-Search-Engine-Clone/src/App.js
@@ -0,0 +1,25 @@
+import React from "react";
+import './App.css';
+import Home from './Home';
+import SearchPage from './SearchPage';
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+
+function App() {
+  return (
+    // BEM
+    <div className="app">
+      <Router>
+        <Switch>
+          <Route path="/search">
+            <SearchPage />
+          </Route>
+          <Route path="/">
+            <Home />
+          </Route>
+        </Switch>
+      </Router>
+    </div>
+  );
+}
+
+export default App;
diff --git a/Google-Search-Engine-Clone/src/Home.css b/Google-Search-Engine-Clone/src/Home.css
@@ -0,0 +1,46 @@
+.home {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
+.home__header {
+    display: flex;
+    justify-content: space-between;
+    padding: 20px 30px;
+    align-items: center;
+}
+
+.home__header a {
+    margin-right: 20px;
+    text-decoration: inherit;
+    color: rgba(0, 0, 0, 0.7);
+    font-size: 15px;
+}
+
+.home__header a:hover {
+    text-decoration: underline;
+}
+
+.home__headerRight {
+    display: flex;
+    align-items: center;
+    min-width: 13vw;
+    justify-content: space-between;
+}
+
+.home__headerRight > .MuiSvgIcon-root {
+    margin-right: 20px;
+}
+
+.home__body {
+    flex: 1;
+    display: flex;
+    margin-top: 10%;
+    flex-direction: column;
+}
+
+.home__body > img {
+    object-fit: contain;
+    height: 100px;
+}
diff --git a/Google-Search-Engine-Clone/src/Home.js b/Google-Search-Engine-Clone/src/Home.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import './Home.css';
+import { Link } from "react-router-dom";
+import AppIcon from "@material-ui/icons/Apps";
+import { Avatar } from "@material-ui/core"; 
+import Search from "./Search";
+
+function Home() {
+    return (
+        <div className="home">
+            <div className="home__header">
+                <div className="home__headerLeft">
+                    <a href="https://about.google/">About</a>
+                    <a href="https://store.google.com/">Store</a>
+                </div>
+                <div className="home__headerRight">
+                    <a href="https://accounts.google.com/signin/v2/identifier?service=mail&passive=true&rm=false&continue=https%3A%2F%2Fmail.google.com%2Fmail%2F%26ogbl%2F&ss=1&scc=1&ltmpl=default&ltmplcache=2&emr=1&osid=1&flowName=GlifWebSignIn&flowEntry=ServiceLogin">Gmail</a>
+                    <a href="https://www.google.co.in/imghp?hl=en&tab=wi&ogbl">Images</a>
+                    <AppIcon />
+                    <Avatar />
+                </div>
+            </div>
+
+            <div className="home__body">
+                <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" 
+                     alt="" 
+                />
+                <div className="home__inputContainer">
+                    <Search />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Home
diff --git a/Google-Search-Engine-Clone/src/Images/Screenshot (696).png b/Google-Search-Engine-Clone/src/Images/Screenshot (696).png
diff --git a/Google-Search-Engine-Clone/src/Images/Screenshot (697).png b/Google-Search-Engine-Clone/src/Images/Screenshot (697).png
diff --git a/Google-Search-Engine-Clone/src/Search.css b/Google-Search-Engine-Clone/src/Search.css
@@ -0,0 +1,54 @@
+.search__input {
+    display: flex;
+    align-items: center;
+    border: 1px solid lightgray;
+    height: 30px;
+    padding: 10px 20px;
+    border-radius: 999px;
+    width: 75vw;
+    margin: 0 auto;
+    margin-top: 40px;
+    max-width: 560px;
+}
+
+.search__input > input {
+    flex: 1;
+    padding: 10px 20px;
+    font-size: medium;
+    border: none;
+}
+
+.search__input > input:focus {
+    outline-width: 0;
+}
+
+.search__inputIcon {
+    color: gray;
+}
+
+.search__buttons {
+    margin-top: 30px;
+    display: flex;
+    justify-content: center;
+}
+
+.search__buttons button {
+    margin: 5px;
+    padding: 7px 15px;
+    background-color: #f8f8f8;
+    border: 1px solid white;
+    text-transform: inherit;
+    color: #5f6368;
+}
+
+.search__buttons button:hover {
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+    background-image: -webkit-linear-gradient(top, #f8f8f8, #f1f1f1);
+    background-color: #f8f8f8;
+    border: 1px solid #c6c6c6;
+    color: #222;
+}
+
+.search__buttonsHidden {
+    display: none !important;
+}
diff --git a/Google-Search-Engine-Clone/src/Search.js b/Google-Search-Engine-Clone/src/Search.js
@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import "./Search.css";
+import SearchIcon from "@material-ui/icons/Search";
+import MicIcon from "@material-ui/icons/Mic";
+import { Button } from '@material-ui/core';
+import { useHistory } from 'react-router-dom';
+import { useStateValue } from './StateProvider';
+import { actionTypes } from "./reducer";
+
+function Search({ hideButtons = false }) {
+    const [{}, dispatch] = useStateValue();
+
+    const [input, setInput] = useState("");
+    const history = useHistory();
+
+    const search = e => {
+        e.preventDefault();
+
+        console.log('You hit the search button >> ', input);
+
+        dispatch ({
+            type: actionTypes.SET_SEARCH_TERM,
+            term: input
+        })
+
+        // do something with input... come back and fix this shit!!!
+        history.push('/search')
+    };
+
+    return (
+        <form className="search">
+            <div className="search__input">
+                <SearchIcon className="search__inputIcon" />
+                <input value={input} onChange={e => setInput(e.target.value)}/>
+                <MicIcon />
+            </div>
+
+            {!hideButtons ? (
+                <div className="search__buttons">
+                    <Button type='submit' onClick={search} variant="outlined">Google Search</Button>
+                    <Button variant='outlined'>I'm Feeling Lucky</Button>
+                </div>
+            ): (
+                <div className="search__buttons">
+                    <Button className="search__buttonsHidden" type='submit' onClick={search} variant="outlined">Google Search</Button>
+                    <Button className="search__buttonsHidden" variant="outlined">I'm Feeling Lucky</Button>
+                </div>
+            )}
+
+        </form>
+    )
+}
+
+export default Search