Breaking the code — building my first SaaS with n̶o̶-code: Vue3, Tailwind, Netlify and 10+ APIs.

I decided to jump back into coding last year after a 10+ year break since I got my degree (Master’s in Computer Science from Supinfo).

After I closed down Meetric, I had time on my hands and itched to build an app on my own. So I did.

Prep

I didn’t remember much from my studying days but HTML/CSS and a few concepts around algorithms and databases. I had to go back into theory.

I went through several refresher courses on Educative.io around web architecture, front-end, back-end, JS and Vue.

I also got a dev mentor through MentorCruise to get help on the architecture, best practices and the occasional debugging.

As a ‘junior dev’, these were definitely instrumentals in delivering a working product quickly.

The app

The next step was to figure out what to build. This one was easy: I wanted to build something to make my life easier.

I live in my inbox, get tons of emails + 5 to 7 newsletters daily, which I read throughout the day. On top of that, my laptop morning routine is always the same: open a bunch of browser tabs to check the weather, check my calendar and the events I have today, look at my task lists, etc. It doesn’t take much time, but I like to be efficient, so I thought: why not automate this and get all this info + the newsletters I get in just one email, every morning?

And so that’s what I built, LeDigest.email to save time and declutter my inbox.

A daily digest

The tech stack

• Vue3 for the front-end
• Vanilla JS for the backend
• Tailwind for the CSS
• Flowbite for pre-built Tailwind components
• Netlify for hosting, user management, serverless functions
• Postmark for sending and receiving emails
• Cronitor for monitoring
• API integrations with Google, Product Hunt, HackerNews, OpenWeather, ZenQuotes, Pocket, and Postmark.

I also used GitHub for version control, Visual Studio Code as IDE and CoPilot to assist me.

I’m no stack expert but I like this setup — it’s simple, modern and cheap (<$20/month).

How does the app work

After you create an account, you can add ‘blocks’ to your digest (= your daily automated email).

Then, every morning at 6:00 am UTC, a Netlify serverless function goes through all users in the DB, builds their digests accordingly then sends the emails through Postmark.

I built each block from scratch, including:

• Your name
• A daily inspirational quote
• The weather forecast for your location
• When Spotify releases a new weekly Discover playlist
• Your Google events for the day
• Your Google tasks for the day
• The top 5 stories on Hacker News
• The top 5 products on Product Hunt
• Your saved items in your Pocket account
• Your unread articles in your Feedly account
• Your unread articles from a given RSS feed
• Your saved articles from my Chrome extension (anything you saved with the extension will be added to the next daily digest, so you can read it all at once)
• Any newsletters you’ve subscribed to

Most of them are API-based and involved connecting to a specific API, running a specific function to fetch something and adding it as HTML into the digest.

The newsletter subscription was the most tricky. I wanted to remove all newsletters from my inbox and instead receive them in my daily digest as clickable links for convenient reading:

A daily digest with just newsletters

This is how the newsletter feature works:

• the first step is for the system to create a unique email address that is linked to your account, using your account ID (for example, 0dbfb909–9423–4398–9f4b-cc8d9cb2346a@XXX.com). You then use that email address to subscribe to any newsletters you want to receive (in parallel, you unsubscribe to the ones in your personal inbox).
• when a new newsletter email is sent to that address, it is received by the Postmark inbound server, which instantly sends the JSON data to a Netlify serverless function (through a webhook). The Netlify function finds your user ID in the email address (in the JSON data) and saves a new entry in the Netlify database under your ID (metadata in this case), with the Postmark ID of the message received.
• next, when your daily digest is built (6:00 am UTC), the system checks the Netlify database to see if there are any new newsletters received under your ID. If a new newsletter has indeed been received, the system uses a Postmark API call to retrieve the subject line of the newsletter (as Postmark is storing that email) and inserts it into the daily digest as a bullet point. This bullet point is hyperlinked to a Netlify serverless function with the Postmark ID of the message received as a parameter.
• Then, when you open your daily digest and click on that hyperlink, it opens a new tab and runs that Netlify serverless function to execute the last step: using the Postmark ID (in the URL), the function calls the Postmark API to fetch the entire HTML of the email and render it in the browser. Pretty cool huh!

Pace

The development really went through a snowball effect. When I started, it was hard and slow-going at first. However, my pace kept accelerating as I spent more time on it and began to use Vue and serverless functions better.

The same thing happened with the APIs. The first time I integrated one, it took a while to get the hang of it. But once I did, subsequent integrations went much more smoothly (Google OAuth was tricky!).

Final words

In total, I spent ~80 hours building ledigest.email, including some small refactoring, and had a blast doing it, including a small launch on Product Hunt. You can try it here (free for 7 days).

If you’re curious about coding, definitely build something. It’s a fun experience and the feeling of bringing an app to life is pretty awesome!

Follow me on Twitter.