Forem: Jonatã Oliveira

I built a romantic app to surprise my wife. See what I learned from it.

Jonatã Oliveira — Mon, 29 Dec 2025 15:26:37 +0000

A few months ago, I wanted to surprise my wife with something more meaningful than just a message, flowers, or a generic gift.

As a developer, I thought, "What if I build something?"

That idea turned into LoveMemo, a mobile app that lets you create a romantic public page filled with photos, music, a personal message, a relationship timer, and a QR code to reveal the surprise.

This post is not about "how to get rich with apps." It's about building a product from start to finish, from idea to App Store, and the technical choices I made.

The Original Idea (and the Pivot)

LoveMemo didn't start as a romantic app.

At first, it was a photo-sharing app for events like weddings and parties, where people could upload photos using QR codes. The technology worked, but something felt off:

There was low emotional attachment.
It was hard to stand out.
Storing many files is expensive.
Users had weak motivation to pay.

When I created a romantic page to surprise my wife using the same core idea of QR to public page, everything clicked.

The tech was the same, but the emotional value was completely different.

That's when I decided to change the product, not the tech stack.

High-Level Architecture

LoveMemo has two main parts:

Mobile App (React Native / Expo)

Guides users step-by-step.
Handles photos, messages, music, and payments.
Generates the "memo."

Public Romantic Page (lovememo.app)

A lightweight, cinematic page.
Loads by ID shared through a link or QR code.
Optimized for emotion, not interaction.

This separation was intentional:

The app focuses on creation.
The website focuses on experience.

Mobile App Stack

Core

React Native (Expo)
TypeScript
Expo Router for navigation
Zustand for state management
MMKV for fast local drafts
InstantDB for authentication and database.

I wanted:

Fast iteration
One codebase
Zero friction for publishing updates

Expo provided exactly that.

UI & Animations

NativeWind (Tailwind for RN)
React Native Reanimated
Soft shadows, rounded corners, and a pink-based color scheme.
Decorative 3D-like elements (visual only, no heavy meshes)
Liquid Glass (ah yes, that's beautiful)

The UI was very important. If it doesn't feel romantic, the product fails.

Media Handling

expo-image-picker
Local previews
Upload only after payment to prevent waste
Background music via YouTube link (managed on the web side)

Drafts are saved locally, so users can leave and come back later.

Payments

I kept the pricing model simple: One-time purchase for one romantic page, active for a month.

I also removed every possible friction point related to payments. No payment screen, credit card form or checkout flow. The user doesn't even need to create an account to publish their memo. LoveMemo uses In-App Purchases, so payment happens with a single tap using Apple Pay or Google Pay.

Public Romantic Website

The public page is built with:

Vite + React (with SSG to improve SEO)
TailwindCSS
Framer Motion for animations

Each page:

Displays the couple's names
Shows a relationship timer
Plays background music
Animates photos in a cinematic slideshow
Ends with a personal love message

It's intentionally simple from a technical standpoint but visually rich.

Performance matters because:

Users often access it by scanning a QR code.
The "wow moment" must be instant.

QR Code as a Product Feature

One of the best decisions was to make the QR card a key feature.

Instead of just saying "share this link," the app generates:

A printable and shareable card
A QR code
A short romantic message

This transforms a digital product into something physical, which greatly increases its perceived value.

Launch & Marketing

I didn't start with ads.

I focused on:

TikTok organic videos
Product-led storytelling
Showing the reaction, not the app

The typical flow in videos:

Screen recording of the app
Showing the QR card
Scanning it
Revealing the romantic page

People don't care about features, they care about outcomes.

App Store Optimization (ASO)

ASO turned out to be more important than I expected.

Key lessons:

A clear title is better than a clever one.
Keywords matter more than the description.
Emotional screenshots work better than feature screenshots.

I also localized the store description in:

English
Portuguese
Spanish

What I'd Do Differently

I would validate the emotional angle earlier.
I would avoid building features without a strong reason.
I would spend more time on the first 10 seconds of the experience.

The pivot taught me that distribution and emotion are as important as the code.

Final Thoughts

LoveMemo started as a personal surprise and evolved into a product.

The technology wasn't groundbreaking. The idea wasn't complex.

But combining:

A clear emotional goal
Simple architecture
Strong user experience
Focused marketing

…made all the difference.

If you're building something, ask yourself, "Why would someone care about this?" That answer is usually more crucial than the tech stack.

Thanks for reading.

How I Built and Launched an AI-Powered SaaS in 10 Days with Minimal Effort

Jonatã Oliveira — Wed, 19 Mar 2025 18:34:29 +0000

The Challenge: Building a Mobile SaaS—Fast

As an indie hacker, I’m always looking for ways to build and launch projects quickly. I had an idea for an AI-powered meal tracking app that could analyze food images and estimate calories, proteins, and other nutrients. But instead of spending months coding everything manually, I wanted to see how much I could leverage AI to accelerate the process.

The goal was simple: launch a functional and monetizable SaaS in record time, with as little manual coding as possible.

The Tech Stack

I used a modern stack optimized for fast development and scalability:

Frontend: Expo (React Native)
Navigation: expo-router
Backend & Authentication: Appwrite (Google & Apple Sign-In)
Styling: NativeWind (Tailwind for React Native)
Localization: expo-localization + i18next + react-i18next
Payments: react-native-purchases (RevenueCat)
State Management: Zustand
Data Revalidation: TanStack Query
Forms: React Hook Form
HTTP Requests: Axios
Local Storage: MMKV
Ads: react-native-google-mobile-ads

The AI-Driven Development Workflow

Step 1: Generating the Base Project

Instead of manually setting up the project structure, I wrote a detailed prompt describing the app and used bolt.new to generate the initial codebase. I also included reference UI screenshots to guide the generation process. This alone saved hours of boilerplate coding.

Step 2: The Power of `context.md`

One of the most critical steps in this process was creating a context.md file. This document contained all the details about the project—architecture, features, folder structure, and coding conventions. Every time I needed to add a new feature, I provided this file as context to AI tools like Cursor and AI Agents, ensuring that the generated code followed the same patterns and structure.

The more detailed context.md was, the better the AI-assisted development became. This approach helped:

Maintain consistency across the codebase.
Reduce the need for manual refactoring.
Speed up feature implementation significantly.

Step 3: AI-Assisted Iterations

Once I had the base project, I used Cursor as my AI-powered IDE to fine-tune the app. Any time I needed to create new features, I asked AI agents to generate code while ensuring consistency by referencing context.md.

This approach allowed me to:

Quickly scaffold new screens and components.
Maintain a consistent coding style across the project.
Avoid repetitive tasks and focus on refining user experience.

Step 4: Automating Marketing & Copywriting

I didn’t stop at development—AI also helped with marketing. Using AI tools, I generated:

App Store & Play Store descriptions (optimized for ASO).
Launch texts for ProductHunt & Reddit.
Social media posts for Twitter (X).
TikTok video scripts to promote the app.

This meant I could focus on shipping while still ensuring the app had a strong launch strategy.

The Outcome

With AI handling around 80% of the development and marketing work, I was able to:
✅ Build a working prototype in just a few days.
✅ Integrate payments & gamification to make the app engaging and profitable.
✅ Launch the app without hiring a team or spending months coding manually.

Lessons Learned & Key Takeaways

1️⃣ AI doesn’t replace developers, but it massively speeds up the process. Instead of writing every line of code, I focused on orchestrating AI-generated components.

2️⃣ Good prompts are essential. The more detailed my instructions, the better the AI-generated output.

3️⃣ A well-structured context.md file is a game changer. The more information it contains, the more consistent and efficient the AI-generated code becomes.

4️⃣ AI-assisted marketing is a game changer. Writing store descriptions, social media content, and launch posts took minutes instead of hours.

5️⃣ Fast execution beats perfection. The app isn’t “perfect,” but it’s live, and that’s what matters.

Final Thoughts

This experiment proved that launching a SaaS doesn’t have to take months (or even weeks). With AI tools, indie hackers can move faster than ever, reducing both cost and time-to-market.

I’d love to hear from others: Have you used AI to accelerate your development process? What’s your experience been like?

🚀 Let’s discuss in the comments!

👉 Try the app: NutriAI on the App Store

You can't generate a BTC wallet, they all already exists

Jonatã Oliveira — Wed, 31 Jul 2024 10:45:35 +0000

Have you ever wondered how Bitcoin wallets work? It might sound mysterious, but it's actually quite fascinating and surprisingly simple once you get the hang of it. Let's dive into the magic behind Bitcoin wallets and discover why they’re so secure.

The Big Secret: A Really, Really Big Number

At the heart of every Bitcoin wallet is a private key. Think of this private key as a secret password that gives you access to your Bitcoin. But here's the kicker: this "password" is actually just a really, really big number!

Imagine picking a random number between 1 and... a ridiculously huge number (we're talking 10^77). This number is your private key. It’s so large that it's almost impossible to guess, making it super secure.

Here an example of private key (decimal) and the code to generate:

52147378319558728862623655427315561659185315407517972433517332038732568592384

import { ECPairFactory } from 'ecpair'
import * as ecc from 'tiny-secp256k1'

const ECPair = ECPairFactory(ecc)

const keypair = ECPair.makeRandom()

const hex = keypair.privateKey.toString('hex')
//734a5ec40d22bd022b4377e620880236681384f6c985a3b8b30031d316edef2f

const dec = BigInt(parseInt(hex, '16'))
//52147378319558728862623655427315561659185315407517972433517332038732568592384

From Numbers to Addresses: The Role of Elliptic Curves

So, how does this enormous number (your private key) turn into something useful like a Bitcoin address? That's where elliptic curves come in. Bitcoin uses a special kind of math called elliptic curve cryptography.

An elliptic curve is a type of mathematical function that creates a specific shape when plotted on a graph. When you apply your big private key number to this function, it produces a unique point on the curve. This point is called your public key. From the public key your bitcoin address is generated and you can receive values.

In simpler terms, you use your private key (big number) to generate a public key using these math operations with elliptic curves. It’s like using a secret recipe to create a unique dish that only you can make.

Wallets: Ready-Made and Just Waiting for You

Here's a mind-blowing thought: all possible Bitcoin wallets already exist. Yes, you read that right! Every possible combination of private and public keys is already out there, just waiting for someone to pick one. When you create a new wallet, you're simply choosing one of these pre-existing combinations, randomly.

In fact, there is even a website that lists all possible Bitcoin private keys, including yours:
https://privatekeys.pw/keys/bitcoin/1

But don’t worry, with so many possible combinations (remember that ridiculously huge number?), the chances of two people picking the same private key are astronomically low. It's like picking a specific atom in the entire universe!

A small and obvious note: DO NOT SEARCH FOR YOUR PRIVATE KEY ON THIS SITE. You will lose your funds if you do.

Why Bitcoin is Super Secure

So, why is Bitcoin so secure? It all comes down to the size of that private key number. With such an enormous range of possible numbers, guessing the right private key is practically impossible. It would take a computer longer than the age of the universe to randomly guess your private key.

Conclusion

Bitcoin wallets might sound complicated, but at their core, they're based on some simple and clever math. Your private key is just a huge number, and it’s used to generate a unique public key through elliptic curve operations.

And remember, all Bitcoin wallets already exist; you're just choosing one out of an unfathomably large number of possibilities. This incredible number is what makes Bitcoin so secure and reliable.

So next time you open your Bitcoin wallet, you can smile knowing the incredible math and cryptography that keeps your funds safe. 🚀🔒

HTMX: Giving HTML Superpowers! 🚀✨

Jonatã Oliveira — Tue, 30 Jul 2024 03:25:50 +0000

What is HTMX? 🤔

Imagine if your HTML could do more than just sit there. Meet htmx, the magic wand that lets you sprinkle AJAX, CSS Transitions, WebSockets, and Server-Sent Events directly into your HTML. No more boring, static pages!

Why HTMX Rocks

Simplicity: Add interactivity without breaking a sweat (or writing tons of JavaScript).
Efficiency: Less JavaScript = fewer bugs. Your future self will thank you!
Progressive Enhancement: Works with your current HTML setup. No need for a complete overhaul. Sweet! 🍬

The Catch

Limited Flexibility: For super complex stuff, you might still need to call in the big guns (hello, JavaScript frameworks!).
Smaller Community: Not as many tutorials or StackOverflow answers. You might feel a bit lonely out there. 🌵

A Peek at HTMX in Action

Check this out! With htmx, you can load content dynamically without writing a single line of JavaScript. Magic, right? 🎩✨

<!-- Button that loads content from /hello endpoint -->
<button hx-get="/hello" hx-target="#output">Click me!</button>

<!-- Div where the content will be loaded -->
<div id="output"></div>

Backend Magic with Express

Here’s how you set up the /hello endpoint in Express to return content for your HTMX-powered page. 🛠️✨

// Express setup
const express = require('express');
const app = express();
const port = 3000;

app.get('/hello', (req, res) => {
    res.send('<p>Hello from the server!</p>');
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

My Two Cents

HTMX is like HTML on steroids – super cool and definitely interesting. BUT, mixing front-end and back-end code can get messy. Think tangled earphones messy. For now, I prefer keeping my code clean and scalable with a clear separation. 💡 What do you think?

Conclusion

HTMX gives HTML some serious superpowers, making it a nifty tool for adding interactivity. Despite its charm, I still wouldn't use it for serious projects because mixing front-end and back-end code can harm readability and scalability. But hey, it's definitely worth a try if you're curious! 🌟

Forem: Jonatã Oliveira

I built a romantic app to surprise my wife. See what I learned from it.

The Original Idea (and the Pivot)

High-Level Architecture

Mobile App (React Native / Expo)

Public Romantic Page (lovememo.app)

Mobile App Stack

Core

UI & Animations

Media Handling

Payments

Public Romantic Website

QR Code as a Product Feature

Launch & Marketing

App Store Optimization (ASO)

What I'd Do Differently

Final Thoughts

How I Built and Launched an AI-Powered SaaS in 10 Days with Minimal Effort

The Challenge: Building a Mobile SaaS—Fast

The Tech Stack

The AI-Driven Development Workflow

Step 1: Generating the Base Project

Step 2: The Power of context.md

Step 3: AI-Assisted Iterations

Step 4: Automating Marketing & Copywriting

The Outcome

Lessons Learned & Key Takeaways

Final Thoughts

You can't generate a BTC wallet, they all already exists

The Big Secret: A Really, Really Big Number

From Numbers to Addresses: The Role of Elliptic Curves

Wallets: Ready-Made and Just Waiting for You

Why Bitcoin is Super Secure

Conclusion

HTMX: Giving HTML Superpowers! 🚀✨

What is HTMX? 🤔

Why HTMX Rocks

The Catch

A Peek at HTMX in Action

Backend Magic with Express

My Two Cents

Conclusion

Step 2: The Power of `context.md`