Documentation

Technical Specification

Full project architecture and design documentation for BiodataPro.

User Flow Architecture

1

Landing & Discovery

User enters homepage, selects a religious template or searches for specific community formats.

2

Creation & Real-time Preview

User inputs multi-step data. State is synchronized in real-time with an SVG/HTML preview panel. AI suggests improvements for career & preferences.

3

Theming & Export

User adjusts colors/fonts. Export engine generates a high-resolution PDF/JPG for local download.

Database Schema (PostgreSQL)


CREATE TABLE users (
  id UUID PRIMARY KEY,
  email VARCHAR(255) UNIQUE,
  created_at TIMESTAMP DEFAULT NOW()
);

CREATE TABLE biodatas (
  id UUID PRIMARY KEY,
  user_id UUID REFERENCES users(id),
  template_id VARCHAR(50),
  data JSONB, -- Stores nested fields
  theme_config JSONB,
  is_public BOOLEAN DEFAULT false,
  share_token VARCHAR(100),
  created_at TIMESTAMP DEFAULT NOW()
);

Export Engine Logic

The export engine utilizes a 2-tier approach:

  • Client-Side: Uses window.print() with specific CSS media queries.
  • Image Rendering: Leverages html2canvas for JPG capturing.
  • Vector Quality: Layouts built with modern Grid/Flex to ensure DPI consistency.