Building and Shipping a Real Product in One Day - My Late-Night Sprint With Next.js, Supabase, Stripe, pizza, F1, coffee, and a lot of stubbornness

Building and Shipping a Real Product in One Day

Written by Massa Medi

I gave myself a challenge: build a fully functioning product in less than 24 hours. I wanted it out, working, and live before the next morning. No excuses. I had plans tomorrow, something new and important, so it had to happen tonight. I decided to document everything - the setup, the small wins, the annoying blockers, my thoughts in the moment, the workflow, and the tiny details that usually get lost. This read is the blow-by-blow of what I did, exactly in the order I did it, plus the raw truth of how it feels to sprint through a build like this.

This piece is a little different from my usual posts. I’m writing it like I talk, with screenshots described in words and every step included so you can follow how the project evolved in real time. No fluff. Just a real day in the life of spinning up a product from zero to live.

Kickoff - Setting the timer, picking a name, booting the stack

First move: create the path for a new project. I called it Cool Follow Account. The name sums up what the product is about - it revolves around follower counts, snapshots, and making them look clean. Names can change later. The point is to start. The working title gave me a mental picture and a direction to code toward.

Then I went straight for the stack. I ran the command I use to pull my favorite combo together: npm i starter. This is my quick way to wire up Next.js with Supabase and Stripe in one go. Next.js gives me server-side rendering and fast routing out of the box. Supabase covers auth and a backend I don’t have to babysit. Stripe handles payments so I can actually charge money on day one. Installing them together saves 1 or 2 hours of boilerplate. When you are racing a clock, these hours matter.

I hit Enter, got a coffee, and watched the dependencies roll in. Then, plot twist. Yes, I changed the hoodie, but I also burned a whole hour on package problems. Next.js 16 had just dropped and the freshness broke parts of the stack. I did not need that. I rolled back to 15.5 because I wanted stability and I did not want to explore changes mid sprint. There is a time for curiosity and a time for shipping. Tonight was shipping.

With that fixed, I could finally start working on the actual product instead of wrestling versions. So yeah, from here on, it is game on.

Hour 1 - First UI passes, Discord call, and the flow shaping up

One hour in I took a quick brightness bump on the screen and looked at the progress. I had set up the hero section. It still had placeholder text that did not match the product context, but the structure was on the page. This early screenshot would make sense soon, I just needed to drop in the right copy.

While that was coming together, I was on Discord chatting with a friend. We caught up a bit, so my hands-on time was around 40 minutes, but the UI was already taking shape. This is where being efficient with templates saves your brain for the logic. The visual first pass was in, the bones were right, and I knew what to fix next.

I still needed to implement login, the Stripe payment flow, the middleware to guard routes, and the overall app flow from landing to purchase to download. That is the heart of the app. On the UI side, though, we were in a good place.

Landing page structure and reused components

The landing page started with a hero that I pulled from DPs Templates, which is my other app. That app is a library of ready-to-go sections and blocks. I built it for myself, and now I rely on it a lot because it lets me stop reinventing headers and focus on the actual product. I knew I would need to change the text, maybe adjust spacing and tone, but the layout was clean and familiar. That speed boost matters.

Below the hero I added the Create section. This is where the magic happens. You see a count input, and the idea is simple: you enter your follower count, and the system compiles the right snapshot layout for you automatically. Think of it as a clean generator that gives you a share-ready image. In the early state, it looked the same as the screenshot in my head. It just was not wired up yet. It was close. It was about to click.

9:00 pm - Logic, mobile polish, naming, and pizza

By 9:00 pm we hit a good point. I had made the base logic to push the UI beyond just looks. I also redesigned parts of the mobile UI because if it does not work on a phone, it does not work. That included spacing, button sizes, and making sure the interactive parts were thumb friendly.

I needed a domain and a logo. I wanted to keep it simple and not get lost in a rabbit hole. I thought about firing up ChatGPT to toss some names around for this kind of website. Nothing fancy. Just something that says what it does and is easy to remember. I would decide soon.

Pizza was about to arrive. The plan was clear: eat, finish UI, then at 11 pm watch F1 qualifying, grab a coffee right after, and then wire Stripe. I thought I would end around 3 am or 4 am. I hoped so. I like pushing late when the energy is right.

Post-pizza sprint - the input flow and the little arrow

Pizza gone, I got back to it. I touched UI behaviors and stitched more of the logic behind the scenes. Then I tested a simple flow: the main input.

How the follower input compiles your snapshot

You see an input field. You type, say, 500. Then you tap this little arrow. The arrow is a submit shortcut so you do not have to reach for Enter or click a giant button. When you click it, the form compiles the follower count for you into the final format. If you put 1,000, the form compiles that with a hundred plus style, which formats the count clean and aligned with the template standards I am using. If you punch in 5,000, the increments go by five hundred. That way the layout looks neat and the spacing holds. And so on for bigger ranges. It reacts to the thresholds on purpose so the final image never looks weird.

I ran through a few values and watched it fill the right slots. It felt good to see it move. The demo was solid.

Mobile quirks and the download format

On mobile, the text could get too big and the phone screen is just small. That means typography can invade the edges and the image crop can feel cramped. I needed a better download experience on smaller screens. I debated making a different download format for mobile, but I think I will keep it the same across desktop and mobile because this layout is the best format for this image style. I would tune the sizes, not the format.

Meanwhile, it was almost 11 pm. In 10 minutes F1 qualifying was about to start. I planned to watch until midnight - noon would be wrong since noon is morning - then make a coffee. This is my version of a Saturday night. Pizza, a cold Coca Cola, later a coffee, and a brand new project I want live in one day.

Other people go clubbing. I build. This is fun. And why is it fun? Because I am going to get money. How do I know? I do not know. I just feel it. Sometimes you have to trust the pull. I call it a privilege - building a startup while watching F1, drinking Coke, then switching to coffee. This little project would be done by tomorrow morning. That was my promise to myself.

Hate me wherever you want, however you want, how much you want. I’m grinding. You’re not. I’ll see you on the top.

Midnight shift - F1, coffee, and back to the keyboard

There was a lot going on in qualifying. Verstappen was sitting in fifth, but a clerk and I’m second and third - wild mix on the board. I was rooting for a twist. I wish Verstappen gets the fifth. Jesus. He needs to. He needs that for the sport. Tomorrow we would see the real grid shake out.

I could feel I was getting tired. It was a long day already, so I got up to make a coffee. Then I sat back down and went straight back to work.

1:30 am - The boring part that makes the money: Supabase and Stripe

We were at a good point. Result view working. Now the boring part: wiring Supabase and Stripe. It was 1:30 am, so I gave myself one to two hours to finish. I had code I could lift from other projects, but you still need to remember the setup steps or you waste time. Things like generating and storing the GitHub token for deploy flows, setting the Supabase API keys, connecting webhooks, and making sure environment variables are right. These are not glamorous, but they are what make a project real.

I stayed positive because I had done this twice before. Third time should be easier. At least that is what I told myself.

What was still missing - the checklist I wrote at 2 am

I wrote everything still missing on the site. It was 10 items, and they were not in order. Getting them out of my head cleared space to code faster. Here is the list exactly as I wrote it in the moment, with the same little typos and all, plus some context so it makes sense if you are following along:

  • Favicon - already did. I still wanted to compress the image a bit for the favicon to keep it crisp on high DPI.
  • Compress the image to do the Favicon - this was a reminder to run it through an optimizer.
  • Supervis integration - meaning Supabase integration, auth plus any DB if I needed it later. Login is a must.
  • Login - the session had to persist correctly across routes.
  • Stripe - product setup, pricing, checkout, webhook, and the public key swap to live.
  • Pricing section check - make sure the $4 one time reads clearly and the value is obvious.
  • User session for the load - session check on load so the app knows if you already paid.
  • Metadata, body - fix the HTML metadata, title, description, and the body class stuff.
  • Domain - buy it, connect to Vercel, and switch to live.
  • OG image and analytics - set the Open Graph image and hook analytics to track what matters.

Time check: 2 am. Would I finish by 4 or 5 am? I did not know. If you are reading this, pause and guess the time you think I finished. I guessed 4:30 am. Let’s update that in a second.

3:00 am - Login done, Stripe pain ahead, and tools that help

3:00 am hit and the login worked. That felt good. Now Stripe. Stripe is always a bit of a pain in the ass to set up. Not because it is bad, but because payments are exact and you cannot fake them. Every little setting matters, and you cannot hand-wave an endpoint.

Luckily I have two projects with the 1:10pm stripe setup - basically, I have working examples to pull from, the same product pattern and checkout flow I trust. I also used Cursor to help move fast. Cursor is an AI-powered editor that can nudge you when you forget a method name or a path, and at 3 am those nudges are gold.

I hoped that by 4 I would have almost everything done. I still needed to buy the domain. I had found one, but I had not paid yet. It was 3 euros or 3 dollars. I did not even remember. I also wanted to polish the metadata for sale - then I corrected myself - SEO. You know what I meant. I would see you in half an hour. Or an hour. Or whenever Stripe stopped fighting me.

Finishing the See Results button, live keys, and the deploy plan

I wired the See results button so that when a person wants to view the output of the product, they get the final image. At that exact moment I put the logo there just for testing, so you would not see the real image yet. That was temporary. Once the output pipeline was stable I would switch the source to the actual generated snapshot.

Next step was setting the Stripe account to the public one - live mode, not test. After that I would push to Vercel. That is the moment a project turns into a link you can share.

Then it was 3:40 am and I realized I did a dumb thing. I bought followsnapshot.art instead of followersnapshot.art. You read that right. I missed a syllable when I checked out. Classic 3 am move. Should I buy another domain or not? Probably not tonight. The end was close and I did not want to break the rhythm.

4:15 am - Done coding, time to record, and shipping to Vercel

4:15 am. Done. I recorded the screen so I could show what I had built instead of just telling you about it. Then I went to publish on Vercel. I would leave the link down in the description so you could try it yourself.

What the live site looks like

Landing page first - the hero section up top explains what you get. Right below, there is a clean visual that previews the exact result you will download. No mystery. Just a clear snapshot of the final image so you know what you are paying for.

Pricing is simple: $4 one time. Unlimited devices, unlimited images, lifetime access. No subscriptions. I like one-time deals for small utilities because they remove friction. People decide once and they are in.

Then the Create page. To download the image, you pay those $4 and then you are basically in forever. From there, you can pick whatever you want. For example, I had just reached 1,400 followers on X. I typed that in and downloaded the image. That was the result. Clean, ready to share, and on brand.

5:10 am - Brain fog, checkboxes, and a live domain

At 5:10 am I no longer knew my name, but I was satisfied. I built a product from scratch, from 0, from 7 pm to 5 am. I am not even sure how many hours that is. Less than 12. Maybe 10 or so. Time blurs when you are deep in it.

I checked the last checkbox on the whiteboard. Analytics were done. Domain was public. The website was live at this address: followsnapshot.art. It was 5:00 am. Then 5:20 am. Product done. Built in one day. From 7 pm to 5:20 am. The link worked.

I would publish everything tomorrow. I had recorded the whole day, so tomorrow you would be able to see the full process and the story of the build on YouTube. Right then I needed to go to bed. The light was hurting my eyes. Still, I was proud and happy.

A tiny bug I left for morning

The only thing bugging me was the OG image. The Open Graph image did not show at share time. If you put the direct path, it showed, but it did not auto-populate in previews. That is one of those tiny config gremlins where a path or cache is wrong. Not a blocker for sleep. Just a note for tomorrow me.

Thank you for watching - that is what I said to the camera. Then I shut almost everything down.

Considerations at sunrise - speed, deadlines, and doing the thing

Here is the thought of the day as I closed the laptop: you can just do things. I did this because I am a bit crazy and I like to push stuff to the extreme. I could have waited. I could have stretched this out across three or four days. But I heard Elon Musk say something that stuck with me: shrink your deadline and you will be surprised by how many things you can do.

Speed matters in this business. Today I decided it was time to push. I am happy I did. I am happy I am still alive. It was a grateful experience, a nice experience, and if this comes with some money, I will be even happier.

You can try the website - the link is down in the description. Right now I just need to switch everything off and close my eyes. I am not sleepy, but I am tired mentally, and my eyes are praying for help. Oh my, this was a good one. You can just do things. Start acting right now. Just do. Just do it, as I said.

It has been a pleasure. I hope this video was liked by you. I do not even know if you say it like that. I have lost the capability to think. Thank you for watching and I will see you in the next video.

Fast forward to the next day - 1:41 pm, a fix, and the first sale

Fast forward. It is 1:41 pm. I just finished eating. I woke up at 10:30. So 4 hours and a half asleep. 4 hours sleep, actually, because I needed to fix some issues with login and payment. Now everything works.

And we woke up with a sale. Look at this. We made our first internet money with this product. I thought about ending the video last night, but this had to be in. First sale changes the whole mood. It proves the hunch was not just a hunch.

I cannot wait to scale this up. I think it has potential, maybe to 10 users, maybe 50. I do not know. We will see. For now, thank you for watching. I will see you in the next video.

What I learned from this one-day product sprint

If you read this far, here is the bottom line in my voice, the same one that was speaking at 3 am with a Coca Cola on the desk. Shipping fast works if you commit. You do not need to overthink names, logos, or the perfect headline. You need a clear promise, a working path from landing page to payment to value, and a reason to care. Coffee helps. A lot.

  • Pick a stack you trust - I used Next.js, Supabase, and Stripe because they let me move without fighting basics.
  • Reuse components - I pulled a hero from my own DPs Templates so I could focus on logic.
  • Decide pricing fast - $4 one time, unlimited everything. Clean choice. No second guessing.
  • Keep the list of missing items - writing the checklist at 2 am stopped my brain from looping.
  • Deploy when it is good enough - push to Vercel, point the domain, fix the OG image tomorrow.

And yes, sometimes you will buy the wrong domain at 3:40 am. You laugh, keep going, and still ship.

Closing note

I built and shipped this in one day - from 7 pm to a little past 5 am - recorded the day, woke up, fixed the last bits, and the first sale came in. That is the kind of loop that reminds me why this is fun. While some people were out on Saturday, I was glued to the screen with F1 in the background, pizza and Coke on the desk, and a coffee in hand. This is fun because I get to create something that might make money while I sleep. I do not know how far it will go, but I feel it. And for now, that is enough to keep building the next one.