.eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": "next/core-web-vitals"
-}

.gitignore

@@ -1,36 +1,137 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# Firebase Stuff
+firebase-admin-key.json
+firebase*.json
 
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-.yarn/install-state.gz
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
 
-# local env files
-.env*.local
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
-# vercel
-.vercel
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
 
-# typescript
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
 *.tsbuildinfo
-next-env.d.ts
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# Am I the only mac user
+**/.DS_Store

README.md

@@ -1,36 +1,25 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+![](/frontend-next/public/logos/logo_transparent.png)
+Main repo for ChatMaps, our COS420 Project.
 
-## Getting Started
+ChatMaps is a web-based social networking service that allows users to connect to others in their local geographic area. It will implement an interactable mapping utility to show general user locations relative to other users, as well as a chat room feature that allows users to start public conversations based on a specified topic. ChatMaps is primarily intended for use in densely populated areas, such as college campuses or metropolitan areas, so people of similar interests can start conversations. The goal of this project is to create a web app that plots locations, gives a radius of the local area, and connects users into different topic-based chat rooms.
 
-First, run the development server:
+This service will implement user login and profiles, allowing users to add each other as friends and start private conversations. There will be several default chat rooms of varying topics, but users will also have the ability to create their own topics that will be viewable by other users. For example, a user at the University of Maine could create a joinable chat room titled “COS420”, which would be visible to others near this campus.
+
+This app shares some similarities to other social networks that implement location-based content. ChatMaps’ novel approach is to utilize user location to facilitate real-time communication with others within a given radius.
+
+The live version of this app can be found at:
+
+https://chatma.ps/
+
+A local version can be run with:
+
+cd frontend-next/
+
+npm run build
 
-```bash
 npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+then navigating to:
 
-You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+http://localhost:3000
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

frontend-next/.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "no-unused-vars": ["warn", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }],
+    "jsx-a11y/alt-text": "off",
+    "@next/next/no-img-element": "off"
+  }
+}

frontend-next/package.json

@@ -9,15 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "react": "^18",
-    "react-dom": "^18",
-    "next": "14.1.0"
+    "firebase": "^10.6.0",
+    "next": "^14.1.0",
+    "pigeon-maps": "^0.21.3",
+    "react": "^18.2.0",
+    "react-beforeunload": "^2.6.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.50.1"
   },
   "devDependencies": {
     "autoprefixer": "^10.0.1",
-    "postcss": "^8",
-    "tailwindcss": "^3.3.0",
     "eslint": "^8",
-    "eslint-config-next": "14.1.0"
+    "eslint-config-next": "14.1.0",
+    "postcss": "^8",
+    "tailwindcss": "^3.3.0"
   }
-}
+}

frontend-next/src/app/api/firebase-config.js

@@ -0,0 +1,19 @@
+import { initializeApp, getApps, getApp } from "firebase/app";
+import { getAuth } from "firebase/auth";
+import { getDatabase} from "firebase/database"
+
+var config = {
+    apiKey: "AIzaSyDbDPjQGt-lIjNPeTG-Q5AECM1m0vtOr2c",
+    authDomain: "chatmaps-3e7fa.firebaseapp.com",
+    projectId: "chatmaps-3e7fa",
+    storageBucket: "chatmaps-3e7fa.appspot.com",
+    messagingSenderId: "771010649524",
+    appId: "1:771010649524:web:b6e66d3457820c817b26e1",
+    databaseURL: "https://chatmaps-3e7fa-default-rtdb.firebaseio.com/",
+}
+
+var app = getApps().length > 0 ? getApp() : initializeApp(config);
+var auth = getAuth(app);
+var database = getDatabase(app);
+
+export { auth, app, database };

frontend-next/src/app/app/layout.js

@@ -0,0 +1,19 @@
+import { Inter } from "next/font/google";
+import "../globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata = {
+  title: "ChatMaps: Home",
+  description: "ChatMaps: Social Media for College Students",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+            {children}
+        </body>
+    </html>
+  );
+}

frontend-next/src/app/app/page.js

@@ -0,0 +1,292 @@
+"use client";
+// System Imports
+import { useState, useEffect } from "react";
+import { auth, database } from "../api/firebase-config";
+import { ref, onValue, set, remove, get } from "firebase/database";
+import { useBeforeunload } from "react-beforeunload";
+import {useRouter} from "next/navigation";
+import {Marker} from "pigeon-maps";
+import {onAuthStateChanged, signOut} from "firebase/auth"
+
+// Refactored Component Imports
+// Data Structure Imports
+import { ChatRoomSidebar, Member } from "../../components/app/datatypes";
+
+// Header Import
+import { Header } from "../../components/app/header";
+
+// Main Tab Imports
+import { MainTabChatRoom } from "../../components/app/main_tab/chat";
+import { MainTabHome } from "../../components/app/main_tab/home";
+
+// Sidebar Imports
+import {Home_Sidebar} from "../../components/app/sidebar/home";
+import { Chat_Sidebar } from "../../components/app/sidebar/chat";
+import { Profile_Sidebar } from "../../components/app/sidebar/profile";
+
+// Contains most everything for the app homepage
+function Home() {
+  // It's time to document and change these awful variable names
+  // State variables for app page
+  const [mainTab, setMainTab] = useState("home"); // Primary tab
+  const [tab, setTab] = useState("nearby"); // Sidebar Tab
+  const [chatRoomObj, setChatRoomObj] = useState(null); // Current chatroom object
+  const [myRoomsObj, setMyRoomsObj] = useState(null); // My Rooms Object
+  const [myRooms, setRoomData] = useState(null); // Current user saved rooms list
+  const [isRoomLoading, setRoomLoading] = useState(true); // myRooms loading variable, true = myRooms loading, false = finished loading
+  const [isMyRoom, setIsMyRoom] = useState(false); // Is current room in myRooms? true, false
+  const [location, setLocation] = useState(null); // location variable [lat,long]
+  const [loadingLoc, setLoadingLoc] = useState(true); // location variable loading, true = loading, false = finished loading
+  const [nearby, setNearby] = useState(null); // nearby rooms array
+  const [loadingNearby, setLoadingNearby] = useState(true); // loading nearby rooms array, true = loading, false = finished loading
+  const [chatroomOnline, setChatRoomOnline] = useState(null); // holds online users
+  const [chatroomUsers, setChatroomUsers] = useState(null); // holds all chatroom users
+  const [chatroomUsersLoading, setChatroomUsersLoading] = useState(true);
+  const [markers, setMarkers] = useState([]);
+  const [isAuthenticated, setAuth] = useState(false)
+  const [user, setUser] = useState(null)
+
+  // Authentication
+  useEffect(() => {
+    onAuthStateChanged(auth, (user) => {
+      if (user) {
+        get(ref(database, `users/${user.uid}`))
+        .then((userData) => {
+          userData = userData.val()
+          console.log(userData)
+          if (userData) {
+            setUser(userData)
+            setAuth(true)
+          } else {
+            window.location.href = "/onboarding"
+          }
+          
+        })
+      } else {
+        setAuth(false)
+        window.location.href = "/login"
+      }
+      })
+  }, [])
+
+
+  // Grabs user data, saves to user, then lists the users saved rooms
+  useEffect(() => {
+        if (user) {
+          onValue(ref(database, "/users/" + user.uid + "/rooms"), (snapshot) => {
+            setRoomLoading(true);
+            var rooms = snapshot.val();
+            setMyRoomsObj(rooms);
+            var roomArr = [];
+            var markerArr = markers;
+            for (var room in rooms) {
+              var newRoom = (
+                <ChatRoomSidebar
+                  roomObj={rooms[room]}
+                  key={rooms[room].timestamp}
+                  click={selectChatRoom}
+                />
+              );
+              markerArr.push(
+                <Marker
+                  width={30}
+                  anchor={[rooms[room].latitude, rooms[room].longitude]}
+                  color="blue"
+                />
+              );
+              roomArr.push(newRoom);
+            }
+            setMarkers(markerArr);
+            setRoomData(roomArr);
+            setRoomLoading(false);
+          });
+        }
+  },[user]);
+
+  // Grabs the user location
+  useEffect(() => {
+    if ("geolocation" in navigator && user) {
+      // Retrieve latitude & longitude coordinates from `navigator.geolocation` Web API
+      navigator.geolocation.getCurrentPosition(({ coords }) => {
+
+        setLocation(coords)
+        setLoadingLoc(false)
+        var path = String(coords.latitude.toFixed(2)).replace(".","")+"/"+String(coords.longitude.toFixed(2)).replace(".","")
+        var markersArr = markers
+        onValue(ref(database, `/rooms/${path}`), (snapshot) => {
+          var nearbyArr = []
+          if (snapshot.exists()) {
+            var data = snapshot.val();
+            for (var room in data) {
+              nearbyArr.push(
+                <ChatRoomSidebar roomObj={data[room]} click={selectChatRoom} />
+              );
+              // TODO: RANDOM LAST DIGIT TO MOVE AROUND THE MAP
+              markersArr.push(
+                <Marker
+                  width={30}
+                  anchor={[data[room].latitude, data[room].longitude]}
+                  color="blue"
+                />
+              );
+            }
+            setMarkers(markersArr);
+            setLoadingNearby(false);
+            setNearby(nearbyArr);
+          } else {
+            setLoadingNearby(false);
+          }
+        });
+      });
+    }
+  },[user]);
+
+
+  // Dont Double Send Leaving Message
+  useEffect(() => {
+    if (myRoomsObj && chatRoomObj) {
+      var roomName = chatRoomObj.name + "-" + chatRoomObj.timestamp;
+      if (myRooms != null && roomName in myRoomsObj) {
+        // its in there
+        setIsMyRoom(true);
+      } else {
+        // its not in there
+        setIsMyRoom(false);
+      }
+    }
+  }, [chatRoomObj]);
+
+  // Selects chat room
+  function selectChatRoom(roomObj) {
+        // Path of chatroom
+        var path = roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp;
+
+        setChatRoomObj(roomObj);
+
+        // Send entered message
+        var payload = {
+          body: "entered",
+          user: user.username,
+          isSystem: true,
+          timestamp: new Date().getTime(),
+        };
+        set(
+          ref(
+            database,
+            `/rooms/${path}/chats/${new Date().getTime()}-${user.username}`
+          ),
+          payload
+        );
+
+        // Code for Room Data
+        set(ref(database, `/rooms/${path}/users/online/${user.uid}`), user);
+        onValue(ref(database, `/rooms/${path}`), (snapshot) => {
+          setChatRoomOnline(null);
+          setChatroomUsers(null);
+
+          // Active users list
+          if (
+            snapshot.val().hasOwnProperty("users") &&
+            snapshot.val().users.hasOwnProperty("online")
+          ) {
+            var activeUsers = [];
+            var activeUsersJSON = snapshot.val().users.online;
+            for (var user in activeUsersJSON)
+              activeUsers.push(<Member memberObj={activeUsersJSON[user]} />);
+            setChatRoomOnline(activeUsers);
+          }
+
+          // Users who added to "my rooms"
+          console.log(
+            snapshot.val().hasOwnProperty("users") &&
+              snapshot.val().users.hasOwnProperty("all")
+          );
+          if (
+            snapshot.val().hasOwnProperty("users") &&
+            snapshot.val().users.hasOwnProperty("all")
+          ) {
+            setChatroomUsersLoading(true);
+            var allUsers = [];
+            var allUsersJSON = snapshot.val().users.all;
+            for (var user in allUsersJSON)
+              allUsers.push(<Member memberObj={allUsersJSON[user]} />);
+            setChatroomUsers(allUsers);
+            setChatroomUsersLoading(false);
+          }
+        });
+        setMainTab("chat");
+  }
+
+  // Fires to tell other uses that you are leaving the room
+  useBeforeunload(() => {
+        if (chatRoomObj && mainTab == "chat") {
+          var payload = {
+            body: "left",
+            user: user.username,
+            isSystem: true,
+            timestamp: new Date().getTime(),
+          };
+          set(
+            ref(
+              database,
+              `/rooms/${
+                chatRoomObj.path +
+                "/" +
+                chatRoomObj.name +
+                "-" +
+                chatRoomObj.timestamp
+              }/chats/${new Date().getTime()}-${user.username}`
+            ),
+            payload
+          );
+          remove(
+            ref(
+              database,
+              `/rooms/${
+                chatRoomObj.path +
+                "/" +
+                chatRoomObj.name +
+                "-" +
+                chatRoomObj.timestamp
+              }/users/online/${userID}`
+            )
+          );
+        }
+  });
+
+  return (
+    <div>
+      {isAuthenticated && (
+        <div className="grid grid-cols-4 auto-cols-max overflow-hidden">
+          {/* Left Side of Page */}
+          <div className="col-span-3 h-dvh">
+            {/* Header */}
+            <Header mainTab={mainTab} isMyRoom={isMyRoom} chatRoomObj={chatRoomObj} setChatRoomObj={setChatRoomObj} setMainTab={setMainTab} setIsMyRoom={setIsMyRoom} user={user}/>
+            {/* Main Page Section */}
+            <div className="mr-2 h-[calc(100%-110px)]">
+              {mainTab == "home" && !loadingLoc && (
+                <MainTabHome loc={location} markers={markers} user={user}/>
+              )}
+              {mainTab == "home" && loadingLoc && (
+                <MainTabHome loc={null} markers={markers} user={user}/>
+              )}
+              {mainTab == "chat" && <MainTabChatRoom roomObj={chatRoomObj} user={user}/>}
+            </div>
+          </div>
+          {/* Sidebar (Right Side of Page) */}
+          {mainTab == "home" && (
+            <Home_Sidebar tab={tab} nearby={nearby} loadingNearby={loadingNearby} setTab={setTab} isRoomLoading={isRoomLoading} myRooms={myRooms} loadingLoc={loadingLoc} location={location}/>
+          )}
+          {mainTab == "chat" && (
+            <Chat_Sidebar chatRoomObj={chatRoomObj} chatroomOnline={chatroomOnline} chatroomUsersLoading={chatroomUsersLoading} chatroomUsers={chatroomUsers}/>
+          )}
+          {mainTab == "profile" && (
+            <Profile_Sidebar/>
+          )}
+        </div>
+      )}
+  </div>
+  );
+}
+
+export default Home;

frontend-next/src/app/globals.css

@@ -0,0 +1,37 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  background-color: aliceblue;
+  text-align: center;
+  text-wrap:pretty;
+}
+
+button {
+  background: #dee0e0;
+  border-color: black;
+  border: 5px;
+  border-radius: 5px;
+  padding: 5px;
+  margin: 5px;
+  filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
+}
+
+button:hover {
+  background-color: rgb(166, 166, 166);
+}
+
+input {
+  border: 1px solid black;
+  border-radius: 4px;
+  padding: 10px 10px;
+  margin: 5px;
+}
+
+input.err {
+  border: 2px solid red;
+  border-radius: 4px;
+  padding: 10px 10px;
+  margin: 5px;
+}

frontend-next/src/app/layout.js

@@ -4,14 +4,16 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "ChatMaps",
+  description: "ChatMaps: Social Media for College Students"
 };
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        {children}
+      </body>
     </html>
   );
 }

frontend-next/src/app/login/layout.js

@@ -0,0 +1,19 @@
+import { Inter } from "next/font/google";
+import "../globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata = {
+  title: "ChatMaps: Login",
+  description: "ChatMaps: Social Media for College Students",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        {children}
+      </body>
+    </html>
+  );
+}

frontend-next/src/app/login/page.js

@@ -0,0 +1,66 @@
+"use client";
+import { useForm, Form } from "react-hook-form";
+import { useRouter } from "next/navigation";
+import "../globals.css"
+
+// Firebase imports
+import {auth} from "../api/firebase-config";
+import { setPersistence, signInWithEmailAndPassword, browserSessionPersistence } from "firebase/auth";
+
+function Login() {
+    var router = useRouter();
+    //var { register, handleSubmit } = useForm();
+    var { register, control, setError, handleSubmit, formState: { errors, isSubmitting, isSubmitted } } = useForm()
+
+    function authenticate(data) {
+        setPersistence(auth, browserSessionPersistence)
+        .then(() => {
+            signInWithEmailAndPassword(auth,data.email,data.password)
+            .then((userCredential) => {
+                if (userCredential.user) {
+                    router.push("/app")
+                } else {
+                    const formError = { type: "server", message: "Username or Password Incorrect" }
+                // set same error in both:
+                setError('password', formError)
+                setError('email', formError)
+                }
+            })
+        })
+    }
+
+    return (
+        <div>
+            <div className="grid h-screen place-items-center">
+                <div>
+                    <a href="/"><img src="logos/logo_transparent_inverse.png"/></a>
+                    <span className="text-[36px]">
+                        Chat with friends!
+                    </span>
+                    <div>
+                        <h3 className="text-[24px] mt-[25px] mb-2">Login</h3>
+                        {(errors.email && errors.password) && <div className="text-[red] mb-2 text-[18px] text-bold">Invalid Email or Password.</div>}
+                        <Form onSubmit={handleSubmit(authenticate)} encType={'application/json'}
+                        control={control}
+                        >
+                            <input type="email" id="email" className={(errors.email && errors.password) && "err"} {...register("email", { required: true })} placeholder="Enter Email Address"/><br/>
+                            <input type="password" id="password" name="password" className={(errors.email && errors.password) && "err"} {...register("password", { required: true })} placeholder="Enter Password"/><br/>
+                            <button className="inline-flex items-center px-4 py-2 transition ease-in-out duration-150 bg-[#dee0e0] m-5 bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">
+                                {(isSubmitting || isSubmitted) && <span className="inline-block">
+                                    <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                        <circle class="opacity-25" cx="12" cy="12" r="10" strokeWidth="4"></circle>
+                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                                    </svg>    
+                                </span> }
+                                Log In
+                            </button>
+                            <br/>Need an account? <a href="/register">Sign Up</a><br/>
+                        </Form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Login;

frontend-next/src/app/onboarding/layout.js

@@ -0,0 +1,19 @@
+import { Inter } from "next/font/google";
+import "../globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata = {
+  title: "ChatMaps: Onboarding",
+  description: "ChatMaps: Social Media for College Students"
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        {children}
+      </body>
+    </html>
+  );
+}

frontend-next/src/app/onboarding/page.js

@@ -0,0 +1,58 @@
+"use client";
+import "../globals.css"
+import { useForm } from "react-hook-form";
+import { useRouter } from "next/navigation";
+import { ref, set } from "firebase/database";
+import {auth, database} from "../api/firebase-config"
+import {onAuthStateChanged} from "firebase/auth"
+
+function createUser(data) {
+    onAuthStateChanged(auth, (user) => {
+        if (user.uid) {
+            console.log(user)
+            data.uid = user.uid
+            data.defined = true
+            data.email = user.email
+            set(ref(database, `users/${user.uid}`), data);
+            return true
+        } else {
+            return false
+        }
+    })
+}
+
+
+
+function Onboarding() {
+    var router = useRouter();
+    var { register, handleSubmit } = useForm();
+
+    function Onboard(data) {
+        createUser(data)
+        router.push("/app");
+        
+    }
+    return (
+        <div>
+            <div className="grid h-screen place-items-center">
+                <div>
+                    <img src="logos/logo_transparent_inverse.png"/>
+                    <span className="text-[36px]">
+                        Chat with friends!
+                    </span>
+                    <div className="m-5">
+                        Welcome to ChatMaps! We are excited to have you join our community!<br/>First we just need a little bit of information from you to get started.
+                    </div>
+                    <form action="#" onSubmit={handleSubmit(Onboard)}>
+                            <input type="text" {...register("username")} placeholder="Display Name"/><br/>
+                            <input type="text" {...register("firstName")} placeholder="First Name"/><br/>
+                            <input type="text" {...register("lastName")} placeholder="Last Name"/><br/>
+                            <button type="submit" className="inline-flex items-center px-4 py-2 transition ease-in-out duration-150 bg-[#dee0e0] m-5 bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">Save</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Onboarding;

frontend-next/src/app/page.js

@@ -0,0 +1,74 @@
+"use client"
+import { useState, useEffect } from 'react'
+
+import { auth, database } from "./api/firebase-config";
+import { ref, get} from "firebase/database";
+import {onAuthStateChanged} from "firebase/auth"
+
+
+function Home() {
+    const [isLoadingLoc, setLoadingLoc] = useState(true)
+    const [roomCount, setRoomCount] = useState(null)
+    const [isAuthenticated, setAuth] = useState(false)
+    const [userID, setUserID] = useState(null)
+
+    // Authentication
+  useEffect(() => {
+    onAuthStateChanged(auth, (user) => {
+      if (user) {
+        setUserID(user.uid)
+        setAuth(true)
+      } else {
+        setAuth(false)
+      }
+      })
+  }, [])
+
+    useEffect(() => {
+        if('geolocation' in navigator) {
+            // Retrieve latitude & longitude coordinates from `navigator.geolocation` Web API
+            navigator.geolocation.getCurrentPosition(({ coords }) => {
+              var path = String(coords.latitude.toFixed(2)).replace(".","")+"/"+String(coords.longitude.toFixed(2)).replace(".","")
+              get(ref(database, `/rooms/${path}`)).then((snapshot) => {
+                if (snapshot.exists()) {
+                    var count = 0
+                    for (var room in snapshot.val()) {
+                        count += 1
+                    }
+                    setRoomCount(count)
+                } else {
+                    console.log("No rooms nearby")
+                    setRoomCount(0)
+                }
+                setLoadingLoc(false)
+              });
+        });
+          }
+    })
+    return (
+        <div>
+            <div className="grid h-screen place-items-center">
+                <div>
+                    <img src="logos/logo_transparent_inverse.png"/>
+                    <span className="text-[36px]">
+                        Chat with friends!
+                    </span>
+                    <div className="m-5">
+                        {(!isAuthenticated) && 
+                            <div>
+                                <a href="/login"><button className="bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">Login</button></a>
+                                <a href="/register"><button className="bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">Sign Up</button></a>
+                            </div>
+                        }
+                        {isAuthenticated &&  <a href="/app"><button className="bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">Continue to App</button></a>}
+                        {(!isLoadingLoc && roomCount == 1) && <div className='text-[24px] pt-10'>Join others in {roomCount} room near you!</div>}
+                        {(!isLoadingLoc && roomCount != 1 && roomCount != 0) && <div className='text-[24px] pt-10'>Join others in {roomCount} rooms near you!</div>}
+                        {(isLoadingLoc || (roomCount == 0 && !isLoadingLoc)) && <div className='text-[24px] pt-10'>Start the conversation today!</div>}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Home;

frontend-next/src/app/register/layout.js

@@ -0,0 +1,19 @@
+import { Inter } from "next/font/google";
+import "../globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata = {
+  title: "ChatMaps: Register",
+  description: "ChatMaps: Social Media for College Students",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        {children}
+      </body>
+    </html>
+  );
+}

frontend-next/src/app/register/page.js

@@ -0,0 +1,78 @@
+"use client";
+import { useRouter } from "next/navigation";
+import { useForm, Form } from "react-hook-form";
+import "../globals.css"
+import { useState } from "react";
+
+import { createUserWithEmailAndPassword, signInWithEmailAndPassword, setPersistence, browserSessionPersistence } from "firebase/auth";
+import {auth} from "../api/firebase-config";
+
+async function Signup(data) {
+    var userCredential = await createUserWithEmailAndPassword(auth,data.email,data.password);
+    if (userCredential.user) {
+        setPersistence(auth, browserSessionPersistence)
+        .then(() => {
+            signInWithEmailAndPassword(auth,data.email,data.password)
+            .then((res) => {
+                console.log(res)
+                return true
+            })
+        })
+        
+    } else {
+        return false
+    }
+}
+
+function Register() {
+    var router = useRouter();
+    var { register, control, formState: { errors } } = useForm()
+    var emailRegex = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/
+    var [passwordMismatch, setPasswordMismatch] = useState(false);
+    const passwordMatch = (data) => {
+        return data.password === data.passwordCheck;
+    };
+
+    function onSubmit({data}) {
+        if (passwordMatch(data)) {
+            setPasswordMismatch(false);
+            if (Signup(data)) {
+                router.push("/onboarding");
+            }
+
+        } else{
+            setPasswordMismatch(true);
+            return;
+        }
+    }
+
+    return (
+        <div>
+            <div className="grid h-screen place-items-center">
+                <div>
+                    <a href="/"><img src="logos/logo_transparent_inverse.png"/></a>
+                    <span className="text-[36px]">
+                        Chat with friends!
+                    </span>
+                    <div>
+                        <h3 className="text-[24px] mt-[15px]">Register</h3>
+                        <Form onSubmit={onSubmit}
+                        encType={'application/json'}
+                        control={control}
+                        >
+                            <input type="email" {...register("email", {required: true, pattern: emailRegex})} className={errors.email && "err"} placeholder="Enter Email Address"/><br/>
+                            <input type="password" {...register("password", {required: true})} className={errors.password && errors.password.type == 'required' && "err"} placeholder="Enter Password"/><br/>
+                            <input type ="password" {...register("passwordCheck", {required: false})} className ={errors.passwordCheck && errors.passwordCheck.type == 'required' && "err"} placeholder="Re-enter Password"/><br/>
+                                {passwordMismatch && <p className="text-red-500">Passwords do not match</p>}
+                            <button type="submit" className="bg-[#dee0e0] m-5 bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">
+                                Register</button><br/>
+                            Have an account? <a href="/login">Log In</a>
+                        </Form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Register;

frontend-next/src/components/app/datatypes.js

@@ -0,0 +1,142 @@
+import { Map, Marker, ZoomControl } from "pigeon-maps";
+
+// Colors for Messages
+const userColors = [
+    "#ff80ed",
+    "#065535",
+    "#133337",
+    "#ffc0cb",
+    "#e6e6fa",
+    "#ffd700",
+    "#ffa500",
+    "#0000ff",
+    "#1b85b8",
+    "#5a5255",
+    "#559e83",
+    "#ae5a41",
+    "#c3cb71",
+  ];
+
+// Chat Message
+export function Chat({ chatObj }) {
+    let dateOptions = {
+      weekday: "long",
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    };
+  
+    const generateColor = (user_str) => {
+      // hashes username for consistent colors, maybe all functionality to pick color later
+      let hash = 0;
+      for (let i = 0; i < user_str.length; i++) {
+        hash = user_str.charCodeAt(i) + (hash * 32 - hash);
+      }
+      const index = Math.abs(hash) % userColors.length;
+      return index;
+    };
+  
+    return (
+      <div className="width-[100%] bg-white rounded-lg mt-1 text-left p-1 grid grid-cols-2 mr-2">
+        <div>
+          <span style={{ color: userColors[generateColor(chatObj.user)] }}>
+            {chatObj.user}
+          </span>
+          : {chatObj.body}
+        </div>
+        <div className="text-right text-[#d1d1d1]">
+          {new Date(chatObj.timestamp).toLocaleString(dateOptions)}
+        </div>
+      </div>
+    );
+  }
+  
+// System Chat Message
+export function SystemMessage({ chatObj }) {
+let dateOptions = {
+    weekday: "long",
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+};
+
+const generateColor = (user_str) => {
+    // hashes username for consistent colors, maybe all functionality to pick color later
+    let hash = 0;
+    for (let i = 0; i < user_str.length; i++) {
+    hash = user_str.charCodeAt(i) + (hash * 32 - hash);
+    }
+    const index = Math.abs(hash) % userColors.length;
+    return index;
+};
+
+return (
+    <div className="width-[100%] bg-white rounded-lg mt-1 text-left p-1 grid grid-cols-2 mr-2">
+    <div className="text-[#d1d1d1]">
+        <span style={{ color: userColors[generateColor(chatObj.user)] }}>
+        {chatObj.user}
+        </span>{" "}
+        has {chatObj.body} the room.
+    </div>
+    <div className="text-right text-[#d1d1d1]">
+        {new Date(chatObj.timestamp).toLocaleString(dateOptions)}
+    </div>
+    </div>
+);
+}
+  
+// Member for Active/Room members in sidebar
+export function Member({ memberObj }) {
+    return (
+      <div className="cursor-pointer g-[aliceblue] rounded-lg m-3 shadow-xl p-2">
+        {memberObj.username}
+      </div>
+    );
+  }
+
+// Chat Room Object for myRooms and Nearby in sidebar
+export function ChatRoomSidebar({ roomObj, click }) {
+    // TODO: Gross fix but it works
+    function clicker() {
+      click(roomObj);
+    }
+    return (
+      <div
+        onClick={clicker}
+        className="border-[black] border-1 shadow-lg p-2 m-2 rounded-lg cursor-pointer"
+      >
+        <div className="col-span-2">
+          <div className="font-bold">{roomObj.name}</div>
+          <div className="italic">{roomObj.description}</div>
+        </div>
+      </div>
+    );
+  }
+
+// Map module for main page and chat room sidebar
+// TODO: MAKE NOT MOVABLE
+export function Geo({ loc, zoom, locMarker, markers }) {
+    if (loc) {
+      return (
+        <Map center={[loc.latitude, loc.longitude]} defaultZoom={zoom}>
+          {markers && markers}
+          {locMarker && (
+            <Marker
+              width={30}
+              anchor={[loc.latitude, loc.longitude]}
+              color="red"
+            />
+          )}
+          {zoom && <ZoomControl />}
+        </Map>
+      );
+    } else {
+      return (
+        <Map className="rounded-lg" defaultCenter={[0, 0]} defaultZoom={zoom} />
+      );
+    }
+  }

frontend-next/src/components/app/header.js

@@ -0,0 +1,127 @@
+import { auth, database } from "../../app/api/firebase-config";
+import { ref, set, remove } from "firebase/database";
+import {signOut} from "firebase/auth";
+  
+  function logout() {
+    console.log("Fire")
+    signOut(auth)
+  }
+
+  // Closes chat room
+  function closeChatRoom(roomObj, setChatRoomObj, setMainTab, user) {
+        var path = roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp;
+        var payload = {
+          body: "left",
+          user: user.username,
+          isSystem: true,
+          timestamp: new Date().getTime(),
+        };
+        set(
+          ref(
+            database,
+            `/rooms/${path}/chats/${new Date().getTime()}-${user.username}`
+          ),
+          payload
+        );
+        remove(ref(database, `/rooms/${path}/users/online/${user.uid}`));
+        setChatRoomObj(null);
+        setMainTab("home");
+  }
+
+  // Adds room to myRooms
+  function addToMyRooms(chatRoomObj, setIsMyRoom, user) {
+        set(
+          ref(
+            database,
+            `/users/${user.uid}/rooms/${chatRoomObj.name}-${chatRoomObj.timestamp}`
+          ),
+          {
+            name: chatRoomObj.name,
+            path: chatRoomObj.path,
+            timestamp: chatRoomObj.timestamp,
+            description: chatRoomObj.description,
+            longitude: chatRoomObj.longitude,
+            latitude: chatRoomObj.latitude,
+          }
+        );
+        var path =
+          chatRoomObj.path +
+          "/" +
+          chatRoomObj.name +
+          "-" +
+          chatRoomObj.timestamp;
+        set(ref(database, `/rooms/${path}/users/all/${user.uid}`), user);
+    setIsMyRoom(true);
+  }
+
+  // Deletes saved room from myRooms
+  function removeFromMyRooms(chatRoomObj, setIsMyRoom, user) {
+        var path =
+          chatRoomObj.path +
+          "/" +
+          chatRoomObj.name +
+          "-" +
+          chatRoomObj.timestamp;
+        remove(
+          ref(
+            database,
+            `/users/${user.uid}/rooms/${chatRoomObj.name}-${chatRoomObj.timestamp}`
+          )
+        );
+        remove(ref(database, `/rooms/${path}/users/all/${user.uid}`));
+    setIsMyRoom(false);
+  }
+
+export function Header({mainTab, isMyRoom, chatRoomObj, setChatRoomObj, setMainTab, setIsMyRoom, user}) {
+    return (
+        <div className="m-2 rounded-lg h-[63px] bg-white shadow-2xl grid grid-cols-2 p-1">
+          <div className="h-[60px]">
+            <a href="/">
+              <img
+                src="logos/logo_transparent_inverse.png"
+                className="h-[60px]"
+              />
+            </a>
+          </div>
+          <div className="h-[60px] p-4">
+            {mainTab == "chat" && isMyRoom == false && (
+              <a
+                onClick={() => {
+                  addToMyRooms(chatRoomObj, setIsMyRoom, user);
+                }}
+                className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5"
+              >
+                Add to &quot;My Rooms&quot;
+              </a>
+            )}
+            {mainTab == "chat" && isMyRoom == true && (
+              <a
+                onClick={() => {
+                  removeFromMyRooms(chatRoomObj, setIsMyRoom, user);
+                }}
+                className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5"
+              >
+                Remove from &quot;My Rooms&quot;
+              </a>
+            )}
+            {mainTab == "chat" && (
+              <a
+                onClick={() => {
+                  closeChatRoom(chatRoomObj, setChatRoomObj, setMainTab, user);
+                }}
+                className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5"
+              >
+                Close Chat
+              </a>
+            )}
+            <a
+              onClick={logout}
+              href="/"
+              className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full"
+            >
+              Sign Out
+            </a>
+          </div>
+        </div>
+    )
+}

frontend-next/src/components/app/main_tab/chat.js

@@ -0,0 +1,94 @@
+import { Chat, SystemMessage} from "../datatypes"
+import { useState, useEffect } from "react";
+import { Form, useForm } from "react-hook-form";
+import { ref, onValue, set} from "firebase/database";
+import { database } from "../../../app/api/firebase-config";
+
+
+  // Chatroom Module for Primary Tab
+export function MainTabChatRoom({ roomObj, user }) {
+    var { register, control, reset, handleSubmit } = useForm();
+    const [chats, setData] = useState(null);
+    const [isLoading, setLoading] = useState(true);
+  
+    // Message updater
+    useEffect(() => {
+      onValue(
+        ref(
+          database,
+          `/rooms/${
+            roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp
+          }/chats`
+        ),
+        (snapshot) => {
+          var chatsArr = [];
+          var messages = snapshot.val();
+          for (var message in messages) {
+            if (messages[message].isSystem) {
+              chatsArr.push(
+                <SystemMessage
+                  chatObj={messages[message]}
+                  key={messages[message].timestamp}
+                />
+              );
+            } else {
+              chatsArr.push(
+                <Chat
+                  chatObj={messages[message]}
+                  key={messages[message].timestamp}
+                />
+              );
+            }
+          }
+          setData(chatsArr.reverse());
+          setLoading(false);
+        }
+      );
+    });
+  
+    function sendMessage(data) {
+      reset();
+          var payload = {
+            body: data.message,
+            user: user.username,
+            isSystem: false,
+            timestamp: new Date().getTime(),
+          };
+          set(
+            ref(
+              database,
+              `/rooms/${
+                roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp
+              }/chats/${new Date().getTime()}-${user.username}`
+            ),
+            payload
+          );
+    }
+  
+    if (isLoading) return <div>Loading</div>;
+    if (!chats) return <div>No Chats</div>;
+    return (
+      <div className="m-1 h-[100%] rounded-lg">
+        <div className="h-[90%] m-4 overflow-y-auto flex flex-col-reverse">
+          {chats}
+        </div>
+        <div className="m-2 h-[10%] w-[100%] bg-white rounded-lg">
+          <Form
+            onSubmit={handleSubmit(sendMessage)}
+            control={control}
+            className="w-[100%] p-[0px]"
+          >
+            <input
+              type="text"
+              {...register("message")}
+              placeholder="Enter message"
+              className="w-[83%] border-[0px] mt-[8px] mb-[8px]"
+            />
+            <button className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5 w-[8%]">
+              Send
+            </button>
+          </Form>
+        </div>
+      </div>
+    );
+  }

frontend-next/src/components/app/main_tab/home.js

@@ -0,0 +1,31 @@
+import {Geo} from "../datatypes"
+
+// Module for Welcome Message on main tab landing page
+function WelcomeMessage({user}) {
+    return (
+      <div className="bg-white rounded-lg m-2 mt-4 text-left p-2 pl-5">
+        <div>
+          Welcome, {user.firstName} {user.lastName} ({user.username})
+        </div>
+        <div>Lets see what&apos;s happening in your area.</div>
+      </div>
+    );
+  }
+
+// Primary App Landing Page
+export function MainTabHome({ loc, markers, user }) {
+    return (
+      <>
+        <WelcomeMessage user={user}/>
+        <div className="h-[calc(100%-110px)] m-5 rounded-lg">
+          <Geo
+            loc={loc}
+            zoom={14}
+            movable={true}
+            locMarker={true}
+            markers={markers}
+          />
+        </div>
+      </>
+    );
+  }

frontend-next/src/components/app/sidebar/chat.js

@@ -0,0 +1,38 @@
+import { Geo } from "../datatypes";
+
+export function Chat_Sidebar({chatRoomObj, chatroomOnline, chatroomUsersLoading, chatroomUsers}) {
+    return (
+        <div className="h-dvh">
+          <div className="m-2 h-[98%] grid grid-cols-1">
+            <div className="bg-white rounded-lg m-2 shadow-2xl relative">
+              <div className="w-[100%] h-[100%] opacity-50 absolute rounded-lg z-10">
+                <Geo
+                  loc={{
+                    latitude: parseFloat(chatRoomObj.latitude.toFixed(2)),
+                    longitude: parseFloat(chatRoomObj.longitude.toFixed(2)),
+                  }}
+                  zoom={12}
+                  movable={false}
+                  marker={false}
+                />
+              </div>
+              <div className="z-10 top-0 left-0 w-[100%] h-[100%] absolute text-left pl-3 pt-2">
+                <span className="font-bold text-[24px]">
+                  {chatRoomObj.name}
+                </span>
+                <br />
+                {chatRoomObj.description}
+              </div>
+            </div>
+            <div className="bg-white rounded-lg m-2 shadow-2xl">
+              <div>Online Members</div>
+              {chatroomOnline}
+            </div>
+            <div className="bg-white rounded-lg m-2 shadow-2xl">
+              <div>All Members</div>
+              {!chatroomUsersLoading && chatroomUsers}
+            </div>
+          </div>
+        </div>
+    )
+}

frontend-next/src/components/app/sidebar/home.js

@@ -0,0 +1,126 @@
+import { Form, useForm } from "react-hook-form";
+import { database } from "../../../app/api/firebase-config";
+import { ref, set } from "firebase/database";
+
+// CreateRoom Module for Sidebar Create Tab
+function CreateRoom({ loc }) {
+    var { register, control, reset, handleSubmit } = useForm();
+
+    function createRoom(data) {
+      reset();
+      var path =
+        String(loc.latitude.toFixed(2)).replace(".", "") +
+        "/" +
+        String(loc.longitude.toFixed(2)).replace(".", "");
+      var timestamp = new Date().getTime();
+      var payload = {
+        name: data.name,
+        description: data.description,
+        timestamp: timestamp,
+        latitude: loc.latitude,
+        longitude: loc.longitude,
+        path: path,
+      };
+      set(ref(database, `/rooms/${path}/${data.name}-${timestamp}`), payload);
+    }
+
+    return (
+      <div className="overflow-y-auto h-[90%]">
+        <Form control={control} onSubmit={handleSubmit(createRoom)}>
+          <input
+            {...register("name")}
+            placeholder="Room Name"
+            className="mt-2"
+          />
+          <input
+            {...register("description")}
+            placeholder="Room Description"
+            className="mt-2"
+          />
+          <br />
+          <div className="mt-3 mb-2">
+            Creating room near ({loc.latitude.toFixed(2)},{" "}
+            {loc.longitude.toFixed(2)})
+          </div>
+          <button className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5">
+            Create
+          </button>
+        </Form>
+      </div>
+    );
+  }
+
+export function Home_Sidebar({tab, nearby, loadingNearby, setTab, isRoomLoading, myRooms, loadingLoc, location}) {
+    return (
+        <div className="h-dvh">
+          <div className="bg-white shadow-2xl rounded-lg m-2 h-[98%]">
+            <div className="p-2">
+              <div className="p-1 rounded-lg grid grid-cols-3 bg-white">
+                <div
+                  className={
+                    tab == "nearby"
+                      ? "select-none p-1 cursor-pointer rounded-lg hover:bg-[#C0C0C0] bg-[#D3D3D3]"
+                      : "select-none p-1 cursor-pointer rounded-lg hover:bg-[#C0C0C0]"
+                  }
+                  onClick={() => {
+                    setTab("nearby");
+                  }}
+                >
+                  Nearby
+                </div>
+                <div
+                  className={
+                    tab == "rooms"
+                      ? "select-none p-1 cursor-pointer rounded-lg hover:bg-[#C0C0C0] bg-[#D3D3D3]"
+                      : "select-none p-1 cursor-pointer rounded-lg hover:bg-[#C0C0C0]"
+                  }
+                  onClick={() => {
+                    setTab("rooms");
+                  }}
+                >
+                  My Rooms
+                </div>
+                <div
+                  className={
+                    tab == "create"
+                      ? "select-none p-1 cursor-pointer rounded-lg hover:bg-[#C0C0C0] bg-[#D3D3D3]"
+                      : "select-none p-1 cursor-pointer rounded-lg hover:bg-[#C0C0C0]"
+                  }
+                  onClick={() => {
+                    setTab("create");
+                  }}
+                >
+                  Create
+                </div>
+              </div>
+            </div>
+            {tab == "nearby" && (
+              <div className="overflow-y-auto h-[90%]">
+                <div>
+                  {!nearby && !loadingNearby && (
+                    <div>
+                      No Nearby Rooms
+                      <br />
+                      Create One?
+                    </div>
+                  )}
+                  {loadingNearby && <div>Loading...</div>}
+                  {nearby}
+                </div>
+              </div>
+            )}
+            {tab == "rooms" && (
+              <div className="overflow-y-auto h-[90%]">
+                <div>
+                  {isRoomLoading && <div>Loading</div>}
+                  {!myRooms && !isRoomLoading && <div>No User Saved Rooms</div>}
+                  {myRooms}
+                </div>
+              </div>
+            )}
+            {tab == "create" && !loadingLoc && <CreateRoom loc={location} />}
+            {tab == "create" && loadingLoc && <div>Loading...</div>}
+          </div>
+        </div>
+    )
+}

frontend-next/src/components/app/sidebar/profile.js

@@ -0,0 +1,7 @@
+export function Profile_Sidebar() {
+    return (
+        <div className="h-dvh">
+          <div className=" bg-white m-2 h-[98%]">Profile</div>
+        </div>
+    )
+}

frontend-next/tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  plugins: [],
+};

public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

src/app/globals.css

@@ -1,33 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}

src/app/page.js

@@ -1,113 +0,0 @@
-import Image from "next/image";
-
-export default function Home() {
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">src/app/page.js</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{" "}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-full sm:before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full sm:after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
-        <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800 hover:dark:bg-opacity-30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Learn{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Templates{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Explore starter templates for Next.js.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Deploy{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50 text-balance`}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
-  );
-}

tailwind.config.js

@@ -1,18 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-};