Sole Mio

Really excited to be embarking on a new build with @teovito! It's an ecommerce checkout + admin system to facilitate bookings for the club. This one's a big project, which will probably take several weeks, and I'll share interesting technical details as the build progresses!

The way I'm approaching the build is like a painter. I'm going to build this in layers. Lay on the first coat of paint, let it dry, then another, and another. The first step, is to get as much of the app skeleton in place. The tech stack I've..

The tech stack I've chosen for this app is Express.js. The reason is simple, Express is the toyota corolla of javascript frameworks. No one will compliment you on it, but if you want to go to the moon and back (literally), you can trust a corolla to do the job.

As for design, we have a wireframe of the app, but we'll spend a bit more time on designing the checkout experience as part of the build process. I'll be sharing more around this as it happens!

This is going to be an exciting build. I got the clients permission to share some of the progress in public, so give me a follow if you want to see how this turns out :)

Which also makes design fun! This project is a longer time-frame project I'm designing+building for @teovito I love working with founders in helping solve real problems with code and design. And with permission, I'll be sharing how this project goes, so hit that follow :)

Before → After I've been working on the new booking system for Sole Mio, a really cool beach club in Dubai run by @teovito There are several customer facing pages, and one of the most important ones was the product listing page. The goal was to ..

..give it a fun beach-y vibe, and freshen up the user experience. This is one of the options I came up with and the client loved the direction, so we're running with it! I personally love it too, especially the header ❤️

We also worked on a new booking page which should provide customers with a better experience. Our main goal here was to keep things as simple as possible to ensure high conversion rates. It's still got a fresh look, easy date selector and straight to the point experience.

Next up, I'm designing the seat selector, which kinda works like an airline booking system. Here is the wireframe, which looks ugly, so we gotta make it look right! I'll be sharing how this turns out in a few days :)

I love working on my iMac because I can do this While I'm working on the SoleMio frontend, I can make edits, reference my Figma designs and see live updates to the browser. This feedback loop I think is especially important for frontend work!

I've been integrating payments for Sole Mio and I'm actually enjoying working with Stripe. The documentation is so well laid out, it's almost a pleasant experience. It's crazy because working with payments historically has been an absolute pain.

Working on this little date picker today It's always stuff like this that takes the craziest attention to detail and time commitment to get right So many ways to break UI of this sort I'm goin in' boys.

It's starting to get real.. The booking page now works and initiates a Stripe session with the correct tickets, booking date, customer info and discount code. Now I've gotta make this work on mobile 🫠

I've been building a booking/payments system for Sole Mio, a beach club in Dubai Here's a quick update on how things are progressing. I added some much needed core functionality. Customers can now view their receipt, refund their booking or modify the booking dates. cont..

This required thinking through my models/data structures, integrating with more Stripe endpoints and developing new user flows. The project is now moving quick. The user flows are starting to look more complete by the day. Next step, the admin system. Stay tuned!

Love building out pages like this.. they're super intricate and require an insane attention to detail. Getting the ocean pattern to repeat horizontally, or making sure the illustrations respond to varying browser widths, and ofcourse the seat selection stuff. This is fun.

Got the spot selector working on the Sole Mio project This was tricker that I first thought. Especially dealing with constraints like product types, availability, max-spots, etc And having to sync that up with the database/backend Still happy with the progress so far!

Ngl, I'm starting to respect airlines for building out their seat selection stuff It's not rocket science, but it's still fiddly Getting capacity, product type, availability, states, sync etc, to work perfectly together ... is interesting Now it's looking so fresh!

@MLCattaneo84 @teovito I really admire what you've built with Sole Mio! I agree with Marco, the leadership stuff trickles down to a happy customer.

The booking platform for Sole Mio (@teovito) is coming along amazingly! I'm loving how smooth the booking+spot selection process is. Still some kinks to sort out, but it's very close to production quality.

Done today: - Optimized the website for mobile use - Added a footer - Improved the booking page & login page - Fix minor bugs Next up: - Sending emails to the customer upon booking completion - Maybe auto-login user after payment - Admin system

The dashboard shown here is for a booking and payments platform I'm building for Sole Mio. It's been months in the making and we're launching soon. To hear about how it goes, give me a follow :)

It's solving for dozens of edge cases like this that takes so much time When changing the booking date, we have re-book to spot if it's unavailable for the new date I missed this initially, and when working on large apps, it's the details that make it "production ready"

And yes, still need to refactor the code to be a bit cleaner, but my goal is always: 1. Get it working 2. Make it work well

Another example is showing an icon for the phone number field It helps the user know they've filled this out correctly

I made booking codes just 6 digits so they are easy to remember for humans But long enough to not conflict with other bookings

I've been working towards launching multiple client projects this month. One of them is SoleMio. Since the project has real financial consequences and requires a lot of attention to detail, we'll be slowly rolling it out. A little about the tech stack I'll be using:

The Production setup looks like this: - Node - Tailwind - Railway - Supabase - Postmark - ReCaptcha - Stripe for Payments - Custom Auth, Admin, Payments flow, Booking management & more

This project has been months in the making! It's been so much work, but it's looking great now and was worth it. I think SoleMio customers will love it. For builds this complex, you can't just throw it into production. Too much is at risk. Millions in revenue, reputation, etc

The launch plan is: 1. Take to staging 2. Test internally for 1-2 weeks 3. Roll out just one product to production 4. Test in production for 2-3 weeks 5. Roll out the rest of the products 6. Continue to test/fix bugs/etc The goal is to build confidence in the system over time

Follow along to learn how I work on multiple high consequence builds myself and take them into production. Will be sharing 2 more projects in the coming weeks.