build: initial commit

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

package.json

@@ -3,8 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@flaticon/flaticon-uicons": "^2.4.0",
+    "firebase": "^10.4.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1"
   },
   "scripts": {
@@ -27,5 +30,11 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "daisyui": "^3.8.0",
+    "prettier": "^3.0.3",
+    "prettier-plugin-tailwindcss": "^0.5.4",
+    "tailwindcss": "^3.3.3"
   }
 }

src/App.js

@@ -1,20 +1,82 @@
-import React from "react";
-import logo from "./logo.png";
+import { useState, useEffect, createContext } from "react";
+import { Routes, Route } from "react-router-dom";
 import "./App.css";
+import { auth } from "./firebase.js";
 
-class App extends React.Component {
-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-        </header>
-      </div>
-    );
+import Login from "./pages/Login.js";
+import Explore from "./pages/Explore.js";
+import Search from "./pages/Search.js";
+import Create from "./pages/Create.js";
+import Profile from "./pages/Profile.js";
+import ErrorPage from "./pages/ErrorPage.js";
+
+import { onAuthStateChanged } from "firebase/auth";
+
+export const UserContext = createContext();
+
+const App = (props) => {
+  const [user, setUser] = useState({});
+  const [username, setUsername] = useState("");
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  const infoToPass = {
+    user,
+    setUser,
+    username,
+    setUsername,
+    isLoggedIn,
+    setIsLoggedIn
   }
+
+  // that empty [] at the end is the condition for the useEffect to run - useEffect only runs when the stuff in the brackets changes. if nothing is in the brackets, it only runs once on startup, making the whole useEffect block equal to a componentDidMount
+  useEffect(() => {
+    onAuthStateChanged(auth, (userInfo) => {
+      if (userInfo) {
+        // User signed in
+        setUser(userInfo);
+        setIsLoggedIn(true);
+
+        ///////////redirect to "/Feed" page//////////////////
+      } else {
+        // No sign in user
+        setUser({});
+        setIsLoggedIn(false);
+        ///////////redirect to "/" Login Page//////////////////
+      }
+    });
+  }, []);
+
+  return (
+    <UserContext.Provider value={infoToPass}>
+      <Routes>
+          <Route
+          path="/"
+          element={<Login />}
+          errorElement={<ErrorPage />}
+          />
+          <Route
+          path="/Explore"
+          element={<Explore />}
+          errorElement={<ErrorPage />}
+          />
+          <Route
+          path="/Search"
+          element={<Search />}
+          errorElement={<ErrorPage />}
+          />
+          <Route
+          path="/Create"
+          element={<Create />}
+          errorElement={<ErrorPage />}
+          />
+          <Route
+          path="/Profile"
+          element={<Profile />}
+          errorElement={<ErrorPage />}
+          />
+      </Routes>
+    </UserContext.Provider>
+  )
 }
 
 export default App;

src/components/footer.js

@@ -0,0 +1,30 @@
+import { NavLink } from "react-router-dom";
+
+const Footer = (props) => {
+  return (
+    <footer className="btm-nav">
+      <NavLink 
+        to="/Explore" 
+        className="text-2xl">
+            <i class="fi fi-rr-marker"></i>
+      </NavLink>
+      <NavLink 
+        to="/Search" 
+        className="text-2xl">
+            <i className="fi fi-rr-search"></i>
+      </NavLink>
+      <NavLink 
+        to="/Create" 
+        className="text-2xl">
+            <i className="fi fi-rr-add"></i>
+      </NavLink>
+      <NavLink 
+        to="/Profile" 
+        className="text-2xl">
+            <i className="fi fi-rr-circle-user"></i>
+      </NavLink>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/header.js

@@ -0,0 +1,13 @@
+import { NavLink } from "react-router-dom";
+
+const Header = () => {
+  return (
+    <header className="navbar bg-base-100 text-2xl flex justify-between p-4 border-b">
+      <a href="/Feeds" className="font-sans">
+        globalgems
+      </a>
+    </header>
+  );
+};
+
+export default Header;

src/firebase.js

@@ -0,0 +1,25 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import { getDatabase } from "firebase/database";
+import { getStorage } from "firebase/storage";
+import { getAuth } from "firebase/auth";
+
+// TODO: Replace with your app's Firebase project configuration
+const firebaseConfig = {
+  apiKey: process.env.REACT_APP_API_KEY,
+  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
+  // The value of `databaseURL` depends on the location of the database
+  databaseURL: process.env.REACT_APP_DATABASE_URL,
+  projectId: process.env.REACT_APP_PROJECT_ID,
+  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
+  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
+  appId: process.env.REACT_APP_APP_ID
+};
+
+// Initialize Firebase
+const firebaseApp = initializeApp(firebaseConfig);
+
+// Get a reference to the database service and export the reference for other modules
+export const database = getDatabase(firebaseApp);
+export const storage = getStorage(firebaseApp);
+export const auth = getAuth(firebaseApp);

src/index.css

@@ -1,3 +1,10 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@import "~@flaticon/flaticon-uicons/css/regular/rounded";
+@import "~@flaticon/flaticon-uicons/css/solid/rounded";
+@import "~@flaticon/flaticon-uicons/css/brands/all";
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",

src/index.js

@@ -2,10 +2,11 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
+import { BrowserRouter } from "react-router-dom";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  <React.StrictMode>
+  <BrowserRouter>
     <App />
-  </React.StrictMode>
+  </BrowserRouter>
 );

src/pages/Create.js

@@ -0,0 +1,52 @@
+import React, { useState, useEffect, useContext } from "react";
+import { useNavigate } from "react-router-dom";
+import "../App.css";
+import Header from "../components/header.js";
+import Footer from "../components/footer.js";
+
+import { database, storage } from "../firebase.js";
+import { UserContext } from "../App.js";
+
+import {
+  ref,
+  set,
+  push,
+  onChildAdded,
+  onChildRemoved,
+  onValue,
+} from "firebase/database";
+
+import { 
+    ref as sRef, 
+    uploadBytes, 
+    getDownloadURL 
+} from "firebase/storage";
+
+/////////// DECALRE FIREBASE LIST NAME HERE ///////////
+/////////// e.g. const DB_POSTS_KEY = "posts"; ///////////
+
+const Create = (props) => {
+  // User Object brought in via useContext();
+  const { user } = useContext(UserContext);
+  const navigate = useNavigate();
+
+  /////////// DECALRE STATES HERE ///////////
+
+  //Equivalent to "componentDidMount()"
+  useEffect(() => {
+
+  }, []);
+
+  return (
+    <div className="App">
+      <Header />
+      <div
+        className="flex flex-col h-screen justify-center text-center content-center overflow-auto"
+        style={{ height: "calc(100% - 128px)" }}
+      ></div>
+      <Footer />
+    </div>
+  );
+};
+
+export default Create;

src/pages/ErrorPage.js

@@ -0,0 +1,26 @@
+import { useRouteError } from "react-router-dom";
+import "../App.css";
+
+import Header from "../components/header.js";
+
+const ErrorPage = () => {
+
+  const error = useRouteError();
+  console.error(error);
+
+  return (
+    <div className="App">
+      <Header />
+      <div>
+        <br />
+        <h2>Oops!</h2>
+        <p>Sorry, an unexpected error has occurred.</p>
+        <p>
+          <i>{error.statusText || error.message}</i>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default ErrorPage;

src/pages/Explore.js

@@ -0,0 +1,45 @@
+import React, { useState, useEffect, useContext } from "react";
+import "../App.css";
+import Header from "../components/header.js";
+import Footer from "../components/footer.js";
+
+import { database } from "../firebase.js";
+import { UserContext } from "../App.js";
+
+import {
+  ref,
+  set,
+  push,
+  onChildAdded,
+  onChildRemoved,
+  onValue,
+} from "firebase/database";
+
+/////////// DECALRE FIREBASE LIST NAME HERE ///////////
+/////////// e.g. const DB_POSTS_KEY = "posts"; ///////////
+
+const Feeds = (props) => {
+  // User Object brought in via useContext();
+  const { user } = useContext(UserContext);
+
+  /////////// DECALRE STATES HERE ///////////
+
+  //Equivalent to "componentDidMount()"
+  useEffect(() => {
+
+  }, []);
+
+  return (
+    <div className="App">
+      <Header />
+      <div
+        className="flex flex-col h-screen justify-center text-center content-center overflow-auto"
+        style={{ height: "calc(100% - 128px)" }}
+      >
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+export default Feeds;