303 lines
11 KiB
Markdown
303 lines
11 KiB
Markdown
---
|
|
last-redoc-date: 2025-10-07
|
|
---
|
|
|
|
# United Tattoo - Complete Project Documentation
|
|
|
|
## Project Overview
|
|
|
|
**United Tattoo** is a modern, professional website built for United Tattoo studio in Fountain, CO. This Next.js application showcases the studio's artists, services, and booking capabilities with a cinematic, high-contrast design that reflects the artistry and community spirit of the tattoo studio.
|
|
|
|
### Key Information
|
|
- **Project Name**: United Tattoo Official Website
|
|
- **Version**: 0.1.0
|
|
- **Framework**: Next.js 14.2.16 with App Router
|
|
- **Language**: TypeScript
|
|
- **Styling**: Tailwind CSS 4.1.9
|
|
- **UI Components**: ShadCN UI
|
|
- **Deployment**: Cloudflare Pages via OpenNext
|
|
- **Database**: Cloudflare D1 (SQLite)
|
|
|
|
## Technology Stack
|
|
|
|
### Core Technologies
|
|
- **Next.js 14.2.16**: React framework with App Router
|
|
- **TypeScript**: Type-safe JavaScript
|
|
- **Tailwind CSS 4.1.9**: Utility-first CSS framework
|
|
- **ShadCN UI**: Modern React component library
|
|
- **React 18**: UI library
|
|
- **Cloudflare Pages**: Hosting platform
|
|
- **Cloudflare D1**: SQLite database
|
|
|
|
### Key Dependencies
|
|
- **Authentication**: NextAuth.js with Supabase adapter
|
|
- **File Storage**: AWS S3 SDK for R2 uploads
|
|
- **Forms**: React Hook Form with Zod validation
|
|
- **UI Components**: Radix UI primitives
|
|
- **Icons**: Lucide React
|
|
- **Smooth Scrolling**: @studio-freight/lenis
|
|
- **Data Fetching**: @tanstack/react-query
|
|
- **Testing**: Vitest with Testing Library
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
united-tattoo/
|
|
├── app/ # Next.js App Router pages
|
|
│ ├── page.tsx # Homepage
|
|
│ ├── aftercare/ # Aftercare instructions
|
|
│ ├── artists/ # Artist listings and profiles
|
|
│ ├── book/ # Booking flow
|
|
│ ├── contact/ # Contact information
|
|
│ ├── deposit/ # Deposit policy and payments
|
|
│ ├── gift-cards/ # Gift card information
|
|
│ ├── privacy/ # Privacy policy
|
|
│ ├── specials/ # Promotions and specials
|
|
│ └── terms/ # Terms of service
|
|
├── components/ # React components
|
|
│ ├── ui/ # ShadCN UI primitives
|
|
│ ├── hero-section.tsx # Homepage hero
|
|
│ ├── artists-section.tsx # Artists showcase
|
|
│ ├── services-section.tsx # Services display
|
|
│ ├── contact-section.tsx # Contact information
|
|
│ └── booking-form.tsx # Multi-step booking form
|
|
├── data/ # Static data and configuration
|
|
│ └── artists.ts # Artist metadata
|
|
├── lib/ # Utility libraries
|
|
│ ├── auth.ts # Authentication configuration
|
|
│ ├── db.ts # Database connection
|
|
│ ├── upload.ts # File upload utilities
|
|
│ └── validations.ts # Form validation schemas
|
|
├── public/ # Static assets
|
|
│ ├── artists/ # Artist images and work samples
|
|
│ └── united-logo-*.png/jpg # Brand assets
|
|
├── sql/ # Database schema and migrations
|
|
├── __tests__/ # Test files
|
|
├── docs/ # Documentation
|
|
└── bmad/ # BMAD framework configuration
|
|
```
|
|
|
|
## Core Features
|
|
|
|
### 1. Homepage
|
|
- **Hero Section**: Cinematic split imagery with parallax effects
|
|
- **Artists Section**: Grid display of studio artists
|
|
- **Services Section**: Overview of tattoo services
|
|
- **Contact Section**: Quick contact information and CTA
|
|
|
|
### 2. Artist Management
|
|
- **Artist Listings**: Grid view of all artists with metadata
|
|
- **Artist Profiles**: Detailed pages for each artist
|
|
- **Work Samples**: Portfolio images for each artist
|
|
- **Specialties**: Artist-specific expertise and styles
|
|
|
|
### 3. Booking System
|
|
- **Multi-step Form**: Progressive booking flow
|
|
- **Form Validation**: Client and server-side validation
|
|
- **Service Selection**: Choose tattoo type and artist
|
|
- **Contact Information**: Collect customer details
|
|
|
|
### 4. Content Pages
|
|
- **Aftercare Instructions**: General and transparent bandage care
|
|
- **Deposit Policy**: Payment options and compliance information
|
|
- **Terms of Service**: Legal terms and conditions
|
|
- **Privacy Policy**: Data handling and privacy practices
|
|
- **Gift Cards**: Gift card information and balance checking
|
|
- **Specials**: Current promotions and VIP offerings
|
|
|
|
### 5. Administrative Features
|
|
- **Artist Dashboard**: Management interface for artists
|
|
- **Admin Panel**: Site administration capabilities
|
|
- **Search Functionality**: Search artists and services
|
|
- **Contact Management**: Handle contact form submissions
|
|
|
|
## Design System
|
|
|
|
### Visual Design
|
|
- **Color Scheme**: Monochrome foundation with high contrast
|
|
- **Typography**: Geist font family for modern, clean typography
|
|
- **Layout**: Split-screen designs with cinematic imagery
|
|
- **Animations**: Subtle parallax effects and smooth transitions
|
|
|
|
### Component Library
|
|
- **ShadCN UI**: Consistent component library throughout
|
|
- **Radix UI**: Accessible primitive components
|
|
- **Lucide Icons**: Consistent iconography
|
|
- **Tailwind CSS**: Utility-first styling approach
|
|
|
|
### Responsive Design
|
|
- **Mobile-First**: Progressive enhancement for larger screens
|
|
- **Touch-Friendly**: Optimized for mobile interactions
|
|
- **Performance**: Optimized images and lazy loading
|
|
|
|
## Development Workflow
|
|
|
|
### Local Development
|
|
```bash
|
|
# Install dependencies
|
|
npm install
|
|
|
|
# Start development server
|
|
npm run dev
|
|
|
|
# Run linting
|
|
npm run lint
|
|
|
|
# Run tests
|
|
npm run test
|
|
|
|
# Build for production
|
|
npm run build
|
|
```
|
|
|
|
### Testing Strategy
|
|
- **Unit Tests**: Vitest with Testing Library
|
|
- **Integration Tests**: Component and API testing
|
|
- **E2E Tests**: End-to-end user flow testing
|
|
- **Coverage**: Code coverage reporting
|
|
|
|
### Continuous Integration
|
|
- **Linting**: ESLint configuration
|
|
- **Type Checking**: TypeScript compilation
|
|
- **Testing**: Automated test execution
|
|
- **Build**: Production build verification
|
|
- **Bundle Analysis**: Size budget enforcement
|
|
|
|
## Database Architecture
|
|
|
|
### Schema Design
|
|
- **Artists Table**: Artist information and metadata
|
|
- **Bookings Table**: Appointment and booking data
|
|
- **Services Table**: Tattoo services and pricing
|
|
- **Users Table**: User authentication and profiles
|
|
- **Contacts Table**: Contact form submissions
|
|
|
|
### Migrations
|
|
- **Version Control**: SQL migration files in `sql/migrations/`
|
|
- **Environment Management**: Separate preview and production migrations
|
|
- **Rollback Support**: Down migration scripts available
|
|
|
|
## Deployment Architecture
|
|
|
|
### Hosting
|
|
- **Platform**: Cloudflare Pages
|
|
- **Build Process**: OpenNext for Next.js optimization
|
|
- **Static Assets**: Optimized for CDN delivery
|
|
- **Edge Computing**: Global distribution
|
|
|
|
### Database
|
|
- **Platform**: Cloudflare D1
|
|
- **Type**: SQLite-compatible serverless database
|
|
- **Backups**: Automated backup system
|
|
- **Local Development**: Local D1 instance for development
|
|
|
|
### Performance Optimization
|
|
- **Bundle Size**: Enforced size budgets (3MB total, 1.5MB assets)
|
|
- **Image Optimization**: Static image serving
|
|
- **Code Splitting**: Automatic route-based splitting
|
|
- **Caching**: Aggressive caching strategies
|
|
|
|
## Security Considerations
|
|
|
|
### Authentication
|
|
- **NextAuth.js**: Secure authentication framework
|
|
- **Supabase Adapter**: User management integration
|
|
- **Session Management**: Secure session handling
|
|
- **OAuth Integration**: Social login support
|
|
|
|
### Data Protection
|
|
- **Input Validation**: Zod schema validation
|
|
- **SQL Injection Prevention**: Parameterized queries
|
|
- **XSS Protection**: Content security policies
|
|
- **File Upload Security**: Type and size validation
|
|
|
|
## API Integration
|
|
|
|
### External Services
|
|
- **Cloudflare R2**: File storage and CDN
|
|
- **Stripe**: Payment processing
|
|
- **Afterpay**: Alternative payment method
|
|
- **Email Service**: Contact form notifications
|
|
|
|
### Internal APIs
|
|
- **Artist API**: Artist data management
|
|
- **Booking API**: Appointment scheduling
|
|
- **Search API**: Content search functionality
|
|
- **Upload API**: File upload handling
|
|
|
|
## Monitoring and Analytics
|
|
|
|
### Performance Monitoring
|
|
- **Bundle Analysis**: Automated size reporting
|
|
- **Core Web Vitals**: Performance metrics
|
|
- **Error Tracking**: Application error monitoring
|
|
- **Uptime Monitoring**: Service availability
|
|
|
|
### Business Analytics
|
|
- **User Engagement**: Page views and interactions
|
|
- **Conversion Tracking**: Booking completion rates
|
|
- **Popular Content**: Most viewed artists and services
|
|
- **Contact Analytics**: Contact form submissions
|
|
|
|
## Maintenance and Updates
|
|
|
|
### Regular Maintenance
|
|
- **Dependency Updates**: Automated security updates
|
|
- **Content Updates**: Artist information and portfolios
|
|
- **Performance Monitoring**: Regular performance audits
|
|
- **Security Audits**: Security vulnerability scanning
|
|
|
|
### Update Process
|
|
1. **Development**: Feature development in feature branches
|
|
2. **Testing**: Comprehensive testing in staging environment
|
|
3. **Deployment**: Automated deployment to production
|
|
4. **Monitoring**: Post-deployment monitoring and rollback capability
|
|
|
|
## Future Enhancements
|
|
|
|
### Planned Features
|
|
- **Online Booking**: Full appointment scheduling system
|
|
- **Payment Integration**: Online deposit and payment processing
|
|
- **Artist Portfolios**: Enhanced portfolio management
|
|
- **Customer Reviews**: Customer testimonial system
|
|
- **SMS Notifications**: Appointment reminders via SMS
|
|
|
|
### Technical Improvements
|
|
- **Progressive Web App**: PWA capabilities for mobile
|
|
- **Offline Support**: Service worker implementation
|
|
- **Advanced Search**: Enhanced search with filtering
|
|
- **Accessibility**: WCAG compliance improvements
|
|
- **Performance**: Further optimization and caching
|
|
|
|
## Contributing Guidelines
|
|
|
|
### Development Standards
|
|
- **Code Style**: ESLint and Prettier configuration
|
|
- **Type Safety**: Strict TypeScript configuration
|
|
- **Testing**: Test coverage requirements
|
|
- **Documentation**: Comprehensive code documentation
|
|
|
|
### Git Workflow
|
|
- **Branch Strategy**: Feature branch workflow
|
|
- **Commit Messages**: Conventional commit format
|
|
- **Pull Requests**: Code review requirements
|
|
- **Deployment**: Automated deployment from main branch
|
|
|
|
## Support and Contact
|
|
|
|
### Technical Support
|
|
- **Documentation**: Comprehensive project documentation
|
|
- **Issue Tracking**: GitHub issues for bug reports
|
|
- **Community**: Developer community support
|
|
- **Emergency**: Direct contact for critical issues
|
|
|
|
### Business Contact
|
|
- **Studio**: United Tattoo, Fountain, CO
|
|
- **Website**: Live deployment URL
|
|
- **Phone**: Studio contact number
|
|
- **Email**: Business email address
|
|
|
|
---
|
|
|
|
*This documentation was generated on 2025-10-07 and reflects the current state of the United Tattoo project. For the most up-to-date information, please refer to the source code and project repository.*
|