-
-
- To get started, edit the page.tsx file.
-- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -
-Loading...
;
+
+ return (
+ <>
+
+
+
+ );
+}
diff --git a/src/app/api/admin/locations/[id]/route.ts b/src/app/api/admin/locations/[id]/route.ts
new file mode 100644
index 0000000..548eb3d
--- /dev/null
+++ b/src/app/api/admin/locations/[id]/route.ts
@@ -0,0 +1,72 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/lib/prisma";
+import { requireAdmin } from "@/lib/auth";
+import { parseLocationBody } from "@/lib/validation";
+
+export const dynamic = "force-dynamic";
+
+export async function PUT(
+ request: Request,
+ { params }: { params: Promise<{ id: string }> }
+) {
+ const auth = await requireAdmin();
+ if (!auth.authorized) return auth.response;
+
+ try {
+ const { id } = await params;
+ const body = await request.json();
+ const parsed = parseLocationBody(body);
+
+ if (!parsed.success) {
+ return NextResponse.json(
+ { error: parsed.error.issues[0]?.message ?? "Invalid input" },
+ { status: 400 }
+ );
+ }
+
+ const data = parsed.data;
+ const location = await prisma.location.update({
+ where: { id },
+ data: {
+ title: data.title,
+ city: data.city,
+ gpxData: data.gpxData ?? null,
+ tags: data.tags,
+ captureDate: new Date(data.captureDate),
+ visibility: data.visibility,
+ },
+ });
+
+ return NextResponse.json(location);
+ } catch (error) {
+ console.error("Error updating location:", error);
+ return NextResponse.json(
+ { error: "Failed to update location" },
+ { status: 500 }
+ );
+ }
+}
+
+export async function DELETE(
+ _request: Request,
+ { params }: { params: Promise<{ id: string }> }
+) {
+ const auth = await requireAdmin();
+ if (!auth.authorized) return auth.response;
+
+ try {
+ const { id } = await params;
+
+ await prisma.location.delete({
+ where: { id },
+ });
+
+ return NextResponse.json({ success: true });
+ } catch (error) {
+ console.error("Error deleting location:", error);
+ return NextResponse.json(
+ { error: "Failed to delete location" },
+ { status: 500 }
+ );
+ }
+}
diff --git a/src/app/api/admin/locations/route.ts b/src/app/api/admin/locations/route.ts
new file mode 100644
index 0000000..e986fe7
--- /dev/null
+++ b/src/app/api/admin/locations/route.ts
@@ -0,0 +1,64 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/lib/prisma";
+import { requireAdmin } from "@/lib/auth";
+import { parseLocationBody } from "@/lib/validation";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+ const auth = await requireAdmin();
+ if (!auth.authorized) return auth.response;
+
+ try {
+ const locations = await prisma.location.findMany({
+ orderBy: {
+ createdAt: "desc",
+ },
+ });
+
+ return NextResponse.json(locations);
+ } catch (error) {
+ console.error("Error fetching all locations:", error);
+ return NextResponse.json(
+ { error: "Failed to fetch locations" },
+ { status: 500 }
+ );
+ }
+}
+
+export async function POST(request: Request) {
+ const auth = await requireAdmin();
+ if (!auth.authorized) return auth.response;
+
+ try {
+ const body = await request.json();
+ const parsed = parseLocationBody(body);
+
+ if (!parsed.success) {
+ return NextResponse.json(
+ { error: parsed.error.issues[0]?.message ?? "Invalid input" },
+ { status: 400 }
+ );
+ }
+
+ const data = parsed.data;
+ const location = await prisma.location.create({
+ data: {
+ title: data.title,
+ city: data.city,
+ gpxData: data.gpxData ?? null,
+ tags: data.tags,
+ captureDate: new Date(data.captureDate),
+ visibility: data.visibility,
+ },
+ });
+
+ return NextResponse.json(location);
+ } catch (error) {
+ console.error("Error creating location:", error);
+ return NextResponse.json(
+ { error: "Failed to create location" },
+ { status: 500 }
+ );
+ }
+}
diff --git a/src/app/api/auth/login/route.ts b/src/app/api/auth/login/route.ts
new file mode 100644
index 0000000..17f3ab2
--- /dev/null
+++ b/src/app/api/auth/login/route.ts
@@ -0,0 +1,64 @@
+import { NextResponse } from "next/server";
+import {
+ createSessionToken,
+ getSessionCookieOptions,
+} from "@/lib/session";
+import { safeCompare } from "@/lib/auth";
+import { checkRateLimit } from "@/lib/rate-limit";
+
+function getClientIp(request: Request): string {
+ const forwarded = request.headers.get("x-forwarded-for");
+ if (forwarded) return forwarded.split(",")[0].trim();
+ return request.headers.get("x-real-ip") ?? "unknown";
+}
+
+export async function POST(request: Request) {
+ try {
+ const ip = getClientIp(request);
+ if (!checkRateLimit(`login:${ip}`)) {
+ return NextResponse.json(
+ { error: "Too many login attempts. Try again later." },
+ { status: 429 }
+ );
+ }
+
+ const { username, password } = await request.json();
+ const correctPassword = process.env.ADMIN_PASSWORD;
+ const correctUsername = process.env.ADMIN_USERNAME;
+
+ if (!correctPassword || !correctUsername) {
+ console.error(
+ "ADMIN_PASSWORD and ADMIN_USERNAME environment variables must be set."
+ );
+ return NextResponse.json(
+ { error: "Server Configuration Error" },
+ { status: 500 }
+ );
+ }
+
+ if (
+ typeof username !== "string" ||
+ typeof password !== "string" ||
+ !safeCompare(username, correctUsername) ||
+ !safeCompare(password, correctPassword)
+ ) {
+ return NextResponse.json(
+ { error: "Invalid credentials." },
+ { status: 401 }
+ );
+ }
+
+ const token = await createSessionToken();
+ const response = NextResponse.json({ success: true });
+
+ response.cookies.set({
+ ...getSessionCookieOptions(),
+ value: token,
+ });
+
+ return response;
+ } catch (error) {
+ console.error("Login error:", error);
+ return NextResponse.json({ error: "Invalid request." }, { status: 400 });
+ }
+}
diff --git a/src/app/api/auth/logout/route.ts b/src/app/api/auth/logout/route.ts
new file mode 100644
index 0000000..a76a306
--- /dev/null
+++ b/src/app/api/auth/logout/route.ts
@@ -0,0 +1,14 @@
+import { NextResponse } from "next/server";
+import { getSessionCookieOptions, SESSION_COOKIE } from "@/lib/session";
+
+export async function POST() {
+ const response = NextResponse.json({ success: true });
+
+ response.cookies.set({
+ ...getSessionCookieOptions(0),
+ name: SESSION_COOKIE,
+ value: "",
+ });
+
+ return response;
+}
diff --git a/src/app/api/config/route.ts b/src/app/api/config/route.ts
new file mode 100644
index 0000000..b3b6a83
--- /dev/null
+++ b/src/app/api/config/route.ts
@@ -0,0 +1,9 @@
+import { NextResponse } from "next/server";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+ return NextResponse.json({
+ apiKey: process.env.GOOGLE_MAPS_API_KEY || "",
+ });
+}
diff --git a/src/app/api/locations/route.ts b/src/app/api/locations/route.ts
new file mode 100644
index 0000000..96b631f
--- /dev/null
+++ b/src/app/api/locations/route.ts
@@ -0,0 +1,22 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/lib/prisma";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+ try {
+ const locations = await prisma.location.findMany({
+ where: {
+ visibility: "public",
+ },
+ orderBy: {
+ createdAt: "desc",
+ },
+ });
+
+ return NextResponse.json(locations);
+ } catch (error) {
+ console.error("Error fetching public locations:", error);
+ return NextResponse.json({ error: "Failed to fetch locations" }, { status: 500 });
+ }
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index e3734be..1eaf6da 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,42 +1,130 @@
-:root {
- --background: #ffffff;
- --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --background: #0a0a0a;
- --foreground: #ededed;
- }
-}
-
-html,
body {
- max-width: 100vw;
- overflow-x: hidden;
-}
-
-body {
- color: var(--foreground);
- background: var(--background);
- font-family: Arial, Helvetica, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-* {
- box-sizing: border-box;
- padding: 0;
margin: 0;
+ padding: 0;
+ font-family: "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+ background-color: #202124;
+ color: #e8eaed;
}
-a {
- color: inherit;
- text-decoration: none;
+::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
}
-@media (prefers-color-scheme: dark) {
- html {
- color-scheme: dark;
+::-webkit-scrollbar-track {
+ background: #202124;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #5f6368;
+ border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: #80868b;
+}
+
+.gsv-navbar {
+ background-color: #202124;
+ border-bottom: 1px solid #3c4043;
+}
+
+.gsv-sidebar {
+ background-color: #202124;
+ border-right: 1px solid #3c4043;
+}
+
+.gsv-search-container {
+ border-bottom: 1px solid #3c4043;
+}
+
+.gsv-input {
+ background-color: #303134;
+ border: 1px solid #5f6368;
+ color: #e8eaed;
+}
+
+.gsv-input:focus {
+ background-color: #303134;
+ border-color: #8ab4f8;
+ color: #e8eaed;
+ box-shadow: 0 0 0 1px #8ab4f8;
+}
+
+.gsv-input::placeholder {
+ color: #9aa0a6;
+}
+
+select.gsv-input option {
+ background-color: #303134;
+ color: #e8eaed;
+}
+
+.gsv-card {
+ background-color: #303134;
+ border: 1px solid transparent;
+ color: #e8eaed;
+ transition: all 0.2s ease-in-out;
+ border-radius: 8px;
+}
+
+.gsv-card:hover {
+ background-color: #3c4043;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
+.gsv-card-active {
+ background-color: #42474b;
+ border: 1px solid #8ab4f8;
+}
+
+.gsv-title {
+ color: #e8eaed;
+ font-weight: 500;
+}
+
+.gsv-subtitle {
+ color: #9aa0a6;
+}
+
+.gsv-btn-share {
+ color: #8ab4f8;
+ border: 1px solid #5f6368;
+ background-color: transparent;
+ transition: all 0.2s ease-in-out;
+}
+
+.gsv-btn-share:hover {
+ background-color: rgba(138, 180, 248, 0.04);
+ color: #a8c7fa;
+ border-color: #8ab4f8;
+}
+
+.gsv-btn-maps {
+ background-color: #8ab4f8;
+ color: #202124;
+ font-weight: 500;
+ border: none;
+ transition: all 0.2s ease-in-out;
+}
+
+.gsv-btn-maps:hover {
+ background-color: #a8c7fa;
+ color: #202124;
+}
+
+.offcanvas-backdrop {
+ opacity: 0 !important;
+ background-color: transparent !important;
+}
+
+.gsv-search-wrapper {
+ max-width: 150px;
+}
+
+@media (min-width: 768px) {
+ .gsv-search-wrapper {
+ max-width: 400px;
}
-}
+}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 42fc323..31291f8 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,20 +1,11 @@
import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import "bootstrap/dist/css/bootstrap.min.css";
import "./globals.css";
-
-const geistSans = Geist({
- variable: "--font-geist-sans",
- subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
- variable: "--font-geist-mono",
- subsets: ["latin"],
-});
+import BootstrapClient from "@/components/BootstrapClient";
export const metadata: Metadata = {
- title: "Create Next App",
- description: "Generated by create next app",
+ title: "Street View Gallery",
+ description: "Public gallery of Google Street View panoramas",
};
export default function RootLayout({
@@ -23,9 +14,12 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
-
-
- {children}
+
+
+
+
+ Manage Locations (Projects)
+ + + Add New Project + +
+
+
+
+
+
+
+ | Title | +City | +GPX Route | +Visibility | +Actions | +
|---|---|---|---|---|
| {loc.title} | +{loc.city} | ++ {loc.gpxData ? ( + Has Route + ) : ( + No Route + )} + | ++ + {loc.visibility} + + | ++ + Edit + + + | +
| + No locations found. Start by adding one. + | +
+ {children}
+
+
+
+ );
+}
diff --git a/src/app/page.module.css b/src/app/page.module.css
index 59dea42..8f1b56e 100644
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -93,7 +93,6 @@ a.secondary {
border-color: var(--button-secondary-border);
}
-/* Enable hover only on non-touch devices */
@media (hover: hover) and (pointer: fine) {
a.primary:hover {
background: var(--button-primary-hover);
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7b947a2..044f44b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,66 +1,5 @@
-import Image from "next/image";
-import styles from "./page.module.css";
+import Gallery from "@/components/Gallery";
export default function Home() {
- return (
-
+
+
+
+ Admin Portal
+ Portfolio Management +
+
+
+
+
+
+
-
-
-
- );
+ return Loading...
;
+
+ return (
+
+ );
+}
diff --git a/src/components/BootstrapClient.tsx b/src/components/BootstrapClient.tsx
new file mode 100644
index 0000000..97cfaac
--- /dev/null
+++ b/src/components/BootstrapClient.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function BootstrapClient() {
+ useEffect(() => {
+ require("bootstrap/dist/js/bootstrap.bundle.min.js");
+ }, []);
+
+ return null;
+}
diff --git a/src/components/Gallery.tsx b/src/components/Gallery.tsx
new file mode 100644
index 0000000..45f3e3d
--- /dev/null
+++ b/src/components/Gallery.tsx
@@ -0,0 +1,545 @@
+"use client";
+
+import { useEffect, useState, useRef } from "react";
+import { importLibrary, setOptions } from "@googlemaps/js-api-loader";
+import { Location } from "@prisma/client";
+import { gpx } from "@tmcw/togeojson";
+
+export default function Gallery() {
+ const [locations, setLocations] = useState
+
+
+ ();
+
+const MAX_ENTRIES = 10_000;
+
+function pruneExpired(now: number) {
+ if (attempts.size <= MAX_ENTRIES) return;
+ for (const [key, entry] of attempts) {
+ if (now > entry.resetAt) attempts.delete(key);
+ }
+}
+
+export function checkRateLimit(
+ key: string,
+ maxAttempts = 5,
+ windowMs = 15 * 60 * 1000
+): boolean {
+ const now = Date.now();
+ pruneExpired(now);
+
+ const entry = attempts.get(key);
+
+ if (!entry || now > entry.resetAt) {
+ attempts.set(key, { count: 1, resetAt: now + windowMs });
+ return true;
+ }
+
+ if (entry.count >= maxAttempts) return false;
+
+ entry.count++;
+ return true;
+}
diff --git a/src/lib/session.ts b/src/lib/session.ts
new file mode 100644
index 0000000..9fb3fe9
--- /dev/null
+++ b/src/lib/session.ts
@@ -0,0 +1,40 @@
+import { SignJWT, jwtVerify } from "jose";
+
+export const SESSION_COOKIE = "admin_session";
+export const SESSION_MAX_AGE = 60 * 60 * 24 * 7; // 7 days
+
+function getSecret(): Uint8Array {
+ const secret = process.env.SESSION_SECRET;
+ if (!secret || secret.length < 32) {
+ throw new Error("SESSION_SECRET must be set and at least 32 characters");
+ }
+ return new TextEncoder().encode(secret);
+}
+
+export function getSessionCookieOptions(maxAge = SESSION_MAX_AGE) {
+ return {
+ name: SESSION_COOKIE,
+ httpOnly: true,
+ secure: process.env.NODE_ENV === "production",
+ sameSite: "lax" as const,
+ maxAge,
+ path: "/",
+ };
+}
+
+export async function createSessionToken(): Promise {
+ return new SignJWT({ role: "admin" })
+ .setProtectedHeader({ alg: "HS256" })
+ .setIssuedAt()
+ .setExpirationTime(`${SESSION_MAX_AGE}s`)
+ .sign(getSecret());
+}
+
+export async function verifySessionToken(token: string): Promise {
+ try {
+ const { payload } = await jwtVerify(token, getSecret());
+ return payload.role === "admin";
+ } catch {
+ return false;
+ }
+}
diff --git a/src/lib/validation.ts b/src/lib/validation.ts
new file mode 100644
index 0000000..16a062a
--- /dev/null
+++ b/src/lib/validation.ts
@@ -0,0 +1,24 @@
+import { z } from "zod";
+
+export const MAX_GPX_BYTES = 5 * 1024 * 1024; // 5 MB
+
+export const locationSchema = z.object({
+ title: z.string().trim().min(1, "Title is required").max(200),
+ city: z.string().trim().min(1, "City is required").max(200),
+ tags: z.string().max(500).default(""),
+ captureDate: z
+ .string()
+ .refine((d) => !isNaN(Date.parse(d)), "Invalid capture date"),
+ visibility: z.enum(["public", "unlisted"]).default("public"),
+ gpxData: z
+ .string()
+ .max(MAX_GPX_BYTES, `GPX data must be under ${MAX_GPX_BYTES / (1024 * 1024)} MB`)
+ .optional()
+ .nullable(),
+});
+
+export type LocationInput = z.infer;
+
+export function parseLocationBody(body: unknown) {
+ return locationSchema.safeParse(body);
+}
diff --git a/src/middleware.ts b/src/middleware.ts
new file mode 100644
index 0000000..32f0ac7
--- /dev/null
+++ b/src/middleware.ts
@@ -0,0 +1,42 @@
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+import { verifySessionToken } from "@/lib/session";
+
+export async function middleware(request: NextRequest) {
+ const isAdminRoute =
+ request.nextUrl.pathname.startsWith("/admin") ||
+ request.nextUrl.pathname.startsWith("/api/admin");
+
+ if (isAdminRoute) {
+ const adminSession = request.cookies.get("admin_session");
+ const isValid =
+ adminSession?.value &&
+ (await verifySessionToken(adminSession.value));
+
+ if (!isValid) {
+ if (request.nextUrl.pathname.startsWith("/api/")) {
+ return NextResponse.json(
+ { error: "Unauthorized" },
+ { status: 401 }
+ );
+ }
+ return NextResponse.redirect(new URL("/login", request.url));
+ }
+ }
+
+ if (request.nextUrl.pathname === "/login") {
+ const adminSession = request.cookies.get("admin_session");
+ if (
+ adminSession?.value &&
+ (await verifySessionToken(adminSession.value))
+ ) {
+ return NextResponse.redirect(new URL("/admin", request.url));
+ }
+ }
+
+ return NextResponse.next();
+}
+
+export const config = {
+ matcher: ["/admin/:path*", "/api/admin/:path*", "/login"],
+};
+ {/* Left: List */}
+
+
+ {/* Manual React Backdrop for Mobile Sidebar */}
+ {isMobileSidebarOpen && (
+
+
+ {/* Main Panel (Map or Street View) */}
+
+
+
+ Locations
+ +
+
+
+ {filteredLocations.map((loc) => (
+
+ handleLocationSelect(loc)}
+ style={{ cursor: "pointer", overflow: "hidden" }}
+ >
+ {/* --- MOBILE LAYOUT (Horizontal) --- */}
+
+ ))}
+ {filteredLocations.length === 0 && (
+
+ {/* Thumbnail Map (Left) */}
+
+
+ {/* --- DESKTOP LAYOUT (Vertical/Original) --- */}
+
+ {thumbnails[loc.id] ? (
+ 
+ ) : (
+
+ {/* Content (Right) */}
+
+ Loading...
+
+ )}
+
+
+ {loc.title}
+
+ {loc.city}
{new Date(loc.captureDate).toLocaleDateString()}
+
+ {loc.tags && (
+ {loc.tags}
+ )}
+ {!loc.gpxData && (
+ No Route
+ )}
+
+
+ {/* Thumbnail Map (Top) */}
+
+
+ {thumbnails[loc.id] ? (
+
+ ) : (
+ Loading Map...
+ )}
+
+ {/* Content (Bottom) */}
+
+
+ {loc.title}
++ {loc.city} • {new Date(loc.captureDate).toLocaleDateString()} +
+
+ {loc.tags}
+
+
+ {!loc.gpxData && (
+ No Route Data
+ )}
+
+ No locations found.
+ )}
+
+ {/* Oldest date indicator at the bottom */}
+ {locations.length > 0 && (
+
+ Images dating back to {
+ new Date(Math.min(...locations.map(l => new Date(l.captureDate).getTime()))).getFullYear()
+ }
+
+ )}
+
+
+
+ {/* Overlay controls and mini-map, only shown when in Street View mode */}
+ {viewingStreetView && iframeUrl && (
+ <>
+
+
+
+
+
+
+ )}
+
+
+ setIsMobileSidebarOpen(false)}
+ />
+ )}
+
+ );
+}
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
new file mode 100644
index 0000000..0d4afee
--- /dev/null
+++ b/src/lib/auth.ts
@@ -0,0 +1,27 @@
+import { timingSafeEqual } from "crypto";
+import { cookies } from "next/headers";
+import { NextResponse } from "next/server";
+import { SESSION_COOKIE, verifySessionToken } from "@/lib/session";
+
+export function safeCompare(a: string, b: string): boolean {
+ const bufA = Buffer.from(a);
+ const bufB = Buffer.from(b);
+ if (bufA.length !== bufB.length) return false;
+ return timingSafeEqual(bufA, bufB);
+}
+
+export async function requireAdmin(): Promise<
+ { authorized: true } | { authorized: false; response: NextResponse }
+> {
+ const cookieStore = await cookies();
+ const token = cookieStore.get(SESSION_COOKIE)?.value;
+
+ if (!token || !(await verifySessionToken(token))) {
+ return {
+ authorized: false,
+ response: NextResponse.json({ error: "Unauthorized" }, { status: 401 }),
+ };
+ }
+
+ return { authorized: true };
+}
diff --git a/src/lib/prisma.ts b/src/lib/prisma.ts
new file mode 100644
index 0000000..9fbde77
--- /dev/null
+++ b/src/lib/prisma.ts
@@ -0,0 +1,10 @@
+import { PrismaClient } from "@prisma/client";
+
+// PrismaClient is attached to the `global` object in development to prevent
+// exhausting your database connection limit.
+const globalForPrisma = global as unknown as { prisma: PrismaClient };
+
+export const prisma =
+ globalForPrisma.prisma || new PrismaClient();
+
+if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;
diff --git a/src/lib/rate-limit.ts b/src/lib/rate-limit.ts
new file mode 100644
index 0000000..32c2373
--- /dev/null
+++ b/src/lib/rate-limit.ts
@@ -0,0 +1,31 @@
+const attempts = new Map