Club 101 Management App

Club 101 Management App streamlines membership registration, check-ins, and data handling for a thriving private nightclub in Rome.

Stack

Typescript
React
React Router
Tanstack Query
Tanstack Table

Live

View site →

Repo

Check code →

Project's Goal

Club 101 is a private nightclub in Rome, Italy. As a private club, all of its visitors must be registered members. Due to its recent rise in popularity, the club gets hundreds of individuals visiting each night. The goal of this app is to help the club's staff handle the managerial load connected with members, whose number rises every day.

Challenges

UI Design

From the start, it was clear that information clarity would be one of the top priorities. To achieve this, I decided to use Shadcn/ui, a clean-looking and proven React component library built on Radix UI, well known for its excellent accessibility.

The visual theme, including the color system, was heavily inspired by Radix Themes' style guide. While the app supports both light and dark modes, I put most of my efforts into optimizing the dark mode experience, considering the nightclub's working hours.

Because not all of the club's staff are fluent in either English or Italian, there was a requirement to have the UI bilingual, supporting both languages. I addressed this by keeping text information separate and dynamically loading it based on the preferred option.

shadcn/ui

Presenting Member Data

The club is quite popular, already having a substantial database of over 20,000 members. For each member, it has to manage detailed information, including personal, membership, suspension details, and account notes. This data needs to be easily accessible and visually clear for club staff across a variety of devices.

To meet these expectations, I decided to use TanStack Table, a type-safe React library that integrates seamlessly with our component library and provides great features. For instance, it offers client-side filtering, pagination, and more. To make browsing and pagination more seamless, I used infinite scrolling backed by TanStack Query as a caching solution and state manager.

Efficient Check-in

During rush hour, the club often sees tens of visitors arriving simultaneously. They all need to go through the check-in process before entering. Hence, check-in can become a significant bottleneck in the club’s operations. It involves searching for existing members, renewing expired memberships, and registering new ones.

To streamline this process and make it as seamless as possible, the app needed a great form UI. Fortunately, Shadcn/ui integrates well with React Hook Form. This library is not only type-safe but offers robust input validation and has become a de facto standard in the React ecosystem. In addition to using a trusted library, I ensured that the form fields can be quickly navigated using just a keyboard and are optimized for use across a wide range of devices. Part of this process was the creation of a custom DateField component, which I'm quite proud of as it required quite a bit of work to feel right and allow quick input.

Lessons Learned

Even though the project isn't finished yet, I already consider it a significant learning experience. While working on it, I've discovered how invaluable the type system can be, particularly for maintaining and revisiting my own codebase. Returning to a project after even a month-long break felt daunting at first, but having type-fueled code suggestions made the process much easier. It helped me to quickly orient myself in the code and reduce uncertainty and second-guessing.

I also delved deeper into working with forms. Optimizing them for the check-in process had its own set of challenges. Figuring out what to improve and how to implement those improvements was a rewarding journey.

Finally, I got to know some very cool technologies like React Hook Form, TanStack Table, and TanStack Query. I'll definitely be diving deeper into them and using them more often.