Evento

Event Discovery Platform

A fast, animated event discovery platform for browsing events by city.

September 2025 · Solo Project · ~1 month, part-time (Aug–Sep 2025), plus a production fix in Oct 2025

Project Overview

Overview

Evento is a modern event discovery platform where users can explore events happening in different cities. Built with Next.js (App Router), TypeScript, Prisma, Tailwind CSS, and Framer Motion, it lets users search by city, browse paginated event listings, and view event details with smooth scroll-based animations.

Problem

Discovering local events is scattered across too many single-purpose apps. Evento's goal was a single, fast city-based browsing experience, with motion that makes exploring feel good rather than just functional.

My Contribution

Designed the Prisma schema and database access layer
Built city-based dynamic routing with server-side pagination (Prisma skip/take)
Implemented scroll-linked Framer Motion animations on event cards and the nav underline

Implementation

Key Features

City-based event browsing via dynamic routes
Prisma-modeled event data with server-side pagination
Zod-validated route params for safe pagination
Scroll-linked Framer Motion animations on event cards and nav
Responsive UI built with Tailwind CSS, tuned for mobile through 4K

Tech Stack

Frontend

Next.js 15TypeScriptTailwind CSSFramer Motion

Backend

PrismaZod

Technical Challenges

Solution

Replaced the fetch-based data layer with direct Prisma queries inside Server Components, wrapped in unstable_cache, and marked the DB layer server-only so the client bundle never sees it.

Result

Fewer round trips, smaller client bundle, and no risk of DB credentials leaking into client code.

Architecture & Data Flow

Project Walkthrough

Lessons Learned

Keeping DB access in server-only, cached functions keeps Server Components fast and secure by default
Framer Motion's layoutId is a clean way to animate a shared element (like a nav underline) without manual state
Test builds against the actual deploy target early — a static-generation strategy that works locally can fail silently in a serverless build environment

Project Overview

Overview

Problem

My Contribution

Designed the Prisma schema and database access layer
Built city-based dynamic routing with server-side pagination (Prisma skip/take)
Implemented scroll-linked Framer Motion animations on event cards and the nav underline

Implementation

Key Features

City-based event browsing via dynamic routes
Prisma-modeled event data with server-side pagination
Zod-validated route params for safe pagination
Scroll-linked Framer Motion animations on event cards and nav
Responsive UI built with Tailwind CSS, tuned for mobile through 4K

Tech Stack

Frontend

Next.js 15TypeScriptTailwind CSSFramer Motion

Backend

PrismaZod

Technical Challenges

Solution

Replaced the fetch-based data layer with direct Prisma queries inside Server Components, wrapped in unstable_cache, and marked the DB layer server-only so the client bundle never sees it.

Result

Fewer round trips, smaller client bundle, and no risk of DB credentials leaking into client code.

Lessons Learned

Keeping DB access in server-only, cached functions keeps Server Components fast and secure by default

Framer Motion's layoutId is a clean way to animate a shared element (like a nav underline) without manual state

Test builds against the actual deploy target early — a static-generation strategy that works locally can fail silently in a serverless build environment

Project Overview

Overview

Problem

My Contribution

Implementation

Key Features

Tech Stack

Technical Challenges

01Client-side fetch calls to an API route were adding an unnecessary network hop and duplicating data-fetching logic.

02generateStaticParams for event detail pages worked locally but failed during the Vercel build — no DB connection is available at build time in that environment.

03The layout only defined responsive styles up to Tailwind's lg (1024px) breakpoint, so the UI looked identical from a tablet up through a wide desktop monitor.

Architecture & Data Flow

Project Walkthrough

Lessons Learned

Project Overview

Overview

Problem

My Contribution

Implementation

Key Features

Tech Stack

Technical Challenges

01Client-side fetch calls to an API route were adding an unnecessary network hop and duplicating data-fetching logic.

02generateStaticParams for event detail pages worked locally but failed during the Vercel build — no DB connection is available at build time in that environment.

03The layout only defined responsive styles up to Tailwind's lg (1024px) breakpoint, so the UI looked identical from a tablet up through a wide desktop monitor.

Architecture & Data Flow

Project Walkthrough

Lessons Learned