project start

.gitignore

@@ -12,7 +12,6 @@
 /build
 
 # misc
-.env
 .DS_Store
 .env.local
 .env.development.local

package.json

@@ -9,6 +9,8 @@
     "firebase": "^10.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.0.0",
+    "react-router-dom": "^6.21.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
@@ -35,5 +37,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.1"
   }
 }

src/.env

@@ -0,0 +1,6 @@
+REACT_APP_API_KEY=AIzaSyBZz2Y7jQpqu7lywQme8kRs77MpF5h9ZfM
+REACT_APP_AUTH_DOMAIN=gitfinder-5dde8.firebaseapp.com
+REACT_APP_PROJECT_ID=gitfinder-5dde8
+REACT_APP_STORAGE=gitfinder-5dde8.appspot.com
+REACT_APP_MSI=846943126401
+REACT_APP_APP_ID=1:846943126401:web:9cf71dd8b7f365c4605e80

src/App.js

@@ -1,11 +1,43 @@
-import React from 'react'
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+import { auth, provider } from "./firebase";
+import Explore from "./pages/Explore";
+import Home from "./pages/Home";
+import Landing from "./pages/Landing";
+import Profile from "./pages/Profile";
+import Notifications from "./pages/Notifications";
+import Blog from "./pages/Blog";
+import Navbar from "./Components/Landing/Navbar";
+
+export default function App() {
+  let githubUsername;
+
+  function authenticateUser() {
+    auth
+      .signInWithPopup(provider)
+      .then((userAuth) => {
+        githubUsername = userAuth.additionalUserInfo.username;
+        document.cookie = githubUsername;
+      })
+      .catch((error) => {
+        let errorCode = error.code;
+        let errorMessage = error.message;
+        console.log(errorCode + errorMessage);
+      });
+  }
 
-function App() {
   return (
-    <div>
-
-    </div>
-  )
+   <div>
+     <Router>
+      <Routes>
+        <Route
+          path="/"
+          element={<Navbar authenticateUser={authenticateUser} />}
+        />
+        <Route path="/home" element={<Home />} />
+        <Route path="/profile" element={<Profile />} />
+      </Routes>
+    </Router>
+   </div>
+  );
 }
-
-export default App

src/Components/Landing/Navbar.jsx

@@ -0,0 +1,67 @@
+// import logo from "../../assets/logo1.png";
+import { FiGithub } from "react-icons/fi";
+import { HiMenuAlt3 } from "react-icons/hi";
+import { RxCross1 } from "react-icons/rx";
+import { useState } from "react";
+
+export default function Navbar(props) {
+  let featureLink = "/" + "#features";
+  let peopleLink = "/" + "#people";
+  let Links = [
+    { name: "Features", link: featureLink },
+    { name: "Users", link: peopleLink },
+    { name: "Support", link: "/contact" },
+    { name: "Blog", link: "/blog" },
+  ];
+  const [open, setOpen] = useState(false);
+  return (
+    <nav className="flex px-2 items-center justify-between md:justify-around h-20 md:h-28 bg-slate-900 bg-opacity-30 backdrop-blur-lg drop-shadow-2xl md:mb-20 z-50 fixed w-full">
+      <div className="w-2/12 h-full md:w-4/6 flex justify-start font-manrope items-center">
+        <div className="md:p-0 md:w-2/12 w-11/12 md:flex content-center items-center">
+          <a href="/">
+            <img
+              className="md:w-28 md:h-28 md:p-4 p-1 h-16 w-16"
+              src="https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/github-512.png"
+              alt="Gitshow logo"
+            ></img>
+          </a>
+        </div>
+        <div
+          onClick={() => setOpen(!open)}
+          className="text-slate-100 md:hidden absolute right-4 top-4 cursor-pointer text-3xl"
+        >
+          {open ? <RxCross1 /> : <HiMenuAlt3 />}
+        </div>
+        <ul
+          className={`md:flex md:justify-end md:bg-none  text-slate-200 md:items-center  md:text-lg text-xl md:pb-0 absolute md:static md:z-auto z-[-1] left-0 w-full md:w-auto md:pl-0 transition-all duration-1000 ease-in-out tracking-wider ${
+            open ? "top-16 bg-[#141a23] h-auto" : "top-[-490px] bg-transparent"
+          } md:opacity-100 rounded-lg`}
+        >
+          {Links.map((link) => (
+            <li
+              key={link.name}
+              className="md:my-0 my-6 flex justify-center mt-10"
+            >
+              <a
+                className="md:m-5 text-white hover:text-blue-300"
+                href={link.link}
+              >
+                {link.name}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div className="md:w-1/12 hidden md:flex items-center justify-around w-4/12 mx-4 mr-6">
+        <div className="text-blue-100 mx-2 py-1 md:py-2 px-2 md:px-4 border-2 rounded-full border-blue-50 hover:bg-black hover:text-white hover:border-black transition-all ease-out duration-150">
+          <button
+            onClick={props.authenticateUser}
+            className="flex items-center justify-evenly w-20 m-auto"
+          >
+            Login <FiGithub />
+          </button>
+        </div>
+      </div>
+    </nav>
+  );
+}