Feat/integration events page

[kr1shap]

Integrated API in events page...

• added a nextjs API routing system to use server-side env variables
• added api/event nextjs routing (for all GET related functions for /v1/function/events edge function)
• refactored events page in order to use API and to reduce coupling
• added error page component
• Added lazy animations for smoother transitions
• client-side pagination (server-side pagination should be implemented in future for edge function endpoint if high payload is returned)

NOTE: Another env file needed in the /frontend folder so nextjs can detect it. copy current env file into /frontend folder and it should work fine

[kr1shap]

@copilot review and provide feedback

[Copilot]

@kr1shap I've opened a new pull request, #84, to work on those changes. Once the pull request is ready, I'll request review from you.

[Copilot]

Pull request overview

Integrates the Events page with Supabase-backed API routes in the Next.js app, adding a service layer for event fetches, UI refactors to reduce coupling, and client-side pagination/animations for a smoother browsing experience.

Changes:

• Added Next.js API routes (/api/events/*) plus a small Supabase networking utility and events service layer.
• Refactored the Events page/components to fetch upcoming/past events from the new API and added client-side pagination + Framer Motion transitions.
• Introduced a reusable ErrorState component for error presentation.

Reviewed changes

Copilot reviewed 13 out of 14 changed files in this pull request and generated 12 comments.

Show a summary per file

File	Description
frontend/package.json	Adds dependencies needed for Supabase, animations, and icons.
frontend/package-lock.json	Locks new dependency graph for the added packages.
frontend/components/ErrorState.tsx	New error UI component intended for Events page failure states.
frontend/app/events/utils.ts	Adds pagination + date formatting utilities for Events UI.
frontend/app/events/types.ts	Defines Event and API response types.
frontend/app/events/page.tsx	Refactors Events page to fetch upcoming/past events via Next API routes.
frontend/app/events/EventSection.tsx	Accepts events via props; adds pagination UI and framer-motion transitions.
frontend/app/events/EventCard.tsx	Adjusts card props and component definition (now expects an id).
frontend/app/api/utils/supabase.ts	Adds shared helpers for env credentials + Supabase Edge/REST fetch wrappers.
frontend/app/api/events/service.ts	Service layer for fetching events via Supabase Edge Functions.
frontend/app/api/events/route.ts	New combined endpoint returning upcoming + past events.
frontend/app/api/events/upcoming/route.ts	New endpoint proxying to edge function upcoming events.
frontend/app/api/events/past/route.ts	New endpoint proxying to edge function past events.
frontend/app/api/events/[id]/route.ts	New endpoint intended to fetch a single event by id.

Files not reviewed (1)

• frontend/package-lock.json: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[tjhiaj]

Looks good so far! Just a couple things:

We're unable to hit the event detail endpoint that uses a specific event id.

• Copilot also made a few suggestions, can you take a look at these and lmk what you think?
  npm run build fails: missing deps framer-motion and react-icons (imports in [EventSection.tsx] and [Footer.jsx]); add to [package.json]
• npm run lint fails with react-hooks/set-state-in-effect in [EventSection.tsx] (blocking lint error).
• Minor review comment: [ErrorState.tsx] defines [onRetry]/[retryLabel] props but does not render a retry button.

[kr1shap]

• npm run build fails: missing deps framer-motion and react-icons (imports in [EventSection.tsx] and [Footer.jsx]); add to [package.json]

I checked out the API and fixed the issue. The other errors dont seem to exist on my end. These dependencies do exist in package.json. First image is (lint) run and second image is (build) run.

[tjhiaj]

lgtm