single event page and also google og image to logo

Author: tonyqiu123

backend/apps/events/urls.py

@@ -8,6 +8,7 @@
 
 urlpatterns = [
     path("", views.get_events, name="events"),
+    path("<int:event_id>/", views.get_event, name="event_detail"),
     path("export.ics", views.export_events_ics, name="export_events_ics"),
     path(
         "google-calendar-urls/",

backend/apps/events/views.py

@@ -2,6 +2,7 @@
 from django.http import HttpResponse
 from django.utils import timezone
 from django.utils.html import escape
+from django.shortcuts import get_object_or_404
 from ratelimit.decorators import ratelimit
 from rest_framework import status
 from rest_framework.decorators import api_view, permission_classes
@@ -82,6 +83,46 @@ def get_events(request):
         return Response({"error": str(e)}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
 
 
+@api_view(["GET"])
+@permission_classes([AllowAny])
+@ratelimit(key="ip", rate="60/hr", block=True)
+def get_event(request, event_id):
+    """Get a single event by ID"""
+    try:
+        event = get_object_or_404(Events, id=event_id)
+        
+        # Return selected event fields (same as get_events)
+        fields = [
+            "id",
+            "title",
+            "description",
+            "location",
+            "dtstart",
+            "dtend",
+            "price",
+            "food",
+            "registration",
+            "source_image_url",
+            "club_type",
+            "added_at",
+            "school",
+            "source_url",
+            "ig_handle",
+            "discord_handle",
+            "x_handle",
+            "tiktok_handle",
+            "fb_handle",
+        ]
+        
+        event_data = {field: getattr(event, field) for field in fields}
+        event_data["display_handle"] = events_utils.determine_display_handle(event_data)
+        
+        return Response(event_data)
+
+    except Exception as e:
+        return Response({"error": str(e)}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
+
+
 @api_view(["GET"])
 @permission_classes([AllowAny])
 def test_similarity(request):

frontend/index.html

@@ -14,7 +14,7 @@
     <meta property="og:type" content="website" />
     <meta property="og:title" content="Wat2Do - Discover University of Waterloo Club Events" />
     <meta property="og:description" content="Find and explore exciting club events at the University of Waterloo. Browse upcoming events, discover campus clubs, and stay connected with the UW community." />
-    <meta property="og:image" content="https://bug-free-octo-spork.s3.us-east-2.amazonaws.com/open-graph-image.png" />
+    <meta property="og:image" content="https://bug-free-octo-spork.s3.us-east-2.amazonaws.com/wat2do-email.svg" />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
     <meta property="og:image:type" content="image/png" />

frontend/src/app/App.tsx

@@ -2,6 +2,7 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Analytics } from "@vercel/analytics/react";
 import { EventsPage } from "@/features/events";
+import EventDetailPage from "@/features/events/pages/EventDetailPage";
 import { ClubsPage } from "@/features/clubs";
 import { AdminPage } from "@/features/admin";
 import { UnsubscribePage } from "@/features/newsletter";
@@ -37,6 +38,7 @@ function App() {
             <Routes>
               <Route path="/" element={<EventsPage />} />
               <Route path="/events" element={<EventsPage />} />
+              <Route path="/events/:eventId" element={<EventDetailPage />} />
               <Route path="/clubs" element={<ClubsPage />} />
               <Route path="/about" element={<AboutPage />} />
               <Route path="/contact" element={<ContactPage />} />