Retain

Gallery

About

Retain is a frictionless, real-time dashboard designed to bridge the communication gap between independent professionals and their clients. It solves the common problem of project tracking by providing a live, constantly updating progress bar of remaining billable hours.The core philosophy behind Retain is zero friction: it requires absolutely no sign-up or authentication from the client's side. Clients are provided a secure, unique link where they can instantly view a minimal, clean interface displaying the real-time status of their project's work log. This creates immediate trust and transparency, eliminating the need for constant status update emails or complex project management software onboarding.Technical Architecture & StackThe application is engineered for high performance and low latency, utilizing a modern, type-safe full-stack architecture to ensure immediate data delivery and a highly responsive user experience.Frontend Build Tool: ViteChosen for its incredibly fast hot module replacement (HMR) during development and highly optimized, lightweight production builds.Language: TypeScriptUsed end-to-end across both the frontend and backend. It enforces strict type safety, reducing runtime errors, improving code maintainability, and streamlining the development process for complex state management.Backend Runtime: Node.jsProvides a highly scalable, event-driven backend environment capable of efficiently handling numerous concurrent connections, which is essential for serving real-time updates.Real-Time Communication: WebSocketsThe engine behind the live progress bar. Instead of relying on traditional HTTP polling, WebSockets establish a persistent, two-way connection channel. This pushes time-log updates from the server to the client's screen instantly, without requiring a page refresh.Database: PostgreSQLA robust, reliable relational database used to structure and store core application data, including project scopes, accumulated time logs, and the unique URL access tokens generated for clients.Database ORM: PrismaIntegrates seamlessly with TypeScript and PostgreSQL. Prisma's auto-generated, type-safe query builder makes database interactions highly efficient and keeps the schema strictly synchronized with the application's data models.Styling & UI: Tailwind CSSUtilized to craft a responsive, minimalist user interface. The utility-first approach allows for rapid styling of the dashboard, keeping the visual aesthetic clean, focused purely on the data, and free from unnecessary clutter.