A very fun, retro-inspired mini-CMS that has view/create routes for projects, thoughts and blog entries, purpose-built for the content of this website.
summary
Well I guess like many devs out there, I was in the middle of reworking my site for the 11th time when I started to think where will I be adding content? I mean several options exist out there but I wanted something, or somewhere, that would allow me to create/edit stuff on the go.
I explored a few solutions out in the wild but nothing fully worked for me. They all made me wonder about these things before embracing them for the long term (or at least until my 12th redesign): vendor lock-in concerns, privacy/self-hosting preferences and wanted full control of the data structure. So this idea of building my own just became the best solution.
And now that I gave myself this imaginary green light to build my own, I started doing the initial sketching in my head on how it would look and work. I wanted to make it standout from anything I've built before, and it happened to be around the same time I was rewatching Stranger Things so it was all about the retro vibe and reminiscent of yesteryear with my first computers.
features
I used to have 2FA with a code generator, then forward that to my email to confirm. It did work fine for a while but I wasn't quite convinced of it so I added recently TOTP instead of emailing codes.
Main list of features as of Nov 2025:
- regular user/password auth
- TOTP-based 2FA
- session management with Valkey
- browser fingerprinting for security
- self-hosted
- custom auth flow
architecture
Two separate apps power this whole thing: the admin CMS you're reading about, and the frontend site you're reading this on.
The CMS handles content creation and storage (Postgres), while the frontend (built with Astro) fetches and displays it. They communicate through API endpoints, which means I can swap out either piece independently.
This separation also opens the door for reusing the CMS for other projects that I might build one day, maybe adding media management for photos and videos for other sites.
stack
- React Router
- TailwindCSS
- PostgreSQL
- Valkey
- OTPAuth
what i learned
Session management and authentication flow were the biggest pieces here. Making those two work in tandem was a fun challenge because it is something that I do see in production apps pretty much as a standard now, so DIYing the same architecture was a 10/10 in the scale of what I consider fun and what made this all worthwhile.
Just to elaborate further on those points, the auth flow can be described as:
- username/password login
- if it's a new device then ask for 2FA 6-digits
- if all good then fingerprint current browser session
- after fingerprint then we create a valkey sesh and a cookie and we're in!
The browser fingerprinting was interesting. It's privacy-first (no tracking, hashed) but prevents session hijacking. Generates a hash from user agent, screen resolution, and timezone without storing PII. This is clearly overkill for a site that's only used by me, but it is in the name of learning.
acknowledgements
- design system heavily inspired from jdan/98.css and its contributors, thank you all 💛