Projects

Hautedrop

The Objective

Develop a curated email & SMS notification system for luxury fashion enjoyers.

Placeholder

I found Gaurav on Reddit after he posted in the Next.js community. He was looking for a developer to collaborate on some projects, so I sent my portfolio his way. After discussing a few of his ideas over the phone, we settled on our first project: a luxury product release notification service called Hautedrop.

His vision involved a simple landing page where a user can sign up to receive daily notifications for specific brands, categories, and demographics by entering in their email and/or phone number into the form. Any time there are new products launched, they would receive an email and/or SMS message to notify them. This way, they wouldn't need to sign up for dozens of newsletters or keep their eyes peeled on all the relevant retail websites. All of the product releases that they care about would come straight to them in one daily notification.

However, these daily notifications turned out to be a tougher challenge than anticipated! It turns out that our SQL query was just complex enough for Vercel to time out the daily CRON job before it even had the chance to send a single email. In the end, I opted to use Inngest to handle all async tasks, such as triggering the daily notifications and sending each email and SMS via the fan-out pattern. It has worked flawlessly ever since.

A view of the product launch dashboard

Backend Features

Gaurav intended to hire data entry staff to track product releases and he would need a way to provide feedback and prevent any mistakes from being sent out with the notifications. So, I created a custom administrative dashboard with role-based access control.

Adding a new product is as simple as clicking the "Add launch" button, which opens a modal window with the form. As soon as the data entry person submits their releases, it appears within seconds on the administrator's dashboard.

If a product launch is rejected, the data entry person can also easily edit and resubmit.

A demonstration of the modal window with conditional autocomplete field

UI Enhancements

Even though this project was an MVP, I felt it was important for the data entry person's user experience to be as smooth and intuitive as possible. I developed custom select boxes with search functionality to make finding a brand as quick and simple as possible.

Upon selecting a brand, a filtered category dropdown appears, to ensure you don't need to scroll too far to properly classify the products being launched.

A demonstration of the brand filter

Frontend Features

We went through several iterations of the sign-up form and finally settled on a card-based layout. Using a combination of react-hook-form and a custom implementation of Isotope, I created an interactive, mobile-friendly, animated, searchable gallery of brand logos that operate like a checklist.

The brand section of the form is filtered based on the categories that a user selects at the top. For example, if you decide that you only want to subscribe to notifications about brands that offer Watches, the brand section will automatically display brands such as Rolex while swiftly hiding any irrelevant options.

An animation of an iPhone with notifications displaying

iPhone Animation

Using react-spring, I created a custom animation of an iPhone receiving notifications about luxury product releases. Every 5 seconds, it triggers an additional notification until all four have appeared.

A demonstration of the infinite loading table of products

Luxury brand data at your finger tips

To avoid spamming SMS subscribers, we provide them with a link to their own personal dashboard of product releases. This dashboard includes an infinite loading table of product launches. They can scroll down and browse everything launched in the last 24 hours, or toggle "Show All" to view all launches that we've notified them about since they've subscribed.

Additionally, subscribers can filter the table by category or use the search bar at the top to filter for specific brands or items.

Alecia exceeded all expectations on this project. She delivered high-quality work on schedule and was a pleasure to collaborate with. Truly impressive!
Gaurav Taneja, founder of Hautedrop

Like what you see?

Let's Build Something

Work With Me

With over 20 years of programming expertise, I specialize in turning complex ideas into impactful, user-focused solutions. From developing and maintaining products used by millions—like video chat platforms and exam software—to creating custom dashboards and levelling up SquareSpace, WordPress, and Wix sites, I can execute your vision from concept to completion, from frontend to backend, and everything in between.

I don’t just build software; I solve problems, streamline processes, and deliver results to maximize your online presence.