feat/sponsors-backend + frontend connection

client/src/api/sponsorsApi.ts

@@ -0,0 +1,36 @@
+import api from "./index";
+
+export function getSponsors() {
+  const res = api.get("/sponsors");
+  return res.then((response) => response.data);
+}
+
+export function createSponsor(sponsor: {
+  name: string;
+  deal: string;
+  address: string;
+  category: "cbd" | "newmarket" | "other";
+  code?: string;
+}) {
+  const res = api.post("/sponsors", sponsor);
+  return res.then((response) => response.data);
+}
+
+export function updateSponsor(
+  id: string,
+  sponsor: Partial<{
+    name: string;
+    deal: string;
+    address: string;
+    category: "cbd" | "newmarket" | "other";
+    code?: string;
+  }>
+) {
+  const res = api.put(`/sponsors/${id}`, sponsor);
+  return res.then((response) => response.data);
+}
+
+export function deleteSponsor(id: string) {
+  const res = api.delete(`/sponsors/${id}`);
+  return res.then((response) => response.data);
+}

client/src/pages/Sponsors.tsx

@@ -1,32 +1,27 @@
 import { useEffect, useState } from "react";
 import SponsorCard from "../components/SponsorCard";
-import sponsorsJsonData from "../placeholders/sponsors.json";
+import { getSponsors } from "../api/sponsorsApi";
 
-// 1. Define the shape of a single sponsor
 interface Sponsor {
   name: string;
   deal: string;
   address: string;
+  category: "cbd" | "newmarket" | "other";
   code?: string;
 }
 
-// 2. Define the shape of the whole JSON file
-interface SponsorsData {
-  cbd_sponsors: Sponsor[];
-  newmarket_sponsors: Sponsor[];
-  other_sponsors: Sponsor[];
-}
-
 const Sponsors = () => {
-  const [sponsors, setSponsors] = useState<SponsorsData | null>(null);
+  const [sponsors, setSponsors] = useState<Sponsor[]>([]);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    Promise.resolve(sponsorsJsonData as SponsorsData)
+    getSponsors()
       .then((data) => setSponsors(data))
-      .catch((err) => console.error("Error loading sponsors:", err));
+      .catch((err) => console.error("Error loading sponsors:", err))
+      .finally(() => setLoading(false));
   }, []);
 
-  if (!sponsors) {
+  if (loading) {
     return (
       <div style={{ textAlign: "center", padding: "2rem" }}>
         Loading Sponsors...
@@ -42,6 +37,10 @@ const Sponsors = () => {
     padding: "2rem",
   } as const;
 
+  const cbd = sponsors.filter((s) => s.category === "cbd");
+  const newmarket = sponsors.filter((s) => s.category === "newmarket");
+  const other = sponsors.filter((s) => s.category === "other");
+
   return (
     <div style={{ textAlign: "center", backgroundColor: "#faf3d1" }}>
       {/* HERO SECTION */}
@@ -71,12 +70,12 @@ const Sponsors = () => {
       <section id="CBD">
         <h2 style={{ marginTop: "2rem" }}>CBD Sponsors</h2>
         <div style={gridStyle}>
-          {sponsors.cbd_sponsors.map((s, index) => (
+          {cbd.map((s, index) => (
             <SponsorCard
               key={index}
               name={s.name}
-              description={s.deal} // Mapping 'deal' from JSON to 'description' prop
-              location={s.address} // Mapping 'address' from JSON to 'location' prop
+              description={s.deal}
+              location={s.address}
             />
           ))}
         </div>
@@ -86,7 +85,7 @@ const Sponsors = () => {
       <section id="Newmarket">
         <h2 style={{ marginTop: "2rem" }}>Newmarket Sponsors</h2>
         <div style={gridStyle}>
-          {sponsors.newmarket_sponsors.map((s, index) => (
+          {newmarket.map((s, index) => (
             <SponsorCard
               key={index}
               name={s.name}
@@ -101,7 +100,7 @@ const Sponsors = () => {
       <section id="Other">
         <h2 style={{ marginTop: "2rem" }}>Other Sponsors</h2>
         <div style={gridStyle}>
-          {sponsors.other_sponsors.map((s, index) => (
+          {other.map((s, index) => (
             <SponsorCard
               key={index}
               name={s.name}

server/package.json

@@ -20,7 +20,7 @@
     "dotenv": "^17.3.1",
     "express": "^5.2.1",
     "express-session": "^1.19.0",
-    "mongoose": "^9.2.4",
+    "mongoose": "^9.6.1",
     "multer": "^2.1.1",
     "passport": "^0.7.0",
     "passport-google-oauth20": "^2.0.0"

server/src/index.ts

@@ -7,6 +7,7 @@ import { Strategy as GoogleStrategy } from "passport-google-oauth20";
 import authRoutes from "./routes/authRoutes";
 import imageRoutes from "./routes/imageRoutes";
 import executivesRoutes from "./routes/executivesRoutes";
+import sponsorRoutes from "./routes/sponsorRoutes";
 import userRoutes from "./routes/userRoutes";
 import { User } from "./model/user";
 
@@ -55,6 +56,7 @@ app.use(express.json());
 app.use("/api/auth", authRoutes);
 app.use("/api/images", imageRoutes);
 app.use("/api/executives", executivesRoutes);
+app.use("/api/sponsors", sponsorRoutes);
 app.use("/api/users", userRoutes);
 
 // Connect to MongoDB and start the server

server/src/model/sponsors.ts

@@ -0,0 +1,18 @@
+import mongoose from "mongoose";
+
+const sponsorSchema = new mongoose.Schema(
+  {
+    name: { type: String, required: true },
+    deal: { type: String, required: true },
+    address: { type: String, required: true },
+    category: {
+      type: String,
+      enum: ["cbd", "newmarket", "other"],
+      required: true,
+    },
+    code: { type: String }, // optional (only some sponsors have it)
+  },
+  { timestamps: true }
+);
+
+export const Sponsor = mongoose.model("Sponsor", sponsorSchema);

server/src/routes/sponsorRoutes.ts

@@ -0,0 +1,28 @@
+import express from "express";
+import { Sponsor } from "../model/sponsors";
+
+const router = express.Router();
+
+router.post("/", async (req, res) => {
+  const sponsor = await Sponsor.create(req.body);
+  res.json(sponsor);
+});
+
+router.get("/", async (req, res) => {
+  const sponsors = await Sponsor.find();
+  res.json(sponsors);
+});
+
+router.put("/:id", async (req, res) => {
+  const updated = await Sponsor.findByIdAndUpdate(req.params.id, req.body, {
+    new: true,
+  });
+  res.json(updated);
+});
+
+router.delete("/:id", async (req, res) => {
+  await Sponsor.findByIdAndDelete(req.params.id);
+  res.json({ message: "Deleted" });
+});
+
+export default router;