Back to Home

About Vura

An inside look at the architecture, tech stack, and engineering decisions behind the modern certificate generation platform.

Frontend Architecture

  • Framework: Next.js 14 (App Router)
  • Styling: Tailwind CSS v4 with custom neon theme tokens and CSS variables.
  • Animations: Framer Motion for scroll reveals, floating elements, and staggered layout transitions.
  • Typography: Google Fonts (Outfit for body, Bricolage Grotesque for headings) optimized via Next/Font.

Backend & Core Logic

  • Run Time: Node.js & Next.js API Routes (Serverless)
  • PDF Generation: `pdf-lib` for reading template geometries, embedding custom fonts, and writing text to exact coordinates based on user X/Y mapping.
  • Data Parsing: `xlsx` library to instantly read uploaded Excel sheets and map rows to certificate iterations.

Database & Storage

  • Database: Neon Serverless Postgres. Chosen for its instant branching and edge-ready connection pooling.
  • ORM: Prisma. Ensures type-safe database queries and seamless schema migrations.
  • Cloud Storage: AWS S3. Every generated PDF is securely uploaded to an S3 bucket, returning a permanent public URL for the dashboard.

Authentication & Security

  • Library: NextAuth.js (v4)
  • Providers: Dual support for Google OAuth and traditional Email/Password credentials.
  • Encryption: Passwords are hashed heavily using `bcryptjs` before reaching the database. Sessions are managed via secure, encrypted JWTs.

The Engineering Challenge

The hardest part of building Vura was the coordinate mapping system. When a user uploads a blank PDF template, the browser doesn't inherently "know" where the lines are.

I had to build a custom interactive React visualizer using `react-pdf` that calculates exact X and Y percentage coordinates as the user drags markers across the screen.

When generation begins, the Node backend receives these percentage coordinates, inverts the Y-axis (because `pdf-lib` draws from bottom-to-top rather than top-to-bottom like the DOM), measures the exact width of every dynamic string using embedded font tools, and recalculates the anchors so names are perfectly center-aligned on the certificate regardless of their length.

Built from the ground up by Om Narkhede.