Dev

package.json

@@ -14,13 +14,16 @@
     "@tailwindcss/vite": "^4.1.17",
     "antd": "^6.0.0",
     "axios": "^1.13.2",
+    "leaflet": "^1.9.4",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-leaflet": "^5.0.0",
     "react-router": "^7.9.6",
     "tailwindcss": "^4.1.17"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
+    "@types/leaflet": "^1.9.21",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",

src/components/ProtectedRoute.tsx

@@ -1,17 +1,17 @@
 import React from "react";
-import { Navigate } from "react-router";
+// import { Navigate } from "react-router";
 import type { ReactNode } from "react";
 
 interface ProtectedRouteProps {
     element?: ReactNode;
 }
 
 export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ element }) => {
-    const storedUser = localStorage.getItem("user");
-
-    if (!storedUser) {
-        return <Navigate to="/signin" replace />;
-    }
-
+    // const storedUser = localStorage.getItem("user");
+    //
+    // if (!storedUser) {
+    //     return <Navigate to="/signin" replace />;
+    // }
+    //
     return <>{element}</>;
 };

src/pages/ExplorePage.tsx

@@ -1,3 +1,48 @@
+import { useEffect, useState } from "react";
+import { MapContainer, TileLayer, Marker, Popup, Tooltip } from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+import { Input } from "antd";
+
 export function ExplorePage() {
-    return <div> ExplorePage</div>;
+    const [position, setPosition] = useState<[number, number] | null>(null);
+
+    useEffect(() => {
+        if (!navigator.geolocation) {
+            alert("Geolocation is not supported by your browser");
+            return;
+        }
+
+        navigator.geolocation.getCurrentPosition(
+            (pos) => {
+                setPosition([pos.coords.latitude, pos.coords.longitude]);
+            },
+            (err) => {
+                console.error(err);
+                alert("Unable to retrieve your location");
+            },
+        );
+    }, []);
+
+    if (!position) return <div>Loading map...</div>;
+
+    return (
+        <div className="flex h-full flex-col gap-3 pt-8">
+            <h4 className="text-center font-bold text-lg border-b border-gray-300 pb-4">Explore</h4>
+            <div className="px-4 py-4">
+                <Input.Search placeholder="Search item" className="h-full"/>
+            </div>
+            <MapContainer center={position} zoom={13} style={{ height: "100vh", width: "100%" }}>
+                <TileLayer
+                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                />
+                <Marker position={position}>
+                    <Popup>Your current location</Popup>
+                    <Tooltip direction="top" offset={[-15, -10]} permanent>
+                        You are here
+                    </Tooltip>
+                </Marker>
+            </MapContainer>
+        </div>
+    );
 }