implement api routes, server actions and caching, and the event details

app/api/events/[slug]/route.ts

@@ -0,0 +1,100 @@
+import { NextRequest, NextResponse } from 'next/server';
+import connectDB from '@/lib/mongodb';
+import Event, { IEvent } from '@/database/event.model';
+
+// Define params type for Next.js dynamic route
+type RouteParams = {
+  params: Promise<{
+    slug: string;
+  }>;
+}
+
+/**
+ * GET /api/events/[slug]
+ * Fetches a single events by its slug
+ */
+export async function GET(
+  req: NextRequest,
+  { params }: RouteParams
+): Promise<NextResponse> {
+  try {
+
+      // Connect to database
+      await connectDB();
+
+    // Await and extract slug for params
+    const { slug } = await params;
+
+    // Validate slug parameter
+    if (!slug || typeof slug !== 'string') {
+      return NextResponse.json(
+        { message: 'Invalid slug parameter', success: false },
+        { status: 400 }
+      );
+    }
+
+    // Sanitize slug to prevent injection attacks
+    const sanitizedSlug = slug.trim().toLowerCase();
+
+    // Validate slug format (alphanumeric and hyphens only)
+    const slugRegex = /^[a-z0-9-]+$/;
+    if (!slugRegex.test(sanitizedSlug)) {
+      return NextResponse.json(
+        { 
+          message: 'Invalid slug format. Slug must contain only lowercase letters, numbers, and hyphens',
+          success: false 
+        },
+        { status: 400 }
+      );
+    }
+
+
+
+    // Query events by slug
+    const event: IEvent | null = await Event.findOne({ slug: sanitizedSlug }).lean();
+
+    // Handle events not found
+    if (!event) {
+      return NextResponse.json(
+        { 
+          message: `Event with slug '${sanitizedSlug}' not found`,
+          success: false 
+        },
+        { status: 404 }
+      );
+    }
+
+    // Return events data
+    return NextResponse.json(
+      {
+        message: 'Event fetched successfully',
+        success: true,
+        event,
+      },
+      { status: 200 }
+    );
+
+  } catch (error) {
+    console.error('Error fetching events by slug:', error);
+
+    // Handle database connection errors
+    if (error instanceof Error && error.message.includes('connection')) {
+      return NextResponse.json(
+        {
+          message: 'Database connection error',
+          success: false,
+        },
+        { status: 503 }
+      );
+    }
+
+    // Handle unexpected errors
+    return NextResponse.json(
+      {
+        message: 'Failed to fetch events',
+        success: false,
+      },
+      { status: 500 }
+    );
+  }
+}

app/api/events/route.ts

@@ -0,0 +1,79 @@
+import {NextRequest, NextResponse} from "next/server";
+import { v2 as cloudinary } from 'cloudinary';
+import connectDB from "@/lib/mongodb";
+import Event from '@/database/event.model';
+
+
+export async function POST(req: NextRequest){    try{
+        await connectDB();
+        console.log("1. 🚀 ROUTE: Handing data to the Model...");
+        const formData = await req.formData();
+
+        let event;
+
+        try {
+            event = Object.fromEntries(formData.entries());
+        } catch (e) {
+            return NextResponse.json({message: 'Invalid JSON data format'}, {status: 400});
+        }
+
+        const file = formData.get('image') as File;
+
+        if(!file)  return NextResponse.json({message: 'Image file is required'}, {status: 400})
+
+    //  let tags = JSON.parse(formData.get('tags') as string);
+    // let agenda = JSON.parse(formData.get('agenda') as string);
+
+
+    let tags, agenda;
+    try {
+        tags = JSON.parse(formData.get('tags') as string);
+        agenda = JSON.parse(formData.get('agenda') as string);
+    } catch (parseError) {
+        return NextResponse.json(
+            { message: 'Invalid JSON format for tags or agenda' },
+            { status: 400 }
+        );
+    }
+
+
+
+        const arrayBuffer = await file.arrayBuffer();
+        const buffer = Buffer.from(arrayBuffer);
+
+        const uploadResult = await new Promise((resolve, reject) => {
+            cloudinary.uploader.upload_stream({ resource_type: 'image', folder: 'DevEvent' }, (error, results) => {
+                if(error) return reject(error);
+                resolve(results);
+            }).end(buffer);
+        });
+
+        event.image = (uploadResult as { secure_url: string}).secure_url;
+
+
+        const createdEvent = await Event.create({
+            ...event,
+            tags: tags,
+            agenda: agenda,
+        });
+
+        return NextResponse.json({message: 'Event Created successfully', event: createdEvent}, {status: 201});
+
+    } catch (e) {
+        console.error(e);
+        return NextResponse.json({message : 'Event Creation Failed', error: e instanceof Error ? e.message: 'Unknown'}, {status: 500});
+    }
+}
+
+export async function GET(){
+    try {
+        await connectDB();
+
+        const events = await Event.find().sort({createdAt: -1});
+
+        return NextResponse.json({ message: 'Events fetched successfully', events}, {status: 200});
+
+    } catch (e) {
+        return NextResponse.json({message: 'Event Fetching failed', error: e instanceof Error ? e.message : 'Unknown error'}, { status: 500});
+    }
+}

app/events/[slug]/page.tsx

@@ -0,0 +1,115 @@
+import {notFound} from "next/navigation";
+import Image from 'next/image';
+import {IEvent} from '@/database/event.model';
+import BookEvent from "@/components/BookEvent";
+import {getSimilarEventsBySlug} from "@/lib/actions/event.action";
+import EventCard from "@/components/EventCard";
+const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
+
+const EventDetailItem = ({icon, alt, label} : { icon: string; alt:string; label:string}) => (
+    <div className={"flex flex-row gap-2 items-center"}>        <Image src={icon} alt={alt} width={17} height={17}/>
+        <p>{label}</p>
+    </div>
+)
+
+const EventAgenda = ({agendaItems}: {agendaItems: string[]}) => (
+    <div className={"agenda"}>
+        <h2>Agenda</h2>
+        <ul>
+            {agendaItems.map((item) => (
+                <li key={item}>{item}</li>
+            ))}
+        </ul>
+    </div>
+)
+
+
+const EventTags = ({tags}: {tags: string[] }) => (
+    <div className={"flex flex-row gap-1.5 flex-wrap"}>
+        {tags.map((tag) => (
+            <div className={"pill"} key={tag}>{tag}</div>
+        ))}
+    </div>
+)
+
+
+const EventDetailsPage = async ({params}: {params: Promise<{ slug: string }>}) => {
+    const { slug } = await params;
+    const request = await fetch(`${BASE_URL}/api/events/${slug}`);
+
+    if (!request.ok) {
+        return notFound();
+    }
+
+    const { event } = await request.json();
+    const { description, image, overview, date, time, location, mode, agenda, audience, tags, organizer } = event;
+
+    const bookings = 10;
+
+    const similarEvents: IEvent[] = await getSimilarEventsBySlug(slug);
+
+    console.log({similarEvents});
+
+    return (
+        <section id={"event"}>
+            <div className={"header"}>
+                <h1>Event Description</h1>
+                <p>{description}</p>
+            </div>
+            <div className={"details"}>
+                {/* Left Side - Event Content */}
+                <div className={"content"}>
+                    <Image src={image} alt={"Event Banner"} width={800} height={800} className={"banner"} />
+
+                    <section className={"flex-col-gap-2"}>
+                        <h2>Overview</h2>
+                        <p>{overview}</p>
+                    </section>
+
+                    <section className={"flex-col-gap-2"}>
+                        <h2>Event Details</h2>
+                        <EventDetailItem icon={"/icons/calendar.svg"} alt={"calendar"} label={date} />
+                        <EventDetailItem icon={"/icons/clock.svg"} alt={"clock"} label={time} />
+                        <EventDetailItem icon={"/icons/pin.svg"} alt={"pin"} label={location} />
+                        <EventDetailItem icon={"/icons/mode.svg"} alt={"mode"} label={mode} />
+                        <EventDetailItem icon={"/icons/audience.svg"} alt={"audience"} label={audience} />
+                    </section>
+
+                    <EventAgenda agendaItems={agenda} />
+
+                    <section className={"flex-col-gap-2"}>
+                        <h2>About the Organizer</h2>
+                        <p>{organizer}</p>
+                    </section>
+
+                    <EventTags tags={tags} />
+
+                </div>
+                {/* Right Side - Booking Form*/}
+                <aside className={"booking"}>
+                    <div className={"signup-card"}>
+                        <h2>Book Your Spot!</h2>
+                        {bookings > 0 ? (
+                            <p className={"text-sm"}>
+                                Join {bookings} people who have already booked their spot!
+                            </p>
+                        ) : (
+                            <p className={"text-sm"}>Be the first to book your spot!</p>
+                        )}
+                        <BookEvent />
+                    </div>
+                </aside>
+            </div>
+
+            <div className={"flex w-full flex-col gap-4 pt-20"}>
+                <h2>Similar Events</h2>
+                <div className={"events"}>
+                    {similarEvents.length > 0 && similarEvents.map((similarEvent: IEvent) => (
+                        <EventCard key={String(similarEvent.title)} {...similarEvent} />
+                    ))}
+                </div>
+            </div>
+        </section>
+    )
+}
+export default EventDetailsPage

app/page.tsx

@@ -1,10 +1,17 @@
 import ExploreBtn from "@/components/ExploreBtn";
 import EventCard from "@/components/EventCard";
-import {events} from "@/lib/constants";
+import {IEvent} from "@/database";
+import {cacheLife} from "next/cache";
 
 
+const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
+const Page = async () => {
+    'use cache';
+    cacheLife('hours');
+    const response = await fetch(`${BASE_URL}/api/events`);
+    const {events} = await response.json();
+
 
-const Page = () => {
     return (
         <section>
         <h1 className={"text-center"}>The Hub For Every Dev <br/> Event You Can't Miss</h1>
@@ -13,8 +20,8 @@ const Page = () => {
             <div className={"mt-20 space-y-7"}>
                 <h3>Featured Events</h3>
                 <ul className={"events"}>
-                    {events.map((event) => (
-                        <li key={event.title}>
+                    {events && events.length > 0 && events.map((event: IEvent) => (
+                        <li key={event.title} className={"list-none"}>
                         <EventCard {...event}/>
                         </li>
                     ))}

components/BookEvent.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import React, {useState} from "react";
+
+
+    const BookEvent = () => {
+        const [email, setEmail] = useState('');
+        const [submitted, setSubmitted] = useState(false);
+
+        const handleSubmit = (e: React.FormEvent) => {
+              e.preventDefault();
+
+              setTimeout(() => {
+                  setSubmitted(true);
+              }, 1000)
+
+        }
+
+        return (
+            <div id={"book-event"}>
+                {submitted ? (
+                    <p className={"text-sm"}>Thank you for signing up</p>
+                ) : (
+                    <form onSubmit={handleSubmit}>
+                        <div>
+                            <label htmlFor={"email"}>Email Address</label>
+                            <input type={"email"}
+                                   value={email}
+                                   onChange={(e) => setEmail(e.target.value)}
+                                   id={"email"}
+                                   placeholder={"Enter your email address"}
+                            />
+                        </div>
+                        <button type={"submit"} className={"button-submit"}>Submit</button>
+
+                    </form>
+                )}
+            </div>
+        )
+    }
+
+    export default BookEvent
+

components/EventCard.tsx

@@ -13,7 +13,7 @@ interface Props {
 
 const EventCard = ({title,image, slug, location, time, date} : Props) => {
     return (
-        <Link href={`/events/${slug}`} id={"event-card"}>
+        <Link href={`/events/${slug}`} id={"events-card"}>
             <Image src={image} alt={title} width={410} height={300} className={"poster"}/>
             <div className={"flex flex-row gap-2"}>
                 <Image src={"/icons/pin.svg"} alt={"location"} width={14} height={14}/>