Joechella
A custom event website for a joint birthday celebration. Included event details, idea submission, voting, and notifications. Built with Next.js.
A couple of friends and I have birthdays close together, so in 2023, we planned a joint birthday weekend. Since we were hosting, I thought it’d be fun to try out Next.js and build a custom site for the event.
It started as a simple event details page, but as I explored the tech stack, I expanded it with a few key features:
- Idea submission
- Following and voting on ideas
- Notifications system
Implementation ⚙️
Tech stack
This project predates my current platform setup, so the setup differs slightly from newer projects.
Frontend:
Backend:
- NextAuth.js - Authentication
- Prisma - Database ORM
Infrastructure:
- Supabase - PostgreSQL database hosting
- Vercel - Application hosting
- GitHub Actions - CI/CD
Landing Page 🖥️
The landing page had a nice animated background (using the “Halo” effect from Vanta.js), and a simple login modal.
Event Page 📅
After logging in, users were taken to the event page. This showed the main details and included a countdown timer for when our guests would arrive from out of town. There was also an embedded Spotify playlist that users could add to.
Ideas Page 💡
One of the main features was letting users submit and vote on ideas for activities. Each person had five votes to use however they liked — a fun way to involve everyone in planning and surface the most popular ideas.
Ideas could be viewed in more detail, edited by the original author, and commented on.
Users could follow an idea by clicking the bell icon. When someone commented or replied to an idea they followed, the notification icon in the top-right would show a red badge for unread updates.
Notifications 🔔
Clicking the bell opened a notifications page showing all recent updates. Clicking a notification marked it as read and navigated to the relevant page — simple UX that suited the short-term nature of the project.
Reflections 💭
This was a fun project to bring to life. Next.js felt quite polished and Mantine made it easy to build out the interface. While it didn’t have full-fledged implementations for certain things like notifications, I was able to build a simple system that worked well for the site’s purpose.
Was it overkill? Absolutely. Could we have just used a Facebook event? Sure. But it was the perfect excuse to experiment with new tech and create something fun for the occasion.