Skip to content

LLD.md

Latest commit

 

History

History
105 lines (87 loc) · 4.38 KB

LLD.md

File metadata and controls

105 lines (87 loc) · 4.38 KB
Raw

Low-Level Design (LLD) - MiniLink

1. Database Schema (Prisma)

Models

User

Field Type Description
id String (PK) Clerk User ID (Mapped)
email String Unique email
username String Unique public handle
theme String Selected theme ID (default, glass, neon, etc.)
links Relation One-to-Many with Link

Link

Field Type Description
id String (PK) CUID
userId String (FK) Owner ID
title String Display text
url String? Destination URL (Optional for folders)
isFolder Boolean True if item is a folder
parentId String? ID of parent folder (for nesting)
icon String? Lucide name, custom URL, or Coding Brand icon
order Int Sorting order (within folder context)
isActive Boolean Visibility toggle
clicks Int Click counter

Click / PageView

  • Timestamped events for analytics generation.

2. API Routes

Link Management

All routes are protected (require Clerk Auth).

Route Method Purpose
/api/links GET Fetch all links for current user (Sorted by order)
/api/links POST Create a new link or folder
/api/links PATCH Bulk reorder links (within current folder context)
/api/links/[id] PUT Update details (handles parentId moves)
/api/links/[id] DELETE Removes link/folder (Cascade delete for children)

User Profile

Route Method Purpose
/api/user/profile PATCH Update profile info (Bio, Avatar, Theme)

Analytics

Route Method Purpose
/api/track/[linkId] POST Record a click event (Public access allowed)

3. Component Architecture

Dashboard (/dashboard)

  • LinksPage: Main management interface.
    • SortableLinkItem: Support for folder types and "Drill-down" navigation.
    • FolderView: Context-aware view showing links inside a specific folder.
    • IconPicker: Popover with Lucide, Custom Upload, and Premium Coding Icons (LeetCode, GFG, etc.).
  • AppearancePage: Theme selector with High-Fidelity Preview (renders actual public components).
  • AnalyticsPage: Charts (Recharts) excluding folder clicks for data purity.

Public Profile (/[username])

  • UserLink: Styled button component based on active theme.
  • ProfileLinks: Handles nested folder logic with accordion expansions.
  • ThemeWrapper: Injects theme-specific CSS variables (colors, fonts, backgrounds).
  • TestimonialsPreview (admin-only): Auto-rotating testimonial card (5s interval, fade transition). Static data, no API calls. Includes dot indicators and CTA link to external testimonial wall.
  • CreatorBadge (admin-only): Inline BadgeCheck icon with purple glow, rendered next to the admin's name.
  • ProfileAvatar (crown overlay) (admin-only): Golden crown icon on the top-left corner of the avatar with pulsing glow.

Admin identification: user.id === process.env.NEXT_PUBLIC_ADMIN_USER_ID (server-side check).

4. Key Algorithms

4.1 Reordering

Uses dnd-kit's SortableContext.

  • Frontend: Optimistic UI update using arrayMove.
  • Backend: PATCH /api/links accepts the new order. To optimize, we can transactionally update all affected rows, or just the moved item's new index (shifting others). Currently implements bulk update for consistency.

4.2 Analytics Graph

  • Dynamic Growth: The graph uses an SVG path interpolation that updates in real-time as the clicks counter increases, creating a "living" dashboard effect.

5. Directory Structure

src/
├── app/
│   ├── api/links/      # Link CRUD
│   ├── (dashboard)/    # Admin UI
│   └── [username]/     # Public UI
├── components/
│   ├── ui/             # Shadcn/Radix Primitives
│   ├── dashboard/      # Feature-specific components
│   └── public-profile/ # Profile page components
│       ├── profile-avatar.tsx
│       ├── profile-links.tsx
│       ├── profile-actions.tsx
│       ├── testimonials-preview.tsx  # Admin-only
│       └── creator-badge.tsx         # Admin-only
└── lib/
    ├── prisma.ts       # DB Client
    └── utils.ts        # CN helper