From d982bf550eafb8c2855432f3285e39d754c60b79 Mon Sep 17 00:00:00 2001
From: Barf-Vader <47476490+Barf-Vader@users.noreply.github.com>
Date: Tue, 10 Jun 2025 18:25:42 +0100
Subject: [PATCH 1/9] feat: reports

---
 src/lib/components/Report.svelte              | 128 ++++++++++++++++++
 src/lib/database.d.ts                         |  35 +++++
 src/lib/index.ts                              |   6 +
 src/routes/space/[id]/+page.svelte            |  27 ++++
 .../20250609142130_add-compulsory-tags.sql    |   4 +-
 .../20250610163930_add_report_table.sql       |  12 ++
 supabase/schemas/0001_study_spaces.sql        |  12 ++
 7 files changed, 222 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/components/Report.svelte
 create mode 100644 supabase/migrations/20250610163930_add_report_table.sql

diff --git a/src/lib/components/Report.svelte b/src/lib/components/Report.svelte
new file mode 100644
index 0000000..38e3ced
--- /dev/null
+++ b/src/lib/components/Report.svelte
@@ -0,0 +1,128 @@
+<script lang="ts">
+    import { reportTypes } from "$lib";
+    import crossUrl from "$lib/assets/cross.svg";
+    import Textarea from "./inputs/Textarea.svelte";
+    import type { Table } from "$lib";
+
+    const { data, studySpaceId, hideFunc } = $props();
+    const { supabase } = $derived(data);
+
+    let uploading = $state(false);
+    let reportData = $state<Omit<Table<"reports">, "id" | "created_at" | "updated_at">>({
+        study_space_id: studySpaceId,
+        type: "",
+        content: ""
+    });
+
+    async function uploadReport() {
+        const { data: studySpaceInsert, error: reportUploadError } = await supabase
+            .from("reports")
+            .insert(reportData)
+            .select()
+            .single();
+
+        if (reportUploadError)
+            return alert(`Error submitting report: ${reportUploadError.message}`);
+        else alert("Report submitted successfully!");
+    }
+</script>
+
+<div class="overlay">
+    <form
+        onsubmit={async (event) => {
+            event.preventDefault();
+            uploading = true;
+            await uploadReport();
+            uploading = false;
+            hideFunc();
+        }}
+        class="reportContainer"
+    >
+        <h1>Submit a Report</h1>
+        <p>What's the reason?</p>
+        <select name="reportType" class="reportType" required bind:value={reportData.type}>
+            <option value="" disabled selected>Report type</option>
+            {#each reportTypes as reportType (reportType)}
+                <option value={reportType}>{reportType}</option>
+            {/each}
+        </select>
+        <label for="description">Briefly describe the problem:</label>
+        <Textarea
+            name="description"
+            placeholder="Image is inappropriate..."
+            rows={2}
+            bind:value={reportData.content}
+        />
+        <button disabled={!reportData.type || reportData.content?.length === 0} class="submit"
+            >Submit</button
+        >
+        <button type="button" class="exit" aria-label="exit" onclick={hideFunc}
+            ><img src={crossUrl} alt="exit" /></button
+        >
+    </form>
+</div>
+
+<style>
+    .overlay {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        position: fixed;
+        justify-content: center;
+        align-items: center;
+        background-color: rgba(8, 15, 18, 0.9);
+        z-index: 100;
+    }
+
+    .reportContainer {
+        display: flex;
+        flex-direction: column;
+        width: 80%;
+        gap: 0.5rem;
+        padding: 1rem;
+        background-color: #182125;
+        border-radius: 0.5rem;
+        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
+        color: #eaffeb;
+        position: absolute;
+        translate: 0 -3.5rem;
+        border: 2px solid #eaffeb;
+    }
+
+    .reportType {
+        width: 100%;
+        height: 100%;
+        padding: 0.5rem;
+        border-radius: 0.5rem;
+        border: 2px solid #eaffeb;
+        background: none;
+        color: #eaffeb;
+        font-size: 0.9rem;
+        text-align: left;
+    }
+
+    .reportType option {
+        background-color: #2e4653;
+        color: #eaffeb;
+    }
+
+    .submit {
+        width: 100%;
+        padding: 0.5rem;
+        border-radius: 0.5rem;
+        border: none;
+        background-color: #49bd85;
+        color: #ffffff;
+        font-size: 1rem;
+        cursor: pointer;
+    }
+
+    .exit {
+        position: absolute;
+        top: 0.1rem;
+        right: 0.1rem;
+        background: none;
+        border: none;
+        cursor: pointer;
+    }
+</style>
diff --git a/src/lib/database.d.ts b/src/lib/database.d.ts
index 3a3aedd..ed24360 100644
--- a/src/lib/database.d.ts
+++ b/src/lib/database.d.ts
@@ -34,6 +34,41 @@ export type Database = {
   }
   public: {
     Tables: {
+      reports: {
+        Row: {
+          content: string | null
+          created_at: string | null
+          id: string
+          study_space_id: string | null
+          type: string
+          updated_at: string | null
+        }
+        Insert: {
+          content?: string | null
+          created_at?: string | null
+          id?: string
+          study_space_id?: string | null
+          type: string
+          updated_at?: string | null
+        }
+        Update: {
+          content?: string | null
+          created_at?: string | null
+          id?: string
+          study_space_id?: string | null
+          type?: string
+          updated_at?: string | null
+        }
+        Relationships: [
+          {
+            foreignKeyName: "reports_study_space_id_fkey"
+            columns: ["study_space_id"]
+            isOneToOne: false
+            referencedRelation: "study_spaces"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
       study_space_images: {
         Row: {
           created_at: string | null
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 2e36564..b8a5385 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -24,3 +24,9 @@ export const availableStudySpaceTags = [
 export const volumeTags = ["Silent", "Quiet", "Some Noise", "Loud"];
 export const wifiTags = ["Good WiFi", "Moderate WiFi", "Bad WiFi", "No WiFi"];
 export const powerOutletTags = ["Many Outlets", "Some Outlets", "No Outlets"];
+export const reportTypes = [
+    "Inappropriate content",
+    "Duplicate content",
+    "Incorrect content",
+    "Other"
+];
diff --git a/src/routes/space/[id]/+page.svelte b/src/routes/space/[id]/+page.svelte
index cf793a5..f062312 100644
--- a/src/routes/space/[id]/+page.svelte
+++ b/src/routes/space/[id]/+page.svelte
@@ -4,6 +4,7 @@
     import placeholder from "$lib/assets/study_space.png";
     import Carousel from "$lib/components/Carousel.svelte";
     import CompulsoryTags from "$lib/components/CompulsoryTags.svelte";
+    import Report from "$lib/components/Report.svelte";
 
     const { data } = $props();
     const { space, supabase } = $derived(data);
@@ -17,6 +18,11 @@
                           .publicUrl
               )
     );
+
+    let isReportVisible = $state(false);
+    function hideFunc() {
+        isReportVisible = false;
+    }
 </script>
 
 <Navbar>
@@ -25,6 +31,8 @@
     </a>
 </Navbar>
 
+{#if isReportVisible}<Report {data} studySpaceId={space.id} {hideFunc} />
+{/if}
 <main>
     <Carousel urls={imgUrls} />
     <div class="nameContainer">
@@ -51,6 +59,14 @@
     <p class="addrContainer">
         {space.building_location}
     </p>
+
+    <button
+        type="button"
+        class="reportButton"
+        onclick={() => {
+            isReportVisible = true;
+        }}>Report</button
+    >
 </main>
 
 <style>
@@ -141,4 +157,15 @@
         font-size: 1.3rem;
         padding-bottom: 0;
     }
+    .reportButton {
+        width: 100%;
+        padding: 0.4rem;
+        border-radius: 0.5rem;
+        border: none;
+        background-color: #bd4949;
+        color: #ffffff;
+        font-size: 1rem;
+        cursor: pointer;
+        margin-top: 1rem;
+    }
 </style>
diff --git a/supabase/migrations/20250609142130_add-compulsory-tags.sql b/supabase/migrations/20250609142130_add-compulsory-tags.sql
index 5355520..485144c 100644
--- a/supabase/migrations/20250609142130_add-compulsory-tags.sql
+++ b/supabase/migrations/20250609142130_add-compulsory-tags.sql
@@ -2,9 +2,9 @@ alter table "public"."study_spaces" add column "power" text;
 alter table "public"."study_spaces" add column "volume" text;
 alter table "public"."study_spaces" add column "wifi" text;
 
-update "public"."study_spaces" set "power" = 'Many' where "power" is null;
+update "public"."study_spaces" set "power" = 'Many Outlets' where "power" is null;
 update "public"."study_spaces" set "volume" = 'Quiet' where "volume" is null;
-update "public"."study_spaces" set "wifi" = 'Good' where "wifi" is null;
+update "public"."study_spaces" set "wifi" = 'Good WiFi' where "wifi" is null;
 
 alter table "public"."study_spaces" alter column "power" set not null;
 alter table "public"."study_spaces" alter column "volume" set not null;
diff --git a/supabase/migrations/20250610163930_add_report_table.sql b/supabase/migrations/20250610163930_add_report_table.sql
new file mode 100644
index 0000000..0ac16d0
--- /dev/null
+++ b/supabase/migrations/20250610163930_add_report_table.sql
@@ -0,0 +1,12 @@
+CREATE TABLE reports (
+    id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+    study_space_id uuid REFERENCES study_spaces(id) ON DELETE CASCADE,
+    created_at timestamp with time zone DEFAULT now(),
+    updated_at timestamp with time zone DEFAULT now(),
+    type text NOT NULL,
+    content text
+);
+
+CREATE TRIGGER reports_updated_at
+AFTER UPDATE ON reports
+FOR EACH ROW EXECUTE FUNCTION handle_updated_at();
diff --git a/supabase/schemas/0001_study_spaces.sql b/supabase/schemas/0001_study_spaces.sql
index 9d97101..5269ceb 100644
--- a/supabase/schemas/0001_study_spaces.sql
+++ b/supabase/schemas/0001_study_spaces.sql
@@ -28,6 +28,14 @@ CREATE TABLE study_space_images (
     PRIMARY KEY (study_space_id, image_path)
 );
 
+CREATE TABLE reports (
+    id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+    study_space_id uuid REFERENCES study_spaces(id) ON DELETE CASCADE,
+    created_at timestamp with time zone DEFAULT now(),
+    updated_at timestamp with time zone DEFAULT now(),
+    type text NOT NULL,
+    content text
+);
 
 -- Triggers
 CREATE TRIGGER study_spaces_updated_at
@@ -37,3 +45,7 @@ FOR EACH ROW EXECUTE FUNCTION handle_updated_at();
 CREATE TRIGGER study_space_images_updated_at
 AFTER UPDATE ON study_space_images
 FOR EACH ROW EXECUTE FUNCTION handle_updated_at();
+
+CREATE TRIGGER reports_updated_at
+AFTER UPDATE ON reports
+FOR EACH ROW EXECUTE FUNCTION handle_updated_at();

From 4d8cffc72605c4c4c88aef366cf900d6a785b725 Mon Sep 17 00:00:00 2001
From: Barf-Vader <47476490+Barf-Vader@users.noreply.github.com>
Date: Tue, 10 Jun 2025 18:30:09 +0100
Subject: [PATCH 2/9] fix: cant submit report while uploading

---
 src/lib/components/Report.svelte | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/Report.svelte b/src/lib/components/Report.svelte
index 38e3ced..a2cf295 100644
--- a/src/lib/components/Report.svelte
+++ b/src/lib/components/Report.svelte
@@ -15,7 +15,7 @@
     });
 
     async function uploadReport() {
-        const { data: studySpaceInsert, error: reportUploadError } = await supabase
+        const { error: reportUploadError } = await supabase
             .from("reports")
             .insert(reportData)
             .select()
@@ -53,8 +53,9 @@
             rows={2}
             bind:value={reportData.content}
         />
-        <button disabled={!reportData.type || reportData.content?.length === 0} class="submit"
-            >Submit</button
+        <button
+            disabled={!reportData.type || reportData.content?.length === 0 || uploading}
+            class="submit">Submit</button
         >
         <button type="button" class="exit" aria-label="exit" onclick={hideFunc}
             ><img src={crossUrl} alt="exit" /></button

From 2b73fe13bded68d5590e87d69489b828551ec4d2 Mon Sep 17 00:00:00 2001
From: Gleb Koval <gleb@koval.net>
Date: Tue, 10 Jun 2025 23:44:21 +0100
Subject: [PATCH 3/9] feat: setup posthog for metrics (might or might not be
 useful)

---
 package-lock.json         | 60 ++++++++++++++++++++++++++++++++++++++-
 package.json              |  3 +-
 src/routes/+layout.svelte |  9 ++++++
 3 files changed, 70 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a224f91..cf3c27b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
             "version": "0.0.1",
             "dependencies": {
                 "@supabase/ssr": "^0.6.1",
-                "@supabase/supabase-js": "^2.49.8"
+                "@supabase/supabase-js": "^2.49.8",
+                "posthog-js": "^1.250.1"
             },
             "devDependencies": {
                 "@eslint/compat": "^1.2.5",
@@ -2451,6 +2452,17 @@
                 "node": ">= 0.6"
             }
         },
+        "node_modules/core-js": {
+            "version": "3.43.0",
+            "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.43.0.tgz",
+            "integrity": "sha512-N6wEbTTZSYOY2rYAn85CuvWWkCK6QweMn7/4Nr3w+gDBeBhk/x4EJeY6FPo4QzDoJZxVTv8U7CMvgWk6pOHHqA==",
+            "hasInstallScript": true,
+            "license": "MIT",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/core-js"
+            }
+        },
         "node_modules/cross-spawn": {
             "version": "7.0.6",
             "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3030,6 +3042,12 @@
                 "node": "^12.20 || >= 14.13"
             }
         },
+        "node_modules/fflate": {
+            "version": "0.4.8",
+            "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
+            "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==",
+            "license": "MIT"
+        },
         "node_modules/file-entry-cache": {
             "version": "8.0.0",
             "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -4090,6 +4108,40 @@
                 "node": ">=4"
             }
         },
+        "node_modules/posthog-js": {
+            "version": "1.250.1",
+            "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.250.1.tgz",
+            "integrity": "sha512-Dl9BQjPa5FFVUauLSX/8HP6naRfU605GQYq+oAHFqwyv20NQDCHT0uRtFT1x2EYrY0kIQdd0d/rOY6Tg4wgqEg==",
+            "license": "SEE LICENSE IN LICENSE",
+            "dependencies": {
+                "core-js": "^3.38.1",
+                "fflate": "^0.4.8",
+                "preact": "^10.19.3",
+                "web-vitals": "^4.2.4"
+            },
+            "peerDependencies": {
+                "@rrweb/types": "2.0.0-alpha.17",
+                "rrweb-snapshot": "2.0.0-alpha.17"
+            },
+            "peerDependenciesMeta": {
+                "@rrweb/types": {
+                    "optional": true
+                },
+                "rrweb-snapshot": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/preact": {
+            "version": "10.26.8",
+            "resolved": "https://registry.npmjs.org/preact/-/preact-10.26.8.tgz",
+            "integrity": "sha512-1nMfdFjucm5hKvq0IClqZwK4FJkGXhRrQstOQ3P4vp8HxKrJEMFcY6RdBRVTdfQS/UlnX6gfbPuTvaqx/bDoeQ==",
+            "license": "MIT",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/preact"
+            }
+        },
         "node_modules/prelude-ls": {
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -5117,6 +5169,12 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/web-vitals": {
+            "version": "4.2.4",
+            "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.4.tgz",
+            "integrity": "sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==",
+            "license": "Apache-2.0"
+        },
         "node_modules/webidl-conversions": {
             "version": "7.0.0",
             "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
diff --git a/package.json b/package.json
index 74b26fa..bff1980 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     },
     "dependencies": {
         "@supabase/ssr": "^0.6.1",
-        "@supabase/supabase-js": "^2.49.8"
+        "@supabase/supabase-js": "^2.49.8",
+        "posthog-js": "^1.250.1"
     }
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index dee0137..289e977 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,7 +1,16 @@
 <script lang="ts">
+    import posthog from "posthog-js";
     import logoUrl from "$lib/assets/logo.svg";
+    import { onMount } from "svelte";
 
     const { children } = $props();
+
+    onMount(() => {
+        posthog.init("phc_hTnel2Q8GKo0TgIBnFWBueJW1ATmCG9tJOtETnQTUdY", {
+            api_host: "https://eu.i.posthog.com",
+            person_profiles: "always"
+        });
+    });
 </script>
 
 <svelte:head>

From bdda39c7fe68c5cabcf2d3abd2a20271d9280dec Mon Sep 17 00:00:00 2001
From: Barf-Vader <47476490+Barf-Vader@users.noreply.github.com>
Date: Wed, 11 Jun 2025 00:03:29 +0100
Subject: [PATCH 4/9] refactor: added typing for props, fixed overflow

---
 src/lib/components/CompulsoryTags.svelte |  6 +++---
 src/lib/components/Report.svelte         | 10 +++++++++-
 src/lib/components/SpaceCard.svelte      |  4 ++--
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/CompulsoryTags.svelte b/src/lib/components/CompulsoryTags.svelte
index e6a1228..ba5a23b 100644
--- a/src/lib/components/CompulsoryTags.svelte
+++ b/src/lib/components/CompulsoryTags.svelte
@@ -33,7 +33,7 @@
         background-color: #eaffeb;
         color: #2e4653;
         cursor: pointer;
-        padding: 0.2rem 0.6rem;
+        padding: 0.2rem 0.2rem;
     }
     .compulsoryTagYellow {
         display: flex;
@@ -45,7 +45,7 @@
         background-color: #ffffd4;
         color: #534b2e;
         cursor: pointer;
-        padding: 0.2rem 0.6rem;
+        padding: 0.2rem 0.2rem;
     }
     .compulsoryTagRed {
         display: flex;
@@ -57,6 +57,6 @@
         background-color: #ffcece;
         color: #532e2e;
         cursor: pointer;
-        padding: 0.2rem 0.6rem;
+        padding: 0.2rem 0.2rem;
     }
 </style>
diff --git a/src/lib/components/Report.svelte b/src/lib/components/Report.svelte
index a2cf295..ff2b498 100644
--- a/src/lib/components/Report.svelte
+++ b/src/lib/components/Report.svelte
@@ -3,8 +3,16 @@
     import crossUrl from "$lib/assets/cross.svg";
     import Textarea from "./inputs/Textarea.svelte";
     import type { Table } from "$lib";
+    import type { SupabaseClient } from "@supabase/supabase-js";
+    import type { Database } from "$lib/database.d.ts";
 
-    const { data, studySpaceId, hideFunc } = $props();
+    interface Props {
+        data: { supabase: SupabaseClient<Database> };
+        studySpaceId: string;
+        hideFunc: () => void;
+    }
+
+    const { data, studySpaceId, hideFunc }: Props = $props();
     const { supabase } = $derived(data);
 
     let uploading = $state(false);
diff --git a/src/lib/components/SpaceCard.svelte b/src/lib/components/SpaceCard.svelte
index e845299..3f09963 100644
--- a/src/lib/components/SpaceCard.svelte
+++ b/src/lib/components/SpaceCard.svelte
@@ -78,7 +78,7 @@
     .compulsoryContainer {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
-        gap: 0.5rem;
-        font-size: 0.875rem;
+        gap: 0.4rem;
+        font-size: 0.8rem;
     }
 </style>

From bd7f9bc9912367b4cb3ffdab50d6b671a8417a55 Mon Sep 17 00:00:00 2001
From: Gleb Koval <gleb@koval.net>
Date: Tue, 10 Jun 2025 19:00:22 +0100
Subject: [PATCH 5/9] feat: google maps

---
 .env.example                                  |  3 +-
 package-lock.json                             | 23 ++++++++++
 package.json                                  |  3 ++
 src/lib/components/inputs/Text.svelte         |  5 ++-
 src/lib/database.d.ts                         |  9 ++--
 src/lib/index.ts                              | 10 +++++
 src/routes/space/+page.svelte                 | 42 ++++++++++++++++---
 src/routes/space/[id]/+page.svelte            | 35 +++++++++++++++-
 .../20250609145614_gmaps_location.sql         |  3 ++
 supabase/schemas/0001_study_spaces.sql        |  4 +-
 10 files changed, 123 insertions(+), 14 deletions(-)
 create mode 100644 supabase/migrations/20250609145614_gmaps_location.sql

diff --git a/.env.example b/.env.example
index d84d274..efae49e 100644
--- a/.env.example
+++ b/.env.example
@@ -1,2 +1,3 @@
 PUBLIC_SUPABASE_URL=http://127.0.0.1:54321
-PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here
\ No newline at end of file
+PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here
+PUBLIC_GMAPS_API_KEY=your-google-maps-api-key-here
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index cf3c27b..6da5e80 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
             "name": "drp-48",
             "version": "0.0.1",
             "dependencies": {
+                "@googlemaps/js-api-loader": "^1.16.8",
                 "@supabase/ssr": "^0.6.1",
                 "@supabase/supabase-js": "^2.49.8",
                 "posthog-js": "^1.250.1"
@@ -15,12 +16,14 @@
             "devDependencies": {
                 "@eslint/compat": "^1.2.5",
                 "@eslint/js": "^9.18.0",
+                "@googlemaps/typescript-guards": "^2.0.3",
                 "@playwright/test": "^1.49.1",
                 "@sveltejs/adapter-node": "^5.2.12",
                 "@sveltejs/kit": "^2.16.0",
                 "@sveltejs/vite-plugin-svelte": "^5.0.0",
                 "@testing-library/jest-dom": "^6.6.3",
                 "@testing-library/svelte": "^5.2.4",
+                "@types/google.maps": "^3.58.1",
                 "eslint": "^9.18.0",
                 "eslint-config-prettier": "^10.0.1",
                 "eslint-plugin-svelte": "^3.0.0",
@@ -819,6 +822,19 @@
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             }
         },
+        "node_modules/@googlemaps/js-api-loader": {
+            "version": "1.16.8",
+            "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.8.tgz",
+            "integrity": "sha512-CROqqwfKotdO6EBjZO/gQGVTbeDps5V7Mt9+8+5Q+jTg5CRMi3Ii/L9PmV3USROrt2uWxtGzJHORmByxyo9pSQ==",
+            "license": "Apache-2.0"
+        },
+        "node_modules/@googlemaps/typescript-guards": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/@googlemaps/typescript-guards/-/typescript-guards-2.0.3.tgz",
+            "integrity": "sha512-3iHuO8H0jPehftsMK0kgyJzPYU/g/oiTRw+wu/yltqSZ7wJPt3vfsJHkPiuRpQjbnnWygX+T3mkRGyK/eyZ/lw==",
+            "dev": true,
+            "license": "Apache-2.0"
+        },
         "node_modules/@humanfs/core": {
             "version": "0.19.1",
             "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1725,6 +1741,13 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/@types/google.maps": {
+            "version": "3.58.1",
+            "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.58.1.tgz",
+            "integrity": "sha512-X9QTSvGJ0nCfMzYOnaVs/k6/4L+7F5uCS+4iUmkLEls6J9S/Phv+m/i3mDeyc49ZBgwab3EFO1HEoBY7k98EGQ==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/@types/json-schema": {
             "version": "7.0.15",
             "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
diff --git a/package.json b/package.json
index bff1980..3513623 100644
--- a/package.json
+++ b/package.json
@@ -20,12 +20,14 @@
     "devDependencies": {
         "@eslint/compat": "^1.2.5",
         "@eslint/js": "^9.18.0",
+        "@googlemaps/typescript-guards": "^2.0.3",
         "@playwright/test": "^1.49.1",
         "@sveltejs/adapter-node": "^5.2.12",
         "@sveltejs/kit": "^2.16.0",
         "@sveltejs/vite-plugin-svelte": "^5.0.0",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/svelte": "^5.2.4",
+        "@types/google.maps": "^3.58.1",
         "eslint": "^9.18.0",
         "eslint-config-prettier": "^10.0.1",
         "eslint-plugin-svelte": "^3.0.0",
@@ -42,6 +44,7 @@
         "vitest": "^3.0.0"
     },
     "dependencies": {
+        "@googlemaps/js-api-loader": "^1.16.8",
         "@supabase/ssr": "^0.6.1",
         "@supabase/supabase-js": "^2.49.8",
         "posthog-js": "^1.250.1"
diff --git a/src/lib/components/inputs/Text.svelte b/src/lib/components/inputs/Text.svelte
index 8488479..cb9b9bc 100644
--- a/src/lib/components/inputs/Text.svelte
+++ b/src/lib/components/inputs/Text.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
     interface Props {
+        inputElem?: HTMLInputElement;
         name: string;
         value?: string | null;
         placeholder?: string;
         required?: boolean;
     }
 
-    let { value = $bindable(), name, ...rest }: Props = $props();
+    let { inputElem = $bindable(), value = $bindable(), name, ...rest }: Props = $props();
 </script>
 
-<input type="text" id={name} {name} bind:value {...rest} />
+<input type="text" id={name} {name} bind:value bind:this={inputElem} {...rest} />
 
 <style>
     input {
diff --git a/src/lib/database.d.ts b/src/lib/database.d.ts
index ed24360..cb19ff3 100644
--- a/src/lib/database.d.ts
+++ b/src/lib/database.d.ts
@@ -100,7 +100,8 @@ export type Database = {
       }
       study_spaces: {
         Row: {
-          building_location: string | null
+          building_location: Json | null
+          building_location_old: string | null
           created_at: string | null
           description: string | null
           id: string
@@ -112,7 +113,8 @@ export type Database = {
           wifi: string
         }
         Insert: {
-          building_location?: string | null
+          building_location?: Json | null
+          building_location_old?: string | null
           created_at?: string | null
           description?: string | null
           id?: string
@@ -124,7 +126,8 @@ export type Database = {
           wifi: string
         }
         Update: {
-          building_location?: string | null
+          building_location?: Json | null
+          building_location_old?: string | null
           created_at?: string | null
           description?: string | null
           id?: string
diff --git a/src/lib/index.ts b/src/lib/index.ts
index b8a5385..6d1ccc9 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,3 +1,4 @@
+import { PUBLIC_GMAPS_API_KEY } from "$env/static/public";
 import type { Database } from "./database.d.ts";
 
 export type Table<T extends keyof Database["public"]["Tables"]> =
@@ -30,3 +31,12 @@ export const reportTypes = [
     "Incorrect content",
     "Other"
 ];
+
+export async function gmapsLoader() {
+    const { Loader } = await import("@googlemaps/js-api-loader");
+    return new Loader({
+        apiKey: PUBLIC_GMAPS_API_KEY,
+        version: "weekly",
+        libraries: ["places"]
+    });
+}
diff --git a/src/routes/space/+page.svelte b/src/routes/space/+page.svelte
index 75766a6..27f89aa 100644
--- a/src/routes/space/+page.svelte
+++ b/src/routes/space/+page.svelte
@@ -7,15 +7,30 @@
     import Button from "$lib/components/Button.svelte";
     import Images from "$lib/components/inputs/Images.svelte";
     import type { Table } from "$lib";
-    import { availableStudySpaceTags, wifiTags, powerOutletTags, volumeTags } from "$lib";
+    import {
+        availableStudySpaceTags,
+        wifiTags,
+        powerOutletTags,
+        volumeTags,
+        gmapsLoader
+    } from "$lib";
+    import { onMount } from "svelte";
+    import type { Json } from "$lib/database.js";
     const { data } = $props();
     const { supabase } = $derived(data);
 
     let spaceImgs = $state<FileList>();
     let uploading = $state(false);
-    let studySpaceData = $state<Omit<Table<"study_spaces">, "id" | "created_at" | "updated_at">>({
+    let studySpaceData = $state<
+        Omit<
+            Table<"study_spaces">,
+            "id" | "created_at" | "updated_at" | "building_location_old" | "building_location"
+        > & {
+            building_location?: google.maps.places.PlaceResult;
+        }
+    >({
         description: "",
-        building_location: "",
+        building_location: undefined,
         location: "",
         tags: [],
         volume: "",
@@ -25,10 +40,14 @@
 
     async function uploadStudySpace() {
         if (!spaceImgs || spaceImgs.length < 1) return alert("Please select an image file.");
+        if (!studySpaceData.building_location) return alert("Please select a building location.");
 
         const { data: studySpaceInsert, error: studySpaceError } = await supabase
             .from("study_spaces")
-            .insert(studySpaceData)
+            .insert({
+                ...studySpaceData,
+                building_location: studySpaceData.building_location as Json
+            })
             .select()
             .single();
         if (studySpaceError)
@@ -92,6 +111,19 @@
             tagFilter = "";
         };
     }
+
+    let addressInput = $state<HTMLInputElement>();
+    onMount(async () => {
+        const loader = await gmapsLoader();
+        const places = await loader.importLibrary("places");
+        if (!addressInput) return console.error("Address input element not found");
+        const placeAutocomplete = new places.Autocomplete(addressInput, {
+            componentRestrictions: { country: "gb" }
+        });
+        placeAutocomplete.addListener("place_changed", () => {
+            studySpaceData.building_location = placeAutocomplete.getPlace();
+        });
+    });
 </script>
 
 <Navbar>
@@ -211,7 +243,7 @@
     <label for="building-location">Add the building location:</label>
     <Text
         name="building-location"
-        bind:value={studySpaceData.building_location}
+        bind:inputElem={addressInput}
         placeholder="Huxley Building, Imperial South Kensington Campus"
         required
     />
diff --git a/src/routes/space/[id]/+page.svelte b/src/routes/space/[id]/+page.svelte
index f062312..6b5db3e 100644
--- a/src/routes/space/[id]/+page.svelte
+++ b/src/routes/space/[id]/+page.svelte
@@ -5,10 +5,13 @@
     import Carousel from "$lib/components/Carousel.svelte";
     import CompulsoryTags from "$lib/components/CompulsoryTags.svelte";
     import Report from "$lib/components/Report.svelte";
+    import { onMount } from "svelte";
+    import { gmapsLoader } from "$lib";
 
     const { data } = $props();
     const { space, supabase } = $derived(data);
 
+    const place = $derived(space.building_location as google.maps.places.PlaceResult);
     const imgUrls = $derived(
         space.study_space_images.length === 0
             ? [placeholder]
@@ -23,6 +26,23 @@
     function hideFunc() {
         isReportVisible = false;
     }
+
+    let mapElem = $state<HTMLDivElement>();
+    onMount(async () => {
+        if (!mapElem) return console.error("Map element not found");
+        const loader = await gmapsLoader();
+        const { Map } = await loader.importLibrary("maps");
+        const { AdvancedMarkerElement } = await loader.importLibrary("marker");
+        const map = new Map(mapElem, {
+            center: place.geometry?.location,
+            zoom: 15,
+            mapId: "9f4993cd3fb1504d495821a5"
+        });
+        const marker = new AdvancedMarkerElement({
+            position: place.geometry?.location,
+            map
+        });
+    });
 </script>
 
 <Navbar>
@@ -57,8 +77,14 @@
     <hr />
     <div class="subtitle">Where it is:</div>
     <p class="addrContainer">
-        {space.building_location}
+        {#if place.name}
+            {place.name} <br />
+        {/if}
+        {#each place.formatted_address?.split(",") || [] as line (line)}
+            {line.trim()} <br />
+        {/each}
     </p>
+    <div class="addrMap" bind:this={mapElem}></div>
 
     <button
         type="button"
@@ -126,7 +152,7 @@
 
     .addrContainer {
         font-size: 1.2rem;
-        padding: 0rem 1.4rem;
+        padding: 0rem 1.4rem 1rem;
     }
 
     .tagContainer {
@@ -157,6 +183,11 @@
         font-size: 1.3rem;
         padding-bottom: 0;
     }
+
+    .addrMap {
+        width: 100%;
+        aspect-ratio: 1 / 1;
+    }
     .reportButton {
         width: 100%;
         padding: 0.4rem;
diff --git a/supabase/migrations/20250609145614_gmaps_location.sql b/supabase/migrations/20250609145614_gmaps_location.sql
new file mode 100644
index 0000000..a7d1a43
--- /dev/null
+++ b/supabase/migrations/20250609145614_gmaps_location.sql
@@ -0,0 +1,3 @@
+-- rename old colum nto building_location_old and create a new column instead of altering
+alter table "public"."study_spaces" rename column "building_location" to "building_location_old";
+alter table "public"."study_spaces" add column "building_location" jsonb;
\ No newline at end of file
diff --git a/supabase/schemas/0001_study_spaces.sql b/supabase/schemas/0001_study_spaces.sql
index 5269ceb..134ff96 100644
--- a/supabase/schemas/0001_study_spaces.sql
+++ b/supabase/schemas/0001_study_spaces.sql
@@ -11,7 +11,9 @@ CREATE TABLE study_spaces (
     description text,
     -- Location within building, e.g., "Room 101"
     location text,
-    building_location text,
+    -- Not bothered to write a proper data migration
+    building_location_old text,
+    building_location jsonb,
     tags text[] NOT NULL DEFAULT array[]::text[],
     volume text NOT NULL,
     wifi text NOT NULL,

From f7969432ec97785dcb51aba1e8f531456ce8f69c Mon Sep 17 00:00:00 2001
From: Gleb Koval <gleb@koval.net>
Date: Tue, 10 Jun 2025 19:04:57 +0100
Subject: [PATCH 6/9] fix(lint): remove unused marker

---
 src/routes/space/[id]/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/space/[id]/+page.svelte b/src/routes/space/[id]/+page.svelte
index 6b5db3e..be36c1b 100644
--- a/src/routes/space/[id]/+page.svelte
+++ b/src/routes/space/[id]/+page.svelte
@@ -38,7 +38,7 @@
             zoom: 15,
             mapId: "9f4993cd3fb1504d495821a5"
         });
-        const marker = new AdvancedMarkerElement({
+        new AdvancedMarkerElement({
             position: place.geometry?.location,
             map
         });

From af08bc663b2eeb9e210419d256a62e1b936fbde8 Mon Sep 17 00:00:00 2001
From: Gleb Koval <gleb@koval.net>
Date: Tue, 10 Jun 2025 19:06:23 +0100
Subject: [PATCH 7/9] feat: add gmaps api key to CI

---
 .gitlab-ci.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index d9978e4..226ba79 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -21,6 +21,7 @@ check_types:
   variables:
     PUBLIC_SUPABASE_URL: $SUPABASE_URL
     PUBLIC_SUPABASE_ANON_KEY: $SUPABASE_ANON_KEY
+    PUBLIC_GMAPS_API_KEY: $GMAPS_API_KEY
   script:
     - npm run check
 
@@ -72,6 +73,7 @@ build:
   variables:
     PUBLIC_SUPABASE_URL: $SUPABASE_URL
     PUBLIC_SUPABASE_ANON_KEY: $SUPABASE_ANON_KEY
+    PUBLIC_GMAPS_API_KEY: $GMAPS_API_KEY
   script:
     - npm run build
   artifacts:

From 4ced9347bb42dd47148bc24b9a57e242cf8e95e8 Mon Sep 17 00:00:00 2001
From: Barf-Vader <47476490+Barf-Vader@users.noreply.github.com>
Date: Wed, 11 Jun 2025 00:56:56 +0100
Subject: [PATCH 8/9] fix: actually fixed overwlow in SpaceCard

---
 src/lib/components/SpaceCard.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/SpaceCard.svelte b/src/lib/components/SpaceCard.svelte
index 3f09963..0c1bf04 100644
--- a/src/lib/components/SpaceCard.svelte
+++ b/src/lib/components/SpaceCard.svelte
@@ -77,8 +77,8 @@
 
     .compulsoryContainer {
         display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: 0.4rem;
+        grid-template-columns: repeat(auto-fit, minmax(3.75rem, 1fr));
+        gap: 0.3rem;
         font-size: 0.8rem;
     }
 </style>

From be921610f6e809e81ad69efa0cff0d98ae9cd60a Mon Sep 17 00:00:00 2001
From: Barf-Vader <47476490+Barf-Vader@users.noreply.github.com>
Date: Wed, 11 Jun 2025 01:06:39 +0100
Subject: [PATCH 9/9] fix: overflow in report and space page

---
 src/lib/components/Report.svelte   | 5 ++++-
 src/routes/space/[id]/+page.svelte | 2 ++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/Report.svelte b/src/lib/components/Report.svelte
index ff2b498..6322b9b 100644
--- a/src/lib/components/Report.svelte
+++ b/src/lib/components/Report.svelte
@@ -46,7 +46,7 @@
         }}
         class="reportContainer"
     >
-        <h1>Submit a Report</h1>
+        <h1 class="submitHeader">Submit a Report</h1>
         <p>What's the reason?</p>
         <select name="reportType" class="reportType" required bind:value={reportData.type}>
             <option value="" disabled selected>Report type</option>
@@ -98,6 +98,9 @@
         border: 2px solid #eaffeb;
     }
 
+    .submitHeader {
+        width: 80%;
+    }
     .reportType {
         width: 100%;
         height: 100%;
diff --git a/src/routes/space/[id]/+page.svelte b/src/routes/space/[id]/+page.svelte
index be36c1b..819c5bb 100644
--- a/src/routes/space/[id]/+page.svelte
+++ b/src/routes/space/[id]/+page.svelte
@@ -187,6 +187,8 @@
     .addrMap {
         width: 100%;
         aspect-ratio: 1 / 1;
+        border-radius: 0.5rem;
+        border: 2px solid #eaffeb;
     }
     .reportButton {
         width: 100%;