🔴 Problem
The backend route for creating an event is fully developed in
route.ts
. It handles file uploads, parses tags/agenda arrays, uploads banners to Cloudinary, and saves documents to MongoDB. However, there is no frontend web page or form to actually utilize this API route. Clicking "Create Event" in the navigation bar redirects back to the home page (/) instead of opening an event creation interface.
🔍 Technical Context
API Route:
app/api/events/route.ts
Navigation link to update:
Navbar.tsx
✅ Requirements & Expected Behavior
Create a new directory and route: app/create-event/page.tsx (or /events/create/page.tsx).
Update the navigation link in
Navbar.tsx
to point to this new path.
Design a comprehensive form component (e.g., components/CreateEventForm.tsx) with the following fields:
Text inputs: Title, Description, Overview, Venue, Location, Time, Organizer.
Date input: Date picker.
Select dropdown: Mode (online | offline | hybrid).
File upload: An image selector for the event banner.
Dynamic list fields:
Tags: Dynamic input where users can add multiple text tags.
Agenda: Dynamic list where users can click "Add Item" to add successive bullet points for the schedule.
Integrate the form submission by sending a standard POST request with FormData to /api/events.
Display progress feedback (e.g., uploading banner status, saving status) and redirect to the newly created event's page (/events/[slug]) upon success.
🛠️ Suggested Steps for Contributors
Build out the form fields inside a 'use client' component.
Maintain dynamic lists in React state for tags and agenda items:
typescript
const [tags, setTags] = useState<string[]>([]);
const [agenda, setAgenda] = useState<string[]>([]);
When submitting, assemble the payload using FormData:
typescript
const formData = new FormData();
formData.append('title', title);
formData.append('image', imageFile); // File object from input
formData.append('tags', JSON.stringify(tags));
formData.append('agenda', JSON.stringify(agenda));
// ... append rest
Post this payload to /api/events using fetch or use server actions if preferred.
🔴 Problem
The backend route for creating an event is fully developed in
route.ts
. It handles file uploads, parses tags/agenda arrays, uploads banners to Cloudinary, and saves documents to MongoDB. However, there is no frontend web page or form to actually utilize this API route. Clicking "Create Event" in the navigation bar redirects back to the home page (/) instead of opening an event creation interface.
🔍 Technical Context
API Route:
app/api/events/route.ts
Navigation link to update:
Navbar.tsx
✅ Requirements & Expected Behavior
Create a new directory and route: app/create-event/page.tsx (or /events/create/page.tsx).
Update the navigation link in
Navbar.tsx
to point to this new path.
Design a comprehensive form component (e.g., components/CreateEventForm.tsx) with the following fields:
Text inputs: Title, Description, Overview, Venue, Location, Time, Organizer.
Date input: Date picker.
Select dropdown: Mode (online | offline | hybrid).
File upload: An image selector for the event banner.
Dynamic list fields:
Tags: Dynamic input where users can add multiple text tags.
Agenda: Dynamic list where users can click "Add Item" to add successive bullet points for the schedule.
Integrate the form submission by sending a standard POST request with FormData to /api/events.
Display progress feedback (e.g., uploading banner status, saving status) and redirect to the newly created event's page (/events/[slug]) upon success.
🛠️ Suggested Steps for Contributors
Build out the form fields inside a 'use client' component.
Maintain dynamic lists in React state for tags and agenda items:
typescript
const [tags, setTags] = useState<string[]>([]);
const [agenda, setAgenda] = useState<string[]>([]);
When submitting, assemble the payload using FormData:
typescript
const formData = new FormData();
formData.append('title', title);
formData.append('image', imageFile); // File object from input
formData.append('tags', JSON.stringify(tags));
formData.append('agenda', JSON.stringify(agenda));
// ... append rest
Post this payload to /api/events using fetch or use server actions if preferred.