Core Platforms

• Frontend Framework: Next.js (React)
• Database & Auth: Supabase (PostgreSQL)
• Mapping: Mapbox
• Email Delivery: SendGrid
• AR Layer: Lens Studio & Snap Camera Kit Web

File & Directory Structure

• app/: Contains the core Next.js routing structure. Every sub-folder represents a route path (e.g., /ar, /info).
• components/: Contains reusable React components that are not tied to the above routes (generally also used for better file management).
• hooks/: Custom React hooks for shared client-side logic.
• lib/ (Core Logic & Config): Utility functions, configurations, and backend clients like Supabase, Jotai, and Types.
• public/: Static assets like images, icons, and Marker SVGs.

Naming Conventions

To keep the codebase predictable, I like this system for readability:

• Files & Folders (kebab-case): like first-time-modal.tsx, home-client.tsx.
• React Components (PascalCase): Component names inside the files must be capitalized like FirstTimeModal, HomeClient.
• Variables, Functions, & Server Actions (camelCase): like totalScans, claimPrize.
• Types & Interfaces (PascalCase): likeArtwork, UserGift.

Dependency & Library Auditing

During the lifecycle of this project we frequently encountered newly disclosed CVEs (Common Vulnerabilities and Exposures)