⚡B.Y.O.N: Revolutionizing Party Booking with Next.js and Nylas

This is a submission for the Nylas Challenge: Galaxy Brain.

What I Built and Why

I built a full-stack party booking website called B.Y.O.N (Bring Your Own Nylas) where users can discover and book passes for parties or events in their city. Users can also host their own parties, making them available for others to book. The platform provides hosts with tools to manage guest lists and communicate with guests via email.

The motivation behind building this project came from a personal experience during a night out with friends. We wanted to get into a club but had to contact a promoter to be added to the guest list. The person checking the guest list was using an old-school notebook to verify names, which caused delays, despite the club being quite expensive. As a developer, I quickly started thinking of a way to automate this process, eliminating the need for middlemen and digitizing the check-in process. This led to the idea of creating an application that helps clubs host parties or events on a single platform, allowing people to bypass promoters and get on the guest list easily. Additionally, the app allows individuals to throw their own parties as well.

Demo

Code

• Checkout the features of the app here in BYON Github Repo.

• If you want use the application here's the LIVE Version.

How The App Works

1. Homepage ("/")

• Welcome and Introduction: The homepage provides a brief description of BYON.

• Login Button: Only a login button is available on the header.

2. Login Process

• Redirect to Login Page: Clicking 'Login' redirects users to the login page ("/login").

• Protected Routes: All routes except the homepage are protected; unauthorized access redirects to the login page.

• Authentication: Users are authenticated via Nylas using their Gmail ID.

• User Profile Creation: A unique user ID is created in Supabase, stored for future logins.

• Session Management: Upon successful login, session information and JWT are stored in cookies for authentication checks.

3. Post-Login User Experience

Events Page ("/events"):

• Display of Events: Shows ongoing events in Delhi NCR, Mumbai, and Bengaluru.
• Event Filtering: Users can filter events by city.
• Event Details:

Event Details Page ("/events/[eventId]"):

• Displays event specifics like name, location, price, etc.
• Booking: Users can book a pass for the event, creating a new booking in Supabase. A confirmation email is sent using Nylas Email API.

4. User Account Management

Account Page ("/account"):

• Profile Information: Displays and allows updates to user profile information.
• First-Time Login: Displays the user’s email; other fields (name, city, contact number) can be updated.
• Update Profile: Users must update their full name to book events.

Account Menus:

• Profile ("/account"): View and update personal information.
• Activity ("/account/activity"): Lists upcoming and past events booked by the user.
• Host a Party ("/account/host"): Explains benefits of hosting and includes a 'Create Event' button.
• Manage Events ("/account/manage"): Lists active and expired events hosted by the user.

5. Hosting and Managing Events

Create New Event:

Event Creation Page ("/new-event"):

• Users can create new events which are immediately available for booking.

Manage Active Events:

Edit Event ("/account/manage/[eventId]"):

• Allows hosts to edit event details.

Manage Guestlist ("/account/manage/guestlist/[eventId]"):

• Displays attendees and offers options to remove, check-in, or email attendees.

6. Guestlist and Email Management

Guestlist Features:

• Attendee Management: View attendee names and emails, remove attendees, check them in, or send emails directly.
• Mass Email Options: Send Email to All Attendees: Sends an email to all attendees at once using Nylas Email API.
• Schedule Email: Schedule an email to be sent at a specific date and time.
• Manage Scheduled Emails: View and delete scheduled emails if necessary.

7. Sign Out Process

• Logout: Clicking 'Sign Out' deletes the session from cookies and redirects the user to the homepage

Your Journey

During this challenge, I leveraged the Nylas API to handle email communications between party hosts and guests. This was my first Next.js project beyond the "tutorial hell," and I encountered numerous challenges in making everything work together. However, I succeeded in bringing to life the application I had envisioned, and this experience has significantly boosted my confidence in using Next.js.

One of the biggest hurdles I faced was implementing Nylas hosted authentication, something I hadn't done before. I vividly remember the moment when my login finally went through and the session was returned. But right after that, I realized I needed to figure out how to use the session to grant users access to the app. After some digging, I managed to use cookies for generating the session. This project was a significant learning experience, and I'm particularly proud of overcoming these challenges to create a functional and polished application.