Back to projects

EventHubWeb application

Discover, create, and manage campus events in one place.

Sep 2024 - Dec 2024PrototypeFront-end developer
Next.jsTypeScriptFlaskPythonNextAuthCloudinary

Overview

EventHub centralizes campus event discovery, creation, and RSVP tracking. A Next.js App Router frontend handles UX and sessions while a Flask API manages events and users, with JWT-backed auth bridging the two and Cloudinary handling media.

At a Glance

Role
Front-end developer
Timeline
Sep 2024 - Dec 2024
Status
Prototype
Type
Web application

Highlights

Public discovery + private dashboard

Open routes support browsing and search; protected dashboard routes expose a user's created events and RSVPs, gated by NextAuth middleware.

Event CRUD with media upload

A reusable form combines react-hook-form + zod validation, date pickers, and Cloudinary uploads before hitting protected Flask endpoints.

RSVP lifecycle

Server actions call register/unregister APIs and refresh the UI to stay in sync with server-authoritative state.

Cross-stack authentication

A NextAuth credentials provider authenticates against the Flask API and maps its JWTs into App Router sessions.

How It Works

1

The Next.js frontend renders public event listings and reads search/filter state from the URL.

2

Event data is fetched from Flask endpoints like /api/events/upcoming and /api/events/search.

3

NextAuth middleware gates protected routes such as /dashboard and /events/create.

4

Auth flows call Flask, receive JWTs, and store session context through NextAuth callbacks.

5

Event mutations validate input, optionally upload to Cloudinary, then call protected Flask endpoints.

Key Challenge

Bridging a custom Flask JWT backend into modern Next.js sessions. A NextAuth credentials provider authenticates against the API and synchronizes its tokens through JWT encode/decode callbacks, so a non-NextAuth backend still drives App Router middleware and protected routes.

Tech Stack

Languages

TypeScriptPython

Frameworks

Next.js (App Router)ReactFlaskNextAuthTailwind CSS

Infrastructure

SQLAlchemy (relational DB)CloudinaryVercel

Tooling

react-hook-formzodRadix UIFlask-MigratePytest

Want to see it in action or read the code?

Back to all projects