CertosinoLab

AI Prompt Lab is a full-stack application I built around a simple idea: managing reusable AI prompts should feel like working with any other structured application asset, rather than keeping them scattered across notes, text files or chat histories. The project combines Java 21, Spring Boot, React 19, TypeScript, PostgreSQL and OpenRouter in a compact architecture that covers the main concerns of a modern web application: authentication, authorization, persistence, external API integration and management of sensitive configuration. I deliberately kept the system relatively simple. The goal was not to introduce architectural patterns for their own sake, but to build a clean application where each technology has a clear responsibility. The project AI Prompt Lab provides an authenticated workspace where users can create, update, organize and reuse prompts for generative AI models. Each user has an independent prompt collection and can configure ...

Some web applications are designed to stay visible for a long time. Think about a workout timer, a cooking recipe, a presentation, a monitoring dashboard, or a web application being used as a control panel. There is one small problem: if the user doesn't interact with the device for a while, the operating system may dim or turn off the screen. Modern browsers provide a JavaScript API specifically designed for this situation: the Screen Wake Lock API. What does the Screen Wake Lock API do? The Screen Wake Lock API allows a web page to ask the browser to prevent the device's display from automatically turning off because of inactivity. The main JavaScript API is available through navigator.wakeLock . When the application requests a screen wake lock and the browser accepts the request, the display can remain active while the page is being used. This is especially useful for applications where the user needs to read...

A web application can be open in several browser tabs at the same time. The interesting part is that each tab normally has its own JavaScript state . If something changes in one tab, the others don't automatically know about it. Imagine, for example, a simple note editor. You open the application in two tabs and start typing in the first one. Without additional logic, the second tab stays unchanged. Fortunately, JavaScript provides a small browser API designed specifically for communication between different instances of the same application: BroadcastChannel. Creating a channel Creating a channel requires only a name: const channel = new BroadcastChannel("notes"); Any other tab from the same origin can create a channel using the same name: const channel = new BroadcastChannel("notes"); Those tabs can now exchange messages. There is no server involved, no WebSocket connection and no polling loop running in the b...