Summer 2024

A quick recap of my past few months.

It’s been a few months since we last spoke, so time for an update:

• I became a dad (6 weeks in, with a happy daughter and wife — so thankful)

• I shipped a SaaS template, music player, books inventory, and other new apps

• I got a new domain (leerob.com) and refreshed my site

• I made a bunch of demos, tutorials, and quick tip videos

• I learned Vim and changed editors to Neovim

My SaaS template

Four years ago, I made a React and Next.js course showing how to build a SaaS application.

I wanted to show how an individual developer could go from zero to a real product that accepts money on the internet. There’s of course many other ways to achieve this same outcome — whether it be PHP (Laravel), Ruby (Rails), and others. But the React component model meshed with my brain, and has been my preference for writing UIs since 2015.

Next.js enabled me to write my entire application in one programming language (TypeScript) and write code for both the client and server. Now four years later, it’s even easier to build this same application with React Server Components, Server Actions, and other new features.

So, I built a new template. It uses the latest Next.js and React patterns. These patterns simplify common tasks like building forms, talking to your database, and more.

The app uses Postgres (with Drizzle ORM), Stripe for payments, and Tailwind CSS (with shadcn/ui). There’s a bunch of goodies to dig into. Cookie-based authentication, RBAC with different roles, global middleware to protect logged-in routes, local middleware to protect Server Actions and validate schemas, and more.

Try out the demo or view the repo (now at 5,000 GitHub stars 🤯). I hope you find it helpful or interesting. I wrote more about how it’s built here.

My new portfolio

I’ve wanted leerob.com for a long time, but it was taken with a redirect. Hilariously, from a guy named Rob Lee. As fate would have it, the domain expired and I was able to purchase it — which seems to be good timing as .io domains might have some issues in the future.

As tradition goes, I spend time rebuilding my site instead of writing an update. I wanted to focus on simplicity and remove a lot of cruft that had accrued over the years. Simple design, clean typography, and refreshed content.

I’m using the View Transitions API with the Next.js App Router for smooth animations between pages. It’s minimal and I love it.

Check it out or view the code. I also wrote two new posts:

• On Community Moderation

• My Stack

My minimal music player

I have a love/hate relationship with Spotify. It has great playlists. Also, hours of listening data to intelligently recommend new songs to me. But wow, the interface leaves a lot to be desired.

So I started trying to build a better, information dense version of a music player inside of v0. I didn’t plan make it real at the start, but was impressed by how far I got thanks to AI. So, v0 helped me finish the job and get a working MVP.

The repo might be interesting to look at. It again uses Postgres (and Drizzle ORM) to save songs and playlists. Album art and playlist images are stored in Vercel Blob storage. It’s a Progressive Web Application (PWA), so I can install it like an app on macOS or iOS.

Try out the demo or view the repo. I also wrote about some other interesting details building it, if you’re curious to learn more.

My books inventory app

I wanted to build a demo of searching, filtering, and pagination with Next.js — and needed a very large dataset for the demo. So, I took a Goodreads database of 600,000+ books and dumped it into Postgres.

This was a fun challenge. Even writing the seed script to get a CSV of that many books into the database was interesting. After some tweaking of database indexes, I’m pretty happy with the outcome.

The app uses URL state exclusively. For example, when you search, the query param updates and causes a React Server Component to re-run, look at the searchParams, and query the database. Same idea for pagination and adjusting filters in the left sidebar.

If you type into the search, or adjust the filters, your input is preserved when navigating to a book page. This gives it an app-like feel. Similarly, with scroll position — if you navigate to the 20th page, scroll down, and then click into a book, going back will take you back to your exact spot.

Try out the demo or view the repo. One interesting bit to explore is the generation of the blur-up placeholder images for the books using “thumbhashes”.

Learning Vim

I am surprised I have never learned Vim until now.

I’ve fumbled around in vi before, but never actually gave it a proper go. Since I had some free time, I decided to quit VS Code cold turkey and jump straight into Neovim.

It’s been awesome. Vim motions are magic.

Moving to Neovim shows how slow VS Code is. Further, a lot of the “magic” of VS Code is just integrations with Language Server Protocols (LSPs). With a proper Neovim configuration (which didn’t take long thanks to the Kickstart repo), I was able to match the floor of what VS Code provides, but with a higher ceiling for complete customization.

To help myself learn Vim, I started writing down notes and a cheat sheet. After tweeting about Vim and my progress, I got a lot of replies asking about resources to learn and my configuration. So I made a quick, free course if you’re interested in trying it out.

And more!

Lots of other smaller ships, like improving the Next.js docs, or quick tip videos showing how a feature works.

• Next.js Docs: Progressive Web Apps

• Next.js Docs: Data Fetching

• Next.js Docs: Examples

• Next.js Docs: Incremental Static Regeneration

• Next.js Tip: How next/image works

• Next.js Tip: Active state for nav links

• Next.js Tip: Route Groups

• React Tip: server-only package

• React Tip: Colocated components

• React Demo: React 19 Features

• Vercel Demo: v0

• Vercel Demo: Firewall

• Vercel Demo: Skew Protection

• Vercel Demo: Toolbar

• Vercel Demo: AI SDK Chatbot

• Next.js Demo: Self-Hosting

• Next.js Demo: Optimistic UI

Until next time ✌️