build: initial commit

.gitignore

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

package.json

@@ -3,9 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@chakra-ui/react": "^2.8.1",
+    "@flaticon/flaticon-uicons": "^2.4.0",
+    "@react-google-maps/api": "^2.19.2",
+    "firebase": "^10.4.0",
+    "flowbite-datepicker": "^1.2.2",
     "react": "^18.1.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.1.0",
-    "react-scripts": "5.0.1"
+    "react-router-dom": "^6.16.0",
+    "react-scripts": "^5.0.1",
+    "react-tailwindcss-datepicker": "^1.6.6",
+    "use-places-autocomplete": "^4.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -27,5 +36,12 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@ubilabs/google-maps-react-hooks": "^2.0.2",
+    "daisyui": "^3.8.0",
+    "prettier": "^3.0.3",
+    "prettier-plugin-tailwindcss": "^0.5.4",
+    "tailwindcss": "^3.3.3"
   }
 }

src/App.js

@@ -1,20 +1,84 @@
-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/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 TripProvider from "./Provider/TripProvider";
+import CoordinatesProvider from "./Provider/CoordinatesProvider";
+
+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}>
+      <TripProvider>
+        <CoordinatesProvider>
+          <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>
+          </CoordinatesProvider>
+        </TripProvider>
+      </UserContext.Provider>
+  );
+};
 
 export default App;