Highlight.cv

Overview

highlight.cv is a lightweight, customizable resume builder that lets users showcase their background, projects, and skills through clean, responsive web profiles.

Unlike traditional resume builders that feel like rigid document editors, highlight.cv balances instant server-side page loads with the smooth, dynamic interactions of a single-page application.

Highlights

• Instant profile shareability with a public profile page URL.
• Fluid profile management with live editing and customization.
• Dynamic template engine allowing users to change themes seamlessly.

Stack

• Backend: Ruby on Rails 8
• Frontend: React, Typescript, Tailwind CSS
• Glue protocol: Inertia.js
• SSR engine: Node.js

Core challenge

While trying to develop the web app with reactive and dynamic UI components, I tend to implement pure client-side SPA architecture. It’s fast to navigate with, but suffers from poor SEO, and broken social media previews (OpenGraph) when shared on platforms like LinkedIn or X.

Traditionally, you can choose between that or regular old server-side rendering architecture. You’d have to bind all of the reactive javascript UI elements manually after the page loads. This approach is quite outdated and cumbersome to work with.

Solution

The solution is to implement hydration in server-side rendering, so the browser can take the static HTML sent from the server, and match it with client-side javascript. attach event listeners and the like. This isn’t straightforward to implement in a rails app, since it’s quite counterintuitive given the ruby on rails architecture.

This is where Inertia.js, or rather, Inertia-rails comes in, allowing us to develop highly reactive UI experiences on the client side, with the magic that rails does on the backend.