So, we all agreed to keep the website's look consistent. It took me almost a week to finish the design, set up the site, and pick the content. Since this was my first big project, I'm thinking of writing a blog about the process and why I made those decisions.

The entire website got rewritten twice. At first, I used Astro, but since it's a niche framework, I realized it might be hard for others to manage the site later on. So, I switched to Next.js. This was also the first site I created entirely from scratch, no templates or themes used.

Apart from the awesome dynamic themes using CSS variables — check out https://bi0smeetup.in/meetups/8 and play around with the number 8, going down to 1 — and the custom shadcn UI components that perfectly fit the site's theme, there's not a lot more to say about the frontend.

So, the website is actually built using a full TypeScript stack. We use Prisma and Neon PostgreSQL db for data storage, and Next Auth for authentication. Our aim was to set up something like Luma but with more control over our development. If you take a look at the user experience flow, you'll see it's similar to Luma, and we did borrow some of their UI too. And hey, if anyone from Luma is reading this, you all made an awesome web app! However, because of our design scheme, we had to start from scratch.

Back when we didn't have authentication, we simply took form responses and added them to Prisma. We relied on the useLocalStorage hook for state management. I realize this wasn't ideal as it impacted everything. It was also inefficient because a user could forget they registered for an event and try to register again from a different device. Since the venue provider had limited seats, we had to opt for authentication.

So, I decided to go with React Hook Form and Zod for form validation because they're super light and easy to use. Zod's validation based on schemas is neat and lets me handle all validation in one place, which I find better than dealing with it in each input field separately.

I went with useLocalStorageState to check user registration. It's a super handy hook for keeping state in sync with local storage, even surviving page refreshes. This ensures users don't lose their registration info if they accidentally refresh, a nice touch for user experience.

In hindsight, it turned out to be a bad idea. Users can't tell if they registered from different devices, and without an expiry date, the next meetup page might still show you as registered.

Working with various meetups, I utilized the URL slug to dynamically load specific information for each event—such as fonts, colors, and descriptions. This allows each event page to have its own unique style while maintaining the site's consistency. Also, manually hard-coding all meetups would have been cumbersome—it's much easier to manage and scale this way.

Let's talk about UX. I'm not someone who delved into human philosophy to grasp user experience, but having to fill out forms every time during testing made me question its necessity. There was a point when we debated the need for authentication on a meetup page that simply displayed event information. However, we realized authentication was essential for future paid workshops, setting a strong foundation. Meetups will always remain free, but we aim to provide workshop materials exclusively to attendees rather than making them public—although with some website tinkering, you could still access them.

The code is pretty much copied from the Next Auth docs website and adjusted to include onboarding features that will be added later. We plan to request users for their phone number, preferably WhatsApp, to send an RSVP message via the bot. Also, we'd like to collect LinkedIn profiles to understand the industry and university distribution of our users.

We wanted to make signing up even easier by sending confirmation emails right after users register. We used Resend with React Email to send personalized emails. This gives users instant confirmation and adds a nice touch to the experience.

Additionally, we came up with a cool idea for event management - a QR code check-in system. Users receive a unique QR code in their confirmation email, allowing them to check in by simply scanning it at the event. This speeds up the check-in process, makes it contactless, and helps us keep track of attendance efficiently. By automating emails and using QR codes, we're streamlining our processes and ensuring smooth operations on event day.