@@ -0,0 +24,4 @@
+    "react-router-dom": "^7.18.0",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {

@@ -0,0 +1,184 @@
+.counter {

@@ -0,0 +22,4 @@
+
+  .base,
+  .framework,
+  .vite {

@@ -0,0 +56,4 @@
+  }
+}
+
+#center {

@@ -0,0 +104,4 @@
+  }
+}
+
+#next-steps ul {

@@ -0,0 +115,4 @@
+    height: 18px;
+  }
+
+  a {

@@ -0,0 +1,62 @@
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';

@@ -0,0 +2,4 @@
+import { useMapEvents } from 'react-leaflet';
+import { Routes, Route, Link } from "react-router-dom";
+import EventForm from './components/eventForm.jsx'; // <- add this import
+

@@ -0,0 +3,4 @@
+import { Routes, Route, Link } from "react-router-dom";
+import EventForm from './components/eventForm.jsx'; // <- add this import
+
+function ClickHandler() {

@@ -0,0 +17,4 @@
+}
+
+// src/App.jsx
+function Home() {

@@ -0,0 +29,4 @@
+export default function App() {
+  return (
+    <div>
+      <Routes>

@@ -0,0 +37,4 @@
+  );
+}
+
+// export default function App() {

@@ -0,0 +1,124 @@
+/* eventForm.css */

@@ -0,0 +5,4 @@
+- When a place is chosen, address + coordinates are written into the form values
+- Coordinates are submitted as flat fields; the schema transforms them into `location`
+*/
+import React, {useEffect, useState} from "react";

@@ -0,0 +29,4 @@
+import markerRetinaUrl from "leaflet/dist/images/marker-icon-2x.png";
+import markerShadowUrl from "leaflet/dist/images/marker-shadow.png";
+
+L.Icon.Default.mergeOptions({

@@ -0,0 +48,4 @@
+        watch,
+    } = useForm({
+        resolver: zodResolver(EventPostSchema),
+        defaultValues: {

@@ -0,0 +61,4 @@
+            rain_date: "",
+            email: "madeleienma07@gmail.com",
+            phone_number: "8482189789",
+            latitude: "",   // hidden field for latitude

@@ -0,0 +78,4 @@
+        try {
+            // Schema handles transformation - data is already nested as { location: { latitude, longitude } }
+            await eventService.createEvent(data);
+            alert("Your event has been created successfully");

@@ -0,0 +144,4 @@
+    // parse lat/lng from watched values
+    const markerPosition = (latitude && longitude) ? [parseFloat(latitude), parseFloat(longitude)] : null;
+
+    return (

@@ -0,0 +167,4 @@
+
+
+            {/* Map and search control */}
+            <div style={{marginTop: 8}}>

@@ -0,0 +185,4 @@
+                </div>
+            </div>
+            <div>
+                {/* Address input - if you want you can also update address automatically from search result */}

@@ -0,0 +1,111 @@
+:root {

@@ -0,0 +30,4 @@
+  }
+}
+
+@media (prefers-color-scheme: dark) {

@@ -0,0 +9,4 @@
+
+export const EventPostSchema = z.object({
+    name: z.string().min(1, "Name is required"),
+    description: z.string().min(5, "Description has to be more than 5 letters."),

@@ -0,0 +13,4 @@
+    url: z.string().url().nullable().optional(),
+    address: z.string().min(5, "Address is required"),
+
+    status: z.enum(["scheduled", "completed", "canceled"]).optional(),

@@ -0,0 +21,4 @@
+    async createEvent(rawPayload) {
+        // Validate and coerce the outgoing payload
+        const parsed = EventPostSchema.parse(rawPayload); // will throw if invalid
+        console.log("EventService sending payload:", JSON.stringify(rawPayload, null, 2)); // Log here

@@ -1,4 +1,8 @@
+import sys