+ +
+    </div>
+  );
+}
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..c72a669
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,81 @@
+import { useState, useEffect } from "react";
+import { PlayerMap } from "./components/PlayerMap";
+import { StatsDashboard } from "./components/StatsDashboard";
+import { fetchPlexts } from "./api";
+import type { ApiResponse } from "./types";
+import "./index.css";
+
+export function App() {
+  const [data, setData] = useState<ApiResponse>({ count: 0, plexts: [] });
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        const result = await fetchPlexts();
+        setData(result);
+      } catch (error) {
+        console.error("Error loading data:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadData();
+    // Refresh data every 60 seconds
+    const interval = setInterval(loadData, 60000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="app">
+      <header className="app-header">
+        <div className="header-content">
+          <h1 className="app-title">Ingress Player Activity Dashboard</h1>
+          <p className="app-subtitle">Real-time player actions and locations</p>
+        </div>
+      </header>
+
+      <main className="app-main">
+        {loading ? (
+          <div className="loading-container">
+            <div className="loading-spinner"></div>
+            <p>Loading player data...</p>
+          </div>
+        ) : (
+          <>
+            {/* Map Section */}
+            <section className="map-section">
+              <div className="section-header">
+                <h2>Player Locations</h2>
+                <p>View player activity on the map</p>
+              </div>
+              <div className="map-wrapper">
+                <PlayerMap plexts={data.plexts} />
+              </div>
+            </section>
+
+            {/* Stats Section */}
+            <section className="stats-section">
+              <div className="section-header">
+                <h2>Activity Statistics</h2>
+                <p>Comprehensive analysis of player actions</p>
+              </div>
+              <StatsDashboard plexts={data.plexts} />
+            </section>
+
+            {/* Footer */}
+            <footer className="app-footer">
+              <div className="footer-content">
+                <p>Ingress Player Dashboard • Data from localhost:7001</p>
+              </div>
+            </footer>
+          </>
+        )}
+      </main>
+    </div>
+  );
+}
+
+export default App;
diff --git a/src/api.ts b/src/api.ts
new file mode 100644
index 0000000..39a358a
--- /dev/null
+++ b/src/api.ts
@@ -0,0 +1,27 @@
+import type { ApiResponse } from "./types";
+
+const API_BASE_URL = "http://localhost:7001";
+const API_ENDPOINT = "/plexts/from-db";
+const AUTH_CREDENTIALS = "root:root";
+
+export async function fetchPlexts(): Promise<ApiResponse> {
+    const headers = new Headers();
+    headers.set("Authorization", `Basic ${btoa(AUTH_CREDENTIALS)}`);
+
+    try {
+        const response = await fetch(`${API_BASE_URL}${API_ENDPOINT}`, {
+            method: "GET",
+            headers,
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        return data;
+    } catch (error) {
+        console.error("Error fetching plexts:", error);
+        return { count: 0, plexts: [] };
+    }
+}
diff --git a/src/components/PlayerMap.tsx b/src/components/PlayerMap.tsx
new file mode 100644
index 0000000..eccef2a
--- /dev/null
+++ b/src/components/PlayerMap.tsx
@@ -0,0 +1,82 @@
+import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+import type { Plext } from "../types";
+
+// Fix Leaflet marker icons
+delete (L.Icon.Default.prototype as any)._getIconUrl;
+L.Icon.Default.mergeOptions({
+    iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
+    iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
+    shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
+});
+
+interface PlayerMapProps {
+    plexts: Plext[];
+}
+
+export function PlayerMap({ plexts }: PlayerMapProps) {
+    // Get player locations from plexts
+    const playerLocations = plexts
+        .map((plext) => {
+            const player = plext.markup.find((item) => item.type === "PLAYER");
+            if (player && player.plain && plext.coordinates && plext.coordinates.coordinates) {
+                return {
+                    name: player.plain,
+                    team: player.team || "NEUTRAL",
+                    coordinates: [plext.coordinates.coordinates[1], plext.coordinates.coordinates[0]] as [number, number], // [lat, lon]
+                    eventType: plext.event_type,
+                    timestamp: plext.timestamp,
+                };
+            }
+            return null;
+        })
+        .filter(Boolean);
+
+    return (
+        <div className="map-container" style={{ height: "600px", width: "100%" }}>
+            <MapContainer
+                center={[45.57, 12.36]} // Default to Veneto region
+                zoom={12}
+                style={{ height: "100%", width: "100%" }}
+                scrollWheelZoom={true}
+            >
+                <TileLayer
+                    attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                />
+                {playerLocations.map((location, index) => {
+                    if (!location) return null;
+
+                    const markerColor = location.team === "RESISTANCE" ? "blue" : "green";
+
+                    return (
+                        <Marker
+                            key={index}
+                            position={location.coordinates}
+                            icon={new L.Icon({
+                                iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-${markerColor}.png`,
+                                shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
+                                iconSize: [25, 41],
+                                iconAnchor: [12, 41],
+                                popupAnchor: [1, -34],
+                                shadowSize: [41, 41],
+                            })}
+                        >
+                            <Popup>
+                                <div className="marker-popup">
+                                    <h4 style={{ color: location.team === "RESISTANCE" ? "#0066ff" : "#00cc00" }}>
+                                        {location.name}
+                                    </h4>
+                                    <p><strong>Team:</strong> {location.team}</p>
+                                    <p><strong>Event:</strong> {location.eventType}</p>
+                                    <p><strong>Time:</strong> {new Date(location.timestamp).toLocaleString()}</p>
+                                </div>
+                            </Popup>
+                        </Marker>
+                    );
+                })}
+            </MapContainer>
+        </div>
+    );
+}
diff --git a/src/components/StatsDashboard.tsx b/src/components/StatsDashboard.tsx
new file mode 100644
index 0000000..a78a72d
--- /dev/null
+++ b/src/components/StatsDashboard.tsx
@@ -0,0 +1,206 @@
+import { BarChart, Bar, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
+import type { Plext, EventStats, TeamStats, PlayerData } from "../types";
+
+interface StatsDashboardProps {
+    plexts: Plext[];
+}
+
+const EVENT_COLORS = {
+    RESONATOR_DEPLOYED: "#3b82f6",
+    RESONATOR_DESTROYED: "#ef4444",
+    PORTAL_CAPTURED: "#10b981",
+    PORTAL_NEUTRALIZED: "#f59e0b",
+    PORTAL_UNDER_ATTACK: "#8b5cf6",
+    LINK_CREATED: "#06b6d4",
+    LINK_DESTROYED: "#ec4899",
+    CONTROL_FIELD_CREATED: "#14b8a6",
+    UNKNOWN: "#6b7280",
+};
+
+const TEAM_COLORS = {
+    RESISTANCE: "#0066ff",
+    ENLIGHTENED: "#00cc00",
+    NEUTRAL: "#6b7280",
+};
+
+export function StatsDashboard({ plexts }: StatsDashboardProps) {
+    // Calculate event stats
+    const eventStats: EventStats = {};
+    plexts.forEach((plext) => {
+        eventStats[plext.event_type] = (eventStats[plext.event_type] || 0) + 1;
+    });
+
+    // Calculate team stats
+    const teamStats: TeamStats = {
+        RESISTANCE: 0,
+        ENLIGHTENED: 0,
+        NEUTRAL: 0,
+    };
+    plexts.forEach((plext) => {
+        const player = plext.markup.find((item) => item.type === "PLAYER");
+        if (player && player.team) {
+            teamStats[player.team]++;
+        } else {
+            teamStats.NEUTRAL++;
+        }
+    });
+
+    // Calculate player stats
+    const playerStats: PlayerData[] = [];
+    const playerMap = new Map<string, PlayerData>();
+
+    plexts.forEach((plext) => {
+        const player = plext.markup.find((item) => item.type === "PLAYER");
+        if (player && player.plain) {
+            if (!playerMap.has(player.plain) && plext.coordinates && plext.coordinates.coordinates) {
+                playerMap.set(player.plain, {
+                    name: player.plain,
+                    team: player.team || "NEUTRAL",
+                    events: 0,
+                    lastSeen: plext.timestamp,
+                    coordinates: [
+                        plext.coordinates.coordinates[1],
+                        plext.coordinates.coordinates[0],
+                    ],
+                });
+            }
+            const playerData = playerMap.get(player.plain)!;
+            playerData.events++;
+            if (plext.timestamp > playerData.lastSeen && plext.coordinates && plext.coordinates.coordinates) {
+                playerData.lastSeen = plext.timestamp;
+                playerData.coordinates = [
+                    plext.coordinates.coordinates[1],
+                    plext.coordinates.coordinates[0],
+                ];
+            }
+        }
+    });
+
+    const sortedPlayers = Array.from(playerMap.values()).sort((a, b) => b.events - a.events);
+
+    // Prepare chart data
+    const eventChartData = Object.entries(eventStats).map(([type, count]) => ({
+        name: type,
+        count,
+    }));
+
+    const teamChartData = Object.entries(teamStats)
+        .filter(([team]) => team !== "NEUTRAL")
+        .map(([team, count]) => ({
+            name: team,
+            count,
+        }));
+
+    return (
+        <div className="stats-dashboard">
+            <div className="stats-grid">
+                {/* Total Events */}
+                <div className="stat-card">
+                    <div className="stat-label">Total Events</div>
+                    <div className="stat-value">{plexts.length}</div>
+                </div>
+
+                {/* Active Players */}
+                <div className="stat-card">
+                    <div className="stat-label">Active Players</div>
+                    <div className="stat-value">{playerMap.size}</div>
+                </div>
+
+                {/* Resistance */}
+                <div className="stat-card">
+                    <div className="stat-label">Resistance</div>
+                    <div className="stat-value" style={{ color: TEAM_COLORS.RESISTANCE }}>
+                        {teamStats.RESISTANCE}
+                    </div>
+                </div>
+
+                {/* Enlightened */}
+                <div className="stat-card">
+                    <div className="stat-label">Enlightened</div>
+                    <div className="stat-value" style={{ color: TEAM_COLORS.ENLIGHTENED }}>
+                        {teamStats.ENLIGHTENED}
+                    </div>
+                </div>
+            </div>
+
+            <div className="charts-grid">
+                {/* Event Types Chart */}
+                <div className="chart-card">
+                    <h3>Event Types</h3>
+                    <ResponsiveContainer width="100%" height={300}>
+                        <BarChart data={eventChartData}>
+                            <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
+                            <XAxis dataKey="name" stroke="#9ca3af" />
+                            <YAxis stroke="#9ca3af" />
+                            <Tooltip
+                                contentStyle={{
+                                    backgroundColor: "#1f2937",
+                                    border: "1px solid #374151",
+                                    borderRadius: "8px",
+                                }}
+                            />
+                            <Legend />
+                            <Bar dataKey="count" fill="#3b82f6" radius={[8, 8, 0, 0]} />
+                        </BarChart>
+                    </ResponsiveContainer>
+                </div>
+
+                {/* Team Distribution Chart */}
+                <div className="chart-card">
+                    <h3>Team Distribution</h3>
+                    <ResponsiveContainer width="100%" height={300}>
+                        <PieChart>
+                            <Pie
+                                data={teamChartData}
+                                cx="50%"
+                                cy="50%"
+                                labelLine={false}
+                                label={({ name, percent }) => `${name} ${((percent || 0) * 100).toFixed(0)}%`}
+                                outerRadius={100}
+                                fill="#8884d8"
+                                dataKey="count"
+                            >
+                                {teamChartData.map((entry, index) => (
+                                    <Cell key={`cell-${index}`} fill={TEAM_COLORS[entry.name as keyof typeof TEAM_COLORS]} />
+                                ))}
+                            </Pie>
+                            <Tooltip
+                                contentStyle={{
+                                    backgroundColor: "#1f2937",
+                                    border: "1px solid #374151",
+                                    borderRadius: "8px",
+                                }}
+                            />
+                        </PieChart>
+                    </ResponsiveContainer>
+                </div>
+
+                {/* Top Players Chart */}
+                <div className="chart-card">
+                    <h3>Top Players</h3>
+                    <ResponsiveContainer width="100%" height={300}>
+                        <BarChart data={sortedPlayers.slice(0, 10)}>
+                            <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
+                            <XAxis dataKey="name" stroke="#9ca3af" />
+                            <YAxis stroke="#9ca3af" />
+                            <Tooltip
+                                contentStyle={{
+                                    backgroundColor: "#1f2937",
+                                    border: "1px solid #374151",
+                                    borderRadius: "8px",
+                                }}
+                            />
+                            <Legend />
+                            <Bar
+                                dataKey="events"
+                                fill="#10b981"
+                                radius={[8, 8, 0, 0]}
+                                label={{ position: "top" }}
+                            />
+                        </BarChart>
+                    </ResponsiveContainer>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/frontend.tsx b/src/frontend.tsx
new file mode 100644
index 0000000..446e60e
--- /dev/null
+++ b/src/frontend.tsx
@@ -0,0 +1,26 @@
+/**
+ * This file is the entry point for the React app, it sets up the root
+ * element and renders the App component to the DOM.
+ *
+ * It is included in `src/index.html`.
+ */
+
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+
+const elem = document.getElementById("root")!;
+const app = (
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
+
+if (import.meta.hot) {
+  // With hot module reloading, `import.meta.hot.data` is persisted.
+  const root = (import.meta.hot.data.root ??= createRoot(elem));
+  root.render(app);
+} else {
+  // The hot module reloading API is not available in production.
+  createRoot(elem).render(app);
+}
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..3fa0840
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,323 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
+  color: #e0e0e0;
+  min-height: 100vh;
+  line-height: 1.6;
+}
+
+.app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Header */
+.app-header {
+  background: rgba(26, 26, 46, 0.95);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 1.5rem 2rem;
+  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.header-content {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.app-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  background: linear-gradient(135deg, #3b82f6, #06b6d4);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: 0.5rem;
+}
+
+.app-subtitle {
+  color: #9ca3af;
+  font-size: 1.1rem;
+  font-weight: 300;
+}
+
+/* Main Content */
+.app-main {
+  flex: 1;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 2rem;
+  width: 100%;
+}
+
+/* Loading */
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem 2rem;
+  text-align: center;
+}
+
+.loading-spinner {
+  width: 50px;
+  height: 50px;
+  border: 3px solid rgba(59, 130, 246, 0.3);
+  border-top-color: #3b82f6;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 1.5rem;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Section Headers */
+.section-header {
+  margin-bottom: 2rem;
+}
+
+.section-header h2 {
+  font-size: 2rem;
+  font-weight: 600;
+  color: #f3f4f6;
+  margin-bottom: 0.5rem;
+}
+
+.section-header p {
+  color: #9ca3af;
+  font-size: 1.1rem;
+}
+
+/* Map Section */
+.map-section {
+  margin-bottom: 3rem;
+}
+
+.map-wrapper {
+  background: rgba(26, 26, 46, 0.8);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  height: 600px;
+}
+
+/* Stats Section */
+.stats-section {
+  margin-bottom: 3rem;
+}
+
+.stats-dashboard {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+/* Stats Grid */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.stat-card {
+  background: rgba(26, 26, 46, 0.8);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 2rem;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.stat-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
+  border-color: rgba(59, 130, 246, 0.5);
+}
+
+.stat-label {
+  color: #9ca3af;
+  font-size: 1rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.stat-value {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: #f3f4f6;
+}
+
+/* Charts Grid */
+.charts-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 2rem;
+}
+
+.chart-card {
+  background: rgba(26, 26, 46, 0.8);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 2rem;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.chart-card h3 {
+  color: #f3f4f6;
+  font-size: 1.3rem;
+  font-weight: 600;
+  margin-bottom: 1.5rem;
+}
+
+/* Footer */
+.app-footer {
+  background: rgba(26, 26, 46, 0.95);
+  backdrop-filter: blur(10px);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 1.5rem 2rem;
+  margin-top: auto;
+  text-align: center;
+  color: #6b7280;
+  font-size: 0.9rem;
+}
+
+.footer-content {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .app-header {
+    padding: 1rem;
+  }
+
+  .app-title {
+    font-size: 1.8rem;
+  }
+
+  .app-main {
+    padding: 1rem;
+  }
+
+  .stats-grid {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 1rem;
+  }
+
+  .stat-card {
+    padding: 1.5rem;
+  }
+
+  .stat-value {
+    font-size: 2rem;
+  }
+
+  .charts-grid {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+
+  .chart-card {
+    padding: 1.5rem;
+  }
+
+  .map-wrapper {
+    height: 400px;
+  }
+}
+
+@media (max-width: 480px) {
+  .app-title {
+    font-size: 1.5rem;
+  }
+
+  .app-subtitle {
+    font-size: 0.9rem;
+  }
+
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .stat-value {
+    font-size: 1.8rem;
+  }
+
+  .map-wrapper {
+    height: 300px;
+  }
+}
+
+/* Leaflet Marker Popup */
+.marker-popup {
+  color: #1a1a2e;
+}
+
+.marker-popup h4 {
+  margin-bottom: 0.5rem;
+}
+
+.marker-popup p {
+  margin: 0.25rem 0;
+}
+
+/* Recharts Overrides */
+.recharts-wrapper {
+  margin: 0 auto;
+}
+
+.recharts-text {
+  fill: #9ca3af !important;
+}
+
+.recharts-cartesian-grid-horizontal line,
+.recharts-cartesian-grid-vertical line {
+  stroke: #374151 !important;
+}
+
+.recharts-xAxis .recharts-text,
+.recharts-yAxis .recharts-text {
+  fill: #9ca3af !important;
+  font-size: 0.875rem;
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.stat-card,
+.chart-card {
+  animation: fadeIn 0.5s ease-out;
+}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..2a957d0
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="./logo.svg" />
+    <title>Bun + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./frontend.tsx"></script>
+  </body>
+</html>
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000..863f069
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1,41 @@
+import { serve } from "bun";
+import index from "./index.html";
+
+const server = serve({
+  routes: {
+    // Serve index.html for all unmatched routes.
+    "/*": index,
+
+    "/api/hello": {
+      async GET(req) {
+        return Response.json({
+          message: "Hello, world!",
+          method: "GET",
+        });
+      },
+      async PUT(req) {
+        return Response.json({
+          message: "Hello, world!",
+          method: "PUT",
+        });
+      },
+    },
+
+    "/api/hello/:name": async req => {
+      const name = req.params.name;
+      return Response.json({
+        message: `Hello, ${name}!`,
+      });
+    },
+  },
+
+  development: process.env.NODE_ENV !== "production" && {
+    // Enable browser hot reloading in development
+    hmr: true,
+
+    // Echo console logs from the browser to the server
+    console: true,
+  },
+});
+
+console.log(`🚀 Server running at ${server.url}`);
diff --git a/src/logo.svg b/src/logo.svg
new file mode 100644
index 0000000..7ef1500
--- /dev/null
+++ b/src/logo.svg
@@ -0,0 +1 @@
+<svg id="Bun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 70"><title>Bun Logo</title><path id="Shadow" d="M71.09,20.74c-.16-.17-.33-.34-.5-.5s-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5A26.46,26.46,0,0,1,75.5,35.7c0,16.57-16.82,30.05-37.5,30.05-11.58,0-21.94-4.23-28.83-10.86l.5.5.5.5.5.5.5.5.5.5.5.5.5.5C19.55,65.3,30.14,69.75,42,69.75c20.68,0,37.5-13.48,37.5-30C79.5,32.69,76.46,26,71.09,20.74Z"/><g id="Body"><path id="Background" d="M73,35.7c0,15.21-15.67,27.54-35,27.54S3,50.91,3,35.7C3,26.27,9,17.94,18.22,13S33.18,3,38,3s8.94,4.13,19.78,10C67,17.94,73,26.27,73,35.7Z" style="fill:#fbf0df"/><path id="Bottom_Shadow" data-name="Bottom Shadow" d="M73,35.7a21.67,21.67,0,0,0-.8-5.78c-2.73,33.3-43.35,34.9-59.32,24.94A40,40,0,0,0,38,63.24C57.3,63.24,73,50.89,73,35.7Z" style="fill:#f6dece"/><path id="Light_Shine" data-name="Light Shine" d="M24.53,11.17C29,8.49,34.94,3.46,40.78,3.45A9.29,9.29,0,0,0,38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7c0,.4,0,.8,0,1.19C9.06,15.48,20.07,13.85,24.53,11.17Z" style="fill:#fffefc"/><path id="Top" d="M35.12,5.53A16.41,16.41,0,0,1,29.49,18c-.28.25-.06.73.3.59,3.37-1.31,7.92-5.23,6-13.14C35.71,5,35.12,5.12,35.12,5.53Zm2.27,0A16.24,16.24,0,0,1,39,19c-.12.35.31.65.55.36C41.74,16.56,43.65,11,37.93,5,37.64,4.74,37.19,5.14,37.39,5.49Zm2.76-.17A16.42,16.42,0,0,1,47,17.12a.33.33,0,0,0,.65.11c.92-3.49.4-9.44-7.17-12.53C40.08,4.54,39.82,5.08,40.15,5.32ZM21.69,15.76a16.94,16.94,0,0,0,10.47-9c.18-.36.75-.22.66.18-1.73,8-7.52,9.67-11.12,9.45C21.32,16.4,21.33,15.87,21.69,15.76Z" style="fill:#ccbea7;fill-rule:evenodd"/><path id="Outline" d="M38,65.75C17.32,65.75.5,52.27.5,35.7c0-10,6.18-19.33,16.53-24.92,3-1.6,5.57-3.21,7.86-4.62,1.26-.78,2.45-1.51,3.6-2.19C32,1.89,35,.5,38,.5s5.62,1.2,8.9,3.14c1,.57,2,1.19,3.07,1.87,2.49,1.54,5.3,3.28,9,5.27C69.32,16.37,75.5,25.69,75.5,35.7,75.5,52.27,58.68,65.75,38,65.75ZM38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7,3,50.89,18.7,63.25,38,63.25S73,50.89,73,35.7C73,26.62,67.31,18.13,57.78,13,54,11,51.05,9.12,48.66,7.64c-1.09-.67-2.09-1.29-3-1.84C42.63,4,40.42,3,38,3Z"/></g><g id="Mouth"><g id="Background-2" data-name="Background"><path d="M45.05,43a8.93,8.93,0,0,1-2.92,4.71,6.81,6.81,0,0,1-4,1.88A6.84,6.84,0,0,1,34,47.71,8.93,8.93,0,0,1,31.12,43a.72.72,0,0,1,.8-.81H44.26A.72.72,0,0,1,45.05,43Z" style="fill:#b71422"/></g><g id="Tongue"><path id="Background-3" data-name="Background" d="M34,47.79a6.91,6.91,0,0,0,4.12,1.9,6.91,6.91,0,0,0,4.11-1.9,10.63,10.63,0,0,0,1-1.07,6.83,6.83,0,0,0-4.9-2.31,6.15,6.15,0,0,0-5,2.78C33.56,47.4,33.76,47.6,34,47.79Z" style="fill:#ff6164"/><path id="Outline-2" data-name="Outline" d="M34.16,47a5.36,5.36,0,0,1,4.19-2.08,6,6,0,0,1,4,1.69c.23-.25.45-.51.66-.77a7,7,0,0,0-4.71-1.93,6.36,6.36,0,0,0-4.89,2.36A9.53,9.53,0,0,0,34.16,47Z"/></g><path id="Outline-3" data-name="Outline" d="M38.09,50.19a7.42,7.42,0,0,1-4.45-2,9.52,9.52,0,0,1-3.11-5.05,1.2,1.2,0,0,1,.26-1,1.41,1.41,0,0,1,1.13-.51H44.26a1.44,1.44,0,0,1,1.13.51,1.19,1.19,0,0,1,.25,1h0a9.52,9.52,0,0,1-3.11,5.05A7.42,7.42,0,0,1,38.09,50.19Zm-6.17-7.4c-.16,0-.2.07-.21.09a8.29,8.29,0,0,0,2.73,4.37A6.23,6.23,0,0,0,38.09,49a6.28,6.28,0,0,0,3.65-1.73,8.3,8.3,0,0,0,2.72-4.37.21.21,0,0,0-.2-.09Z"/></g><g id="Face"><ellipse id="Right_Blush" data-name="Right Blush" cx="53.22" cy="40.18" rx="5.85" ry="3.44" style="fill:#febbd0"/><ellipse id="Left_Bluch" data-name="Left Bluch" cx="22.95" cy="40.18" rx="5.85" ry="3.44" style="fill:#febbd0"/><path id="Eyes" d="M25.7,38.8a5.51,5.51,0,1,0-5.5-5.51A5.51,5.51,0,0,0,25.7,38.8Zm24.77,0A5.51,5.51,0,1,0,45,33.29,5.5,5.5,0,0,0,50.47,38.8Z" style="fill-rule:evenodd"/><path id="Iris" d="M24,33.64a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,24,33.64Zm24.77,0a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,48.75,33.64Z" style="fill:#fff;fill-rule:evenodd"/></g></svg>
\ No newline at end of file
diff --git a/src/react.svg b/src/react.svg
new file mode 100644
index 0000000..1ab815a
--- /dev/null
+++ b/src/react.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-11.5 -10.23174 23 20.46348">
+  <circle cx="0" cy="0" r="2.05" fill="#61dafb"/>
+  <g stroke="#61dafb" stroke-width="1" fill="none">
+    <ellipse rx="11" ry="4.2"/>
+    <ellipse rx="11" ry="4.2" transform="rotate(60)"/>
+    <ellipse rx="11" ry="4.2" transform="rotate(120)"/>
+  </g>
+</svg>
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..4d18324
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,59 @@
+export type Team = "RESISTANCE" | "ENLIGHTENED" | "NEUTRAL";
+
+export type EventType =
+    | "RESONATOR_DEPLOYED"
+    | "RESONATOR_DESTROYED"
+    | "PORTAL_CAPTURED"
+    | "PORTAL_NEUTRALIZED"
+    | "PORTAL_UNDER_ATTACK"
+    | "LINK_CREATED"
+    | "LINK_DESTROYED"
+    | "CONTROL_FIELD_CREATED"
+    | "UNKNOWN";
+
+export interface Coordinates {
+    coordinates: [number, number]; // [lon, lat]
+    type: "Point";
+}
+
+export interface MarkupItem {
+    address?: string;
+    latE6?: number;
+    lngE6?: number;
+    name?: string;
+    plain?: string;
+    team?: Team;
+    type: "PLAYER" | "TEXT" | "PORTAL";
+}
+
+export interface Plext {
+    categories: number;
+    coordinates: Coordinates;
+    event_type: EventType;
+    id: string;
+    markup: MarkupItem[];
+    timestamp: number;
+}
+
+export interface ApiResponse {
+    count: number;
+    plexts: Plext[];
+}
+
+export interface PlayerData {
+    name: string;
+    team: Team;
+    events: number;
+    lastSeen: number;
+    coordinates: [number, number]; // [lat, lon]
+}
+
+export interface EventStats {
+    [eventType: string]: number;
+}
+
+export interface TeamStats {
+    RESISTANCE: number;
+    ENLIGHTENED: number;
+    NEUTRAL: number;
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..632a36f
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    // Environment setup & latest features
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "Preserve",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  },
+
+  "exclude": ["dist", "node_modules"]
+}