LaPInf

The problem

The old site was a single HTML page built in 2019 on the Bolt template, with Bootstrap and jQuery, and maintained for seven years by editing the code directly. Projects had no address of their own, credits were free text scattered across cards, modals and even browser confirm dialogs, and the INPI registrations were a collage of certificate images, with no number you could copy or link to a project. People who assess the lab from outside, such as managers, partners and institutions, could not quickly understand what was built, by whom, and how to verify it.

My contribution

I extracted the old site's content into Markdown and YAML files and rebuilt the site in Vue 3 with Vite SSG, which generates the HTML for every route and works without JavaScript. Each project got its own page with professors, students, partners, programs and INPI registrations, and the archive can be filtered by program, with the filter kept in the URL. Projects, notices, partners and FAQ entries are edited through Pages CMS without touching the code, and a Vite plugin validates every collection with Zod at build time, pointing to the source file when a field is invalid. Notices have publish, start and expiry times in Brasília time. The HTML ships with the notices that are live at build time and the browser re-evaluates the list every 30 seconds, so a notice goes up and comes down without a new deploy. Unit tests cover content, filters, pagination, credits and notice times, and the end-to-end tests run in Chromium with accessibility checks from axe.

Project highlights

• 34projects in the archive
• 8verifiable INPI registrations
• No JavaScriptHTML generated for every route

Technologies

Vue 3, TypeScript, Vite SSG, Tailwind CSS v4, Zod, Pages CMS, Playwright