# Brainstorming Log — United Tattoo Website Expansion Date: 2025-09-17 Audience: Christy (owner), development team, future maintainers Overview This document captures the comprehensive brainstorming outputs from our planning sessions for United Tattoo’s public-facing website and internal admin/ops systems. It consolidates the four pillars we identified: - Admin Dashboard & Artist Management - Unified Booking & Client Management - Public-Facing Experience - Technical Architecture & Delivery Goals - Create a unified, scalable system that supports artist onboarding, portfolio management, and secure admin controls. - Deliver a polished public site with immersive visuals, consistent design (ShadCN baseline), and robust content (education, aftercare, etc.). - Implement a reliable booking and payment flow with client portals and calendar integration. - Establish strong documentation, staging environments, and an approachable handoff for Christy. Key Design & Tech Assumptions - UI baseline: ShadCN components, aligned with homepage and /artist pages. - Parallax layering and split-screen storytelling to achieve an oversized ecommerce-like experience. - Asset hosting on Cloudflare R2; metadata in D1; server-side asset loading to minimize client storage. - Context7 MCP and ShadCN MCP docs as primary sources for patterns and best practices. - Admin users invited via email; role-based access; password onboarding; 2FA. Brainstorming Focus Areas and Ideas 1) Admin Dashboard & Artist Management System - User Management & Authentication - Invite-based onboarding with time-limited signup links. - Wizard-style onboarding for artists using ShadCN components. - Two-factor authentication (2FA) to improve security. - Sandbox mode to preview changes before going live. - Optional passwordless login fallback for convenience. - Asset Management & Optimization - Manual cropping UI with grid guides; save as separate asset records. - Optional AI-assisted cropping suggestions that can be toggled off in settings. - Batch drag-and-drop portfolio uploads with progress tracking. - Versioning for portfolio pieces to track edits/updates. - Smart compression with a user-facing toggle to disable automatic aggressive compression if needed. - Server-side asset loading from R2, pulling per-artist asset bundles when rendering. - Permissions & Access Controls - Fine-grained roles: viewer, editor (portfolio), admin (full control), owner. - Activity logs with audit trail visuals. - Emergency pause per-artist or system-wide control. - Customizable notification preferences per user and per role. - Data & Security Considerations - Keep media assets offsite in R2; assets loaded server-side to minimize duplication. - Access tokens with scoped permissions for asset retrieval. - Basic content moderation hooks for uploaded media. 2) Unified Booking & Client Management System - Multi-Form System - Smart routing to route to consultation vs. booking based on user input. - Appointment type taxonomy: first tattoo, cover-up, large piece, etc. - Automated quote estimates based on options (size, complexity, artist rate tiers). - Client Portal - Account-based portal for appointment management: view, reschedule, cancel. - Deposits, refunds, and payment history; secure checkout with PCI-compliant flows. - Deposit policies clearly displayed during booking. - Scheduling & Calendar - Real-time availability across artists; conflict detection. - Google Calendar two-way sync for artists; SMS/email reminders with opt-in controls. - Automated scheduling confirmations and reminders. - Payments - Multi-merchant support (Stripe, PayPal) with deposit handling. - Secure storage of payment intents and receipts; refunds workflow. - Notifications & Communication - Email and SMS channels; user preference granularity. - Admin notifications for new bookings, cancellations, and changes. 3) Public-Facing Website Experience - Design System & Visual Language - All new pages follow the ShadCN baseline; homepage and /artist pages as references. - Layered parallax and split-screen interactions for hero sections and portfolios. - Oversized, image-forward design with heavy photography emphasis. - Pages & Navigation - Improve /aftercare, /deposit, /terms, /privacy, /book to align with the visual system. - Smooth, consistent navigation with refined transitions. - Search & Discovery - Dedicated search page with filters (style, price, availability). - Quick search (Ctrl+K) for artists and educational content. - Enhanced artist gallery with style-based filtering and interactive zooms. - Educational Content - Detailed aftercare guides with visuals, progress tracking, and checklists. - Healing process explanations with diagrams or annotated imagery. - Downloadable PDFs and printable guides. - Content Strategy - Rich media: more images and photography across pages, focusing on shop and artists. - Clear calls-to-action for bookings and consultations. 4) Technical Architecture & Delivery - Cloudflare Integration - D1 for structured data; R2 for media assets; 2-way data flow with server-side rendering patterns. - Caching strategies to minimize data egress and optimize load times. - Image processing on the server (parallax-friendly, optimized delivery). - Performance & Experience - Lazy loading for portfolio assets; progressive image loading for perceived speed. - Service workers for offline support and faster revisit performance. - Git & Documentation - Git-free CMS-like experience for the owner-facing admin experience. - Clear README, architecture docs, changelog, and contributor guidelines. - Staging environment for Christy to preview progress before production. - Delivery & Handoff - Repository delivered as a ready-to-merge GitHub project; Cloudflare transfer instructions documented. - Owner training materials focusing on non-technical management tasks. Phased Implementation Plan (Summary) - Phase 1: Foundation & Critical Fixes (Week 1-2) - Admin dashboard bug resolution, invitation flow, onboarding, basic portfolio management, R2 integration scaffold. - Phase 2: Core Features & UX (Week 3-4) - Unified booking system, client portal, deposits, payments, and initial design unification. - Phase 3: Polish & Visual Experience (Week 5-6) - Parallax, split-screen, advanced search, education content, staging environment. - Phase 4: Documentation & Delivery (Week 7) - Documentation, git workflow, handoff, Cloudflare setup, owner training. Risks & Mitigations - Risk: Admin dashboard complexity and bugs - Mitigation: Build incremental, testable components; implement the sandbox preview and role-based testing. - Risk: Cloudflare integration pitfalls (D1/R2) - Mitigation: Use MCP patterns, implement robust error handling, staging environment for preview, and strict access controls. - Risk: Performance with rich visuals and parallax - Mitigation: Lazy loading, image optimization, careful asset sizing, and performance budgets. Next Actions - Create the initial documentation skeletons and onboarding guides. - Start implementing Phase 1: Admin dashboard bug resolution and onboarding flow. - Establish a staging environment workflow for Christy’s preview and handoff. Notes - AI cropping suggestions are optional and can be toggled off in settings with manual fallback as requested. - All design work will follow ShadCN patterns and Context7/MCP guidance. - Staging and documentation will be integral to a smooth handoff and maintainability. End of planning notes. Let me know if you want me to start implementing Phase 1 tasks immediately, and I will begin with the admin dashboard on-boarding flow and the artist asset handling scaffold. If you want a specific formatting or section ordering in this document, I can adjust accordingly.