Refactor Authentication Flow (#44)

Ideally this will be customizable at some point

.gitignore

@@ -0,0 +1,137 @@
+# Firebase Stuff
+firebase-admin-key.json
+firebase*.json
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# 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
+
+# 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,2 +1,25 @@
-# COS420-Project
-Main repo for COS420 Project Group 4
+![](/frontend-next/public/logos/logo_transparent.png)
+Main repo for ChatMaps, our COS420 Project.
+
+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.
+
+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
+
+npm run dev
+
+then navigating to:
+
+http://localhost:3000
+

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/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

frontend-next/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

frontend-next/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "chatmaps",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "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",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.0",
+    "postcss": "^8",
+    "tailwindcss": "^3.3.0"
+  }
+}

frontend-next/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

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

@@ -0,0 +1,19 @@
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata = {
+  title: "ChatMaps",
+  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/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: [],
+};

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "ChatMaps",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}