pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-27 21:27:01 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add blog, media, and support apps, implement ride credits and image API, and remove toplist feature.

Browse Source
This commit is contained in:
pacnpal
2025-12-26 15:15:28 -05:00
parent cd8868a591
commit 00699d53b4
77 changed files with 7274 additions and 538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

966
source_docs/COMPONENTS.md Normal file
View File

@@ -0,0 +1,966 @@
# ThrillWiki Component Library
> Complete UI component documentation
---
## Table of Contents
1. [Layout Components](#layout-components)
2. [Navigation Components](#navigation-components)
3. [Display Components](#display-components)
4. [Form Components](#form-components)
5. [Feedback Components](#feedback-components)
6. [Data Display](#data-display)
7. [Entity Components](#entity-components)
8. [Specialty Components](#specialty-components)
---
## Component Architecture
```
Components
├── Layout
│ ├── Header
│ ├── Footer
│ ├── Sidebar
│ └── PageContainer
│
├── Navigation
│ ├── MainNav
│ ├── TabNav
│ ├── Breadcrumbs
│ └── Pagination
│
├── Display
│ ├── Card
│ ├── Badge
│ ├── Avatar
│ └── Image
│
├── Forms
│ ├── Input
│ ├── Select
│ ├── Checkbox
│ └── Button
│
├── Feedback
│ ├── Toast
│ ├── Alert
│ ├── Modal
│ └── Loading
│
├── Data
│ ├── Table
│ ├── List
│ ├── Stats
│ └── Charts
│
└── Entity
├── ParkCard
├── RideCard
├── ReviewCard
└── CreditCard
```
---
## Layout Components
### Header
The main navigation bar at the top of every page.
```
┌─────────────────────────────────────────────────────────────────┐
│ 🎢 ThrillWiki Parks Rides Companies 🔍 👤 🔔 │
└─────────────────────────────────────────────────────────────────┘
```
**Features:**
- Logo/brand link to homepage
- Primary navigation links
- Search button/input
- User menu (avatar dropdown)
- Notification bell
- Mobile hamburger menu
**Variants:**
- Default: Full navigation
- Minimal: Logo only (auth pages)
- Admin: Additional admin links
---
### Footer
Site-wide footer with links and information.
```
┌─────────────────────────────────────────────────────────────────┐
│ │
│ ThrillWiki Explore Community Legal │
│ The ultimate Parks Guidelines Terms │
│ theme park Rides Leaderboard Privacy │
│ database Companies Blog Contact │
│ Models Discord │
│ │
│ ───────────────────────────────────────────────────────────── │
│ © 2024 ThrillWiki [Twitter] [Discord] │
│ │
└─────────────────────────────────────────────────────────────────┘
```
**Sections:**
- Brand info
- Navigation columns
- Social links
- Copyright
---
### PageContainer
Wrapper component for consistent page layout.
```
┌─────────────────────────────────────────────────────────────────┐
│ HEADER │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ PAGE CONTENT │ │
│ │ │ │
│ │ max-width: 1280px │ │
│ │ padding: responsive │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
├─────────────────────────────────────────────────────────────────┤
│ FOOTER │
└─────────────────────────────────────────────────────────────────┘
```
**Props:**
| Prop | Type | Description |
|------|------|-------------|
| `maxWidth` | string | Container max width |
| `padding` | string | Content padding |
| `className` | string | Additional classes |
---
### Sidebar
Collapsible sidebar for settings and admin pages.
```
┌──────────────────┐
│ Section 1 │
│ ├── Item 1 │
│ ├── Item 2 ● │ ← Active
│ └── Item 3 │
│ │
│ Section 2 │
│ ├── Item 4 │
│ └── Item 5 │
│ │
│ [Collapse ◀] │
└──────────────────┘
```
---
## Navigation Components
### MainNav
Primary navigation in header.
```
┌────────────────────────────────────────────────────┐
│ Parks ▾ Rides ▾ Companies ▾ More ▾ │
└────────────────────────────────────────────────────┘
│
▼
┌────────────────────┐
│ All Parks │
│ Parks Nearby │
│ ───────────── │
│ Add New Park │
└────────────────────┘
```
**Features:**
- Dropdown menus on hover/click
- Mobile drawer navigation
- Active state highlighting
- Keyboard navigation
---
### TabNav
Horizontal tab navigation within pages.
```
┌─────────────────────────────────────────────────────────────┐
│ Overview Rides Reviews Photos History │
│ ═════════ │
└─────────────────────────────────────────────────────────────┘
```
**Props:**
| Prop | Type | Description |
|------|------|-------------|
| `tabs` | Tab[] | Array of tab definitions |
| `activeTab` | string | Currently active tab |
| `onChange` | function | Tab change handler |
---
### Breadcrumbs
Hierarchical navigation path.
```
Home > Parks > Cedar Point > Steel Vengeance
```
**Features:**
- Clickable ancestors
- Current page (non-clickable)
- Truncation for long paths
- Schema.org markup
---
### Pagination
Navigate through paginated content.
```
┌─────────────────────────────────────────────────────┐
│ ◀ Previous 1 2 [3] 4 5 ... 12 Next ▶ │
└─────────────────────────────────────────────────────┘
```
**Props:**
| Prop | Type | Description |
|------|------|-------------|
| `currentPage` | number | Current page |
| `totalPages` | number | Total page count |
| `onPageChange` | function | Page change handler |
---
## Display Components
### Card
Versatile container for content.
```
┌─────────────────────────────────────┐
│ ┌─────────────────────────────┐ │
│ │ │ │
│ │ IMAGE │ │
│ │ │ │
│ └─────────────────────────────┘ │
│ │
│ Title │
│ Subtitle or description │
│ │
│ [Action 1] [Action 2] │
│ │
└─────────────────────────────────────┘
```
**Variants:**
| Variant | Description |
|---------|-------------|
| Default | Basic card with border |
| Elevated | Shadow for depth |
| Interactive | Hover effects, clickable |
| Glass | Frosted glass (dark mode) |
---
### Badge
Small label for status or categories.
```
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Operating │ │ Coaster │ │ New! │
└──────────────┘ └──────────────┘ └──────────────┘
(green) (blue) (accent)
```
**Variants:**
| Variant | Usage |
|---------|-------|
| Default | General labels |
| Success | Operating, approved |
| Warning | Under construction |
| Destructive | Closed, error |
| Outline | Secondary importance |
---
### Avatar
User or entity image.
```
┌─────┐ ┌─────┐ ┌─────┐
│ │ │ │ │ AB │
│ 👤 │ │ IMG │ │ │
│ │ │ │ │ │
└─────┘ └─────┘ └─────┘
Icon Image Initials
```
**Sizes:**
- `sm`: 24px
- `md`: 40px (default)
- `lg`: 64px
- `xl`: 96px
---
### Image
Optimized image display with loading states.
```
┌─────────────────────────────────────┐
│ │
│ Loading... ░░░░░░░░░░░░░ │
│ │
└─────────────────────────────────────┘
↓
┌─────────────────────────────────────┐
│ │
│ Loaded Image │
│ │
└─────────────────────────────────────┘
```
**Features:**
- Lazy loading
- Blur placeholder
- Error fallback
- Responsive sizes
- CloudFlare Images integration
---
## Form Components
### Input
Text input field.
```
┌─────────────────────────────────────────────────────┐
│ Label │
├─────────────────────────────────────────────────────┤
│ Placeholder text... │
└─────────────────────────────────────────────────────┘
Hint text or validation message
```
**States:**
| State | Appearance |
|-------|------------|
| Default | Standard border |
| Focused | Primary ring |
| Error | Red border + message |
| Disabled | Muted, non-interactive |
**Types:**
- Text, Email, Password, Number
- Search (with icon)
- Textarea (multiline)
---
### Select
Dropdown selection.
```
┌─────────────────────────────────────────────────────┐
│ Select an option... ▾ │
└─────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────┐
│ Option 1 │
│ Option 2 ✓ │
│ Option 3 │
│ ─────────────────────────── │
│ Group Header │
│ Option 4 │
│ Option 5 │
└─────────────────────────────────────────────────────┘
```
**Features:**
- Searchable options
- Option groups
- Multi-select variant
- Clear selection
---
### Checkbox
Boolean or multi-selection.
```
☐ Unchecked option
☑ Checked option
☐ Unchecked option
```
**Variants:**
- Single checkbox
- Checkbox group
- Indeterminate state
---
### Radio
Single selection from options.
```
○ Option 1
● Option 2 (selected)
○ Option 3
```
---
### Switch
Toggle between two states.
```
Off ○──────● On
●──────○
```
---
### Button
Clickable action trigger.
```
┌────────────────┐ ┌────────────────┐ ┌────────────────┐
│ Primary │ │ Secondary │ │ Outline │
└────────────────┘ └────────────────┘ └────────────────┘
┌────────────────┐ ┌────────────────┐ ┌────────────────┐
│ Ghost │ │ Destructive │ │ Loading │
└────────────────┘ └────────────────┘ └────────────────┘
```
**Variants:**
| Variant | Usage |
|---------|-------|
| Primary | Main actions |
| Secondary | Secondary actions |
| Outline | Bordered, less emphasis |
| Ghost | Minimal, icon buttons |
| Destructive | Delete, dangerous |
| Link | Text-only, inline |
**Sizes:**
- `sm`: Compact
- `default`: Standard
- `lg`: Large
- `icon`: Square, icon-only
---
### DatePicker
Date selection component.
```
┌─────────────────────────────────────────────────────┐
│ 📅 Select date... │
└─────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────┐
│ ◀ December 2024 ▶ │
├─────────────────────────────────────────────────────┤
│ Su Mo Tu We Th Fr Sa │
│ 1 2 3 4 5 6 7 │
│ 8 9 10 11 12 13 14 │
│ 15 16 17 18 19 [20] 21 │
│ 22 23 24 25 26 27 28 │
│ 29 30 31 │
└─────────────────────────────────────────────────────┘
```
**Features:**
- Month/year navigation
- Date range selection
- Disabled dates
- Date precision selector
---
### Slider
Range value selection.
```
0 100
●───────────────────●────────────────────────────●
50
```
**Props:**
| Prop | Type | Description |
|------|------|-------------|
| `min` | number | Minimum value |
| `max` | number | Maximum value |
| `step` | number | Value increment |
| `value` | number | Current value |
---
## Feedback Components
### Toast
Temporary notification message.
```
┌─────────────────────────────────────────────────────┐
│ ✓ Changes saved successfully ✕ │
└─────────────────────────────────────────────────────┘
```
**Variants:**
| Variant | Usage |
|---------|-------|
| Default | General info |
| Success | Positive confirmation |
| Warning | Caution notice |
| Error | Error occurred |
---
### Alert
Inline notification.
```
┌─────────────────────────────────────────────────────┐
│ ⚠️ Warning │
│ This action cannot be undone. │
└─────────────────────────────────────────────────────┘
```
**Variants:**
- Info, Success, Warning, Error
---
### Modal / Dialog
Overlay for focused content.
```
┌─────────────────────────────────────────────────────┐
│ │
│ ┌───────────────────────────────────────────┐ │
│ │ Dialog Title ✕ │ │
│ ├───────────────────────────────────────────┤ │
│ │ │ │
│ │ Dialog content goes here │ │
│ │ │ │
│ ├───────────────────────────────────────────┤ │
│ │ [Cancel] [Confirm] │ │
│ └───────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────┘
```
**Types:**
- Alert Dialog (confirmation)
- Form Dialog (input)
- Info Dialog (display)
- Full-screen Dialog
---
### Loading States
Various loading indicators.
**Spinner:**
```
◠◡◠
```
**Skeleton:**
```
┌─────────────────────────────────────────────────────┐
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
│ ░░░░░░░░░░░░░░░░ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░ │
└─────────────────────────────────────────────────────┘
```
**Progress:**
```
[████████████░░░░░░░░] 60%
```
---
### Empty State
No content placeholder.
```
┌─────────────────────────────────────────────────────┐
│ │
│ 🎢 │
│ │
│ No rides found │
│ Try adjusting your filters │
│ │
│ [Clear Filters] │
│ │
└─────────────────────────────────────────────────────┘
```
---
## Data Display
### Table
Tabular data display.
```
┌────────────────┬────────────────┬────────────────┬────────────┐
│ Name │ Type │ Status │ Actions │
├────────────────┼────────────────┼────────────────┼────────────┤
│ Cedar Point │ Theme Park │ Operating │ [View] │
│ Six Flags │ Theme Park │ Operating │ [View] │
│ Dreamworld │ Theme Park │ Operating │ [View] │
└────────────────┴────────────────┴────────────────┴────────────┘
```
**Features:**
- Sortable columns
- Row selection
- Pagination
- Filtering
- Column resizing
---
### Stats Card
Metric display.
```
┌─────────────────────────┐
│ Total Parks │
│ ──────────── │
│ 1,234 │
│ ↑ 12% from last month │
└─────────────────────────┘
```
---
### Rating Display
Star rating visualization.
```
★★★★☆ 4.2 (156 reviews)
```
**Props:**
| Prop | Type | Description |
|------|------|-------------|
| `rating` | number | 0-5 rating value |
| `count` | number | Review count |
| `size` | string | Star size |
---
## Entity Components
### ParkCard
Park preview card.
```
┌─────────────────────────────────────┐
│ ┌─────────────────────────────┐ │
│ │ │ │
│ │ PARK IMAGE │ │
│ │ │ │
│ └─────────────────────────────┘ │
│ │
│ Cedar Point │
│ 📍 Sandusky, Ohio, USA │
│ 🎢 72 rides ★ 4.8 (156) │
│ │
│ [Operating] │
│ │
└─────────────────────────────────────┘
```
**Displays:**
- Park image
- Name
- Location
- Ride count
- Rating
- Status badge
---
### RideCard
Ride preview card.
```
┌─────────────────────────────────────┐
│ ┌─────────────────────────────┐ │
│ │ │ │
│ │ RIDE IMAGE │ │
│ │ │ │
│ └─────────────────────────────┘ │
│ │
│ Steel Vengeance │
│ Cedar Point │
│ ⚡ 121 km/h 📏 62.5m │
│ │
│ [Coaster] [Operating] │
│ │
└─────────────────────────────────────┘
```
**Displays:**
- Ride image
- Name
- Park name
- Key specs (speed, height)
- Category & status badges
---
### ReviewCard
User review display.
```
┌─────────────────────────────────────────────────────┐
│ ┌─────┐ username ★★★★★ │
│ │ │ Reviewed 2 days ago │
│ └─────┘ │
│ │
│ "Amazing coaster! The first drop is incredible │
│ and the airtime moments are relentless." │
│ │
│ 👍 24 👎 2 [Reply] [Report] │
│ │
└─────────────────────────────────────────────────────┘
```
---
### CreditCard
Ride credit display.
```
┌─────────────────────────────────────────────────────┐
│ ┌─────────────┐ Steel Vengeance │
│ │ │ Cedar Point │
│ │ IMG │ │
│ │ │ ×12 rides │
│ └─────────────┘ Last: August 2024 │
│ │
│ [−] 12 [+] [Edit] │
│ │
└─────────────────────────────────────────────────────┘
```
---
## Specialty Components
### UnitDisplay
Displays values with unit conversion.
```
Speed: 121 km/h (75 mph)
or
Speed: 75 mph
```
**Types:**
- Speed (km/h, mph)
- Distance (m, ft)
- Height (m, ft)
- Weight (kg, lbs)
---
### Map
Interactive Leaflet map.
```
┌─────────────────────────────────────────────────────┐
│ │
│ 📍 │
│ 📍 📍 │
│ 📍 │
│ 📍 │
│ 📍 │
│ │
│ [−][+] © OpenStreetMap │
└─────────────────────────────────────────────────────┘
```
**Features:**
- Marker clusters
- Custom markers
- Popups
- Zoom controls
- Full-screen toggle
---
### Timeline
Chronological event display.
```
│
├── 2024 ─── Renovation completed
│
├── 2022 ─── Major refurbishment
│
├── 2018 ─── Original opening
│
▼
```
---
### Diff Viewer
Side-by-side comparison.
```
┌────────────────────────┬────────────────────────┐
│ BEFORE │ AFTER │
├────────────────────────┼────────────────────────┤
│ Name: Old Name │ Name: New Name ← │
│ Status: Closed │ Status: Closed │
│ Rides: 50 │ Rides: 52 ← │
└────────────────────────┴────────────────────────┘
```
---
### ImageGallery
Photo gallery with lightbox.
```
┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐
│ │ │ │ │ │ │ │
│ 1 │ │ 2 │ │ 3 │ │ +24 │
│ │ │ │ │ │ │ │
└────────┘ └────────┘ └────────┘ └────────┘
```
**Features:**
- Grid layout
- Lightbox view
- Navigation (prev/next)
- Zoom
- Download
---
### SearchAutocomplete
Search with suggestions.
```
┌─────────────────────────────────────────────────────┐
│ 🔍 cedar │
└─────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────┐
│ 🏰 Cedar Point Park │
│ 🎢 Cedar Creek Mine Ride Ride │
│ 🏢 Cedar Fair Company │
└─────────────────────────────────────────────────────┘
```
---
### Tooltip
Hover information.
```
┌─────────────────────────┐
What is RMC? ───────│ Rocky Mountain │
│ Construction: A │
│ manufacturer known │
│ for hybrid coasters │
└─────────────────────────┘
```
---
### HoverCard
Rich preview on hover.
```
┌─────────────────────────┐
│ ┌─────────────────┐ │
│ │ IMAGE │ │
Cedar Point ────────────│ └─────────────────┘ │
│ Cedar Point │
│ Sandusky, Ohio │
│ 🎢 72 rides ★ 4.8 │
│ │
│ [View Park →] │
└─────────────────────────┘
```
---
## Related Documentation
- [Site Overview](./SITE_OVERVIEW.md)
- [Design System](./DESIGN_SYSTEM.md)
- [Pages](./PAGES.md)
- [User Flows](./USER_FLOWS.md)

495
source_docs/DESIGN_SYSTEM.md Normal file
View File

@@ -0,0 +1,495 @@
# ThrillWiki Design System
> Visual identity, colors, typography, and styling guidelines
---
## Brand Identity
### Logo & Name
- **Name**: ThrillWiki (with optional "(Beta)" suffix)
- **Tagline**: The Ultimate Theme Park Database
- **Personality**: Enthusiastic, trustworthy, community-driven
### Visual Style
- Modern and clean
- Subtle gradients and glow effects
- Smooth animations
- Card-based layouts
- Generous whitespace
---
## Color System
### Light Mode Palette
```
┌─────────────────────────────────────────────────────────────┐
│ LIGHT MODE │
├─────────────────────────────────────────────────────────────┤
│ │
│ Background Foreground Primary │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ │ │ │ │ │ │
│ │ White │ │ Dark │ │ Blue │ │
│ │ #FFFFFF │ │ #1A1A2E │ │ #3B82F6 │ │
│ │ │ │ │ │ │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ Secondary Muted Accent │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ │ │ │ │ │ │
│ │ Light │ │ Gray │ │ Cyan │ │
│ │ Gray │ │ Text │ │ Glow │ │
│ │ │ │ │ │ │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
```
### Dark Mode Palette
```
┌─────────────────────────────────────────────────────────────┐
│ DARK MODE │
├─────────────────────────────────────────────────────────────┤
│ │
│ Background Foreground Primary │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │░░░░░░░░░░│ │ │ │▓▓▓▓▓▓▓▓▓▓│ │
│ │░ Dark ░░│ │ Light │ │▓ Blue ▓▓│ │
│ │░ Navy ░░│ │ Gray │ │▓ Glow ▓▓│ │
│ │░░░░░░░░░░│ │ │ │▓▓▓▓▓▓▓▓▓▓│ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ Secondary Muted Accent │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │▒▒▒▒▒▒▒▒▒▒│ │ │ │▓▓▓▓▓▓▓▓▓▓│ │
│ │▒ Slate ▒▒│ │ Muted │ │▓ Cyan ▓▓│ │
│ │▒ Blue ▒▒│ │ Gray │ │▓ Accent▓▓│ │
│ │▒▒▒▒▒▒▒▒▒▒│ │ │ │▓▓▓▓▓▓▓▓▓▓│ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
```
### Semantic Colors
| Token | Purpose | Light | Dark |
|-------|---------|-------|------|
| `--background` | Page background | White | Dark navy |
| `--foreground` | Primary text | Dark gray | Light gray |
| `--primary` | Buttons, links | Blue | Blue |
| `--secondary` | Secondary UI | Light gray | Slate |
| `--muted` | Disabled, hints | Gray | Muted gray |
| `--accent` | Highlights | Cyan | Cyan |
| `--destructive` | Errors, delete | Red | Red |
| `--success` | Confirmations | Green | Green |
| `--warning` | Alerts | Amber | Amber |
### Gradients
| Name | Usage |
|------|-------|
| Primary Gradient | Hero sections, featured cards |
| Glow Effect | Hover states, focus rings |
| Subtle Gradient | Backgrounds, depth |
---
## Typography
### Font Family
```
Primary Font: Inter (Sans-Serif)
├── Weights: 400, 500, 600, 700
├── Used for: All UI text
└── Fallback: system-ui, sans-serif
```
### Type Scale
| Size | Name | Usage |
|------|------|-------|
| 48px | Display | Hero headlines |
| 36px | H1 | Page titles |
| 30px | H2 | Section headers |
| 24px | H3 | Card titles |
| 20px | H4 | Subheadings |
| 16px | Body | Default text |
| 14px | Small | Secondary text |
| 12px | Caption | Labels, hints |
### Text Styles
```
┌────────────────────────────────────────┐
│ HEADING STYLES │
├────────────────────────────────────────┤
│ │
│ Page Title │
│ ══════════════════════ │
│ 36px · Bold · Foreground │
│ │
│ Section Header │
│ ──────────────── │
│ 24px · Semibold · Foreground │
│ │
│ Card Title │
│ 18px · Medium · Foreground │
│ │
│ Body Text │
│ 16px · Regular · Muted Foreground │
│ │
│ Caption │
│ 12px · Regular · Muted │
│ │
└────────────────────────────────────────┘
```
---
## Spacing System
### Base Unit
- 4px base unit
- All spacing is multiples of 4
### Spacing Scale
| Token | Size | Common Usage |
|-------|------|--------------|
| `space-1` | 4px | Tight gaps |
| `space-2` | 8px | Icon gaps |
| `space-3` | 12px | Small padding |
| `space-4` | 16px | Default padding |
| `space-6` | 24px | Section gaps |
| `space-8` | 32px | Large gaps |
| `space-12` | 48px | Section margins |
| `space-16` | 64px | Page sections |
---
## Border Radius
| Token | Size | Usage |
|-------|------|-------|
| `rounded-sm` | 4px | Small elements |
| `rounded` | 8px | Buttons, inputs |
| `rounded-lg` | 12px | Cards |
| `rounded-xl` | 16px | Large cards |
| `rounded-full` | 9999px | Pills, avatars |
---
## Shadows
### Light Mode Shadows
```
┌─────────────────────────────────────────┐
│ SHADOW LEVELS │
├─────────────────────────────────────────┤
│ │
│ ┌───────────────┐ Shadow-sm │
│ │ │ Subtle, close │
│ │ Card │ │
│ │ │ │
│ └───────────────┘ │
│ ░░░░░░░░░░░░░░░ │
│ │
│ ┌───────────────┐ Shadow-md │
│ │ │ Default cards │
│ │ Card │ │
│ │ │ │
│ └───────────────┘ │
│ ░░░░░░░░░░░░░░░░░ │
│ │
│ ┌───────────────┐ Shadow-lg │
│ │ │ Elevated, modals │
│ │ Card │ │
│ │ │ │
│ └───────────────┘ │
│ ░░░░░░░░░░░░░░░░░░░ │
│ │
└─────────────────────────────────────────┘
```
### Glow Effects (Dark Mode)
| Effect | Usage |
|--------|-------|
| Primary Glow | Focused inputs, active buttons |
| Accent Glow | Hover states on cards |
| Subtle Glow | Background depth |
---
## Animation
### Timing Functions
| Name | Curve | Usage |
|------|-------|-------|
| `ease-smooth` | cubic-bezier(0.4, 0, 0.2, 1) | Most transitions |
| `ease-bounce` | cubic-bezier(0.68, -0.55, 0.265, 1.55) | Playful elements |
| `ease-out` | cubic-bezier(0, 0, 0.2, 1) | Exits |
### Duration
| Speed | Duration | Usage |
|-------|----------|-------|
| Fast | 150ms | Hover states |
| Normal | 200ms | Default transitions |
| Slow | 300ms | Page transitions |
| Slower | 500ms | Complex animations |
### Common Animations
```
┌─────────────────────────────────────────┐
│ ANIMATION PATTERNS │
├─────────────────────────────────────────┤
│ │
│ Fade In │
│ ┌───┐ → ┌───┐ → ┌───┐ │
│ │ ░ │ │ ▒ │ │ █ │ │
│ └───┘ └───┘ └───┘ │
│ 0% 50% 100% │
│ │
│ Slide Up │
│ ┌───┐ │
│ │ │ ↑ │
│ └───┘ │
│ ↑ │
│ ┌───┐ │
│ │ █ │ │
│ └───┘ │
│ │
│ Scale │
│ ┌─┐ → ┌───┐ → ┌─────┐ │
│ │ │ │ │ │ │ │
│ └─┘ └───┘ └─────┘ │
│ 95% 100% 100% │
│ │
└─────────────────────────────────────────┘
```
---
## Components Overview
### Button Variants
```
┌─────────────────────────────────────────────────────────────┐
│ BUTTON STYLES │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────┐ Primary (Default) │
│ │ Button │ Blue background, white text │
│ └────────────┘ │
│ │
│ ┌────────────┐ Secondary │
│ │ Button │ Gray background, dark text │
│ └────────────┘ │
│ │
│ ┌────────────┐ Outline │
│ │ Button │ Border only, transparent background │
│ └────────────┘ │
│ │
│ ┌────────────┐ Ghost │
│ │ Button │ No border, transparent background │
│ └────────────┘ │
│ │
│ ┌────────────┐ Destructive │
│ │ Delete │ Red background, for dangerous actions │
│ └────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
```
### Card Styles
```
┌─────────────────────────────────────────────────────────────┐
│ CARD VARIANTS │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────┐ Default Card │
│ │ │ White/dark background │
│ │ Content goes here │ Subtle border │
│ │ │ Rounded corners │
│ └─────────────────────────┘ │
│ │
│ ┌─────────────────────────┐ Interactive Card │
│ │ ┌─────────────────────┐ │ Hover effect │
│ │ │ Image │ │ Cursor pointer │
│ │ └─────────────────────┘ │ Scale on hover │
│ │ Title │ │
│ │ Description │ │
│ └─────────────────────────┘ │
│ │
│ ┌─────────────────────────┐ Glass Card (Dark Mode) │
│ │░░░░░░░░░░░░░░░░░░░░░░░░░│ Semi-transparent │
│ │░ Frosted glass effect ░░│ Backdrop blur │
│ │░░░░░░░░░░░░░░░░░░░░░░░░░│ Subtle glow │
│ └─────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
```
### Input States
```
┌─────────────────────────────────────────────────────────────┐
│ INPUT STATES │
├─────────────────────────────────────────────────────────────┤
│ │
│ Default │
│ ┌─────────────────────────────────────┐ │
│ │ Placeholder text... │ │
│ └─────────────────────────────────────┘ │
│ │
│ Focused │
│ ╔═════════════════════════════════════╗ ← Primary ring │
│ ║ Input text ║ │
│ ╚═════════════════════════════════════╝ │
│ │
│ Error │
│ ┌─────────────────────────────────────┐ ← Red border │
│ │ Invalid input │ │
│ └─────────────────────────────────────┘ │
│ ⚠ Error message appears here │
│ │
│ Disabled │
│ ┌─────────────────────────────────────┐ ← Muted colors │
│ │ Cannot edit │ │
│ └─────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
```
---
## Layout Patterns
### Page Layout
```
┌───────────────────────────────────────────────────────────────┐
│ HEADER │
│ Logo Navigation Search User Menu │
├───────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ MAIN CONTENT │ │
│ │ │ │
│ │ Max Width: 1280px │ │
│ │ Padding: 16-24px (responsive) │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
├───────────────────────────────────────────────────────────────┤
│ FOOTER │
│ Links Social Copyright │
└───────────────────────────────────────────────────────────────┘
```
### Grid System
```
Desktop (1024px+) Tablet (768px+) Mobile (<768px)
┌───┬───┬───┬───┐ ┌────┬────┐ ┌────────┐
│ │ │ │ │ │ │ │ │ │
│ 1 │ 2 │ 3 │ 4 │ │ 1 │ 2 │ │ 1 │
│ │ │ │ │ │ │ │ │ │
├───┼───┼───┼───┤ ├────┼────┤ ├────────┤
│ │ │ │ │ │ │ │ │ │
│ 5 │ 6 │ 7 │ 8 │ │ 3 │ 4 │ │ 2 │
│ │ │ │ │ │ │ │ │ │
└───┴───┴───┴───┘ └────┴────┘ └────────┘
4 columns 2 columns 1 column
```
---
## Icons
### Icon Library
- **Lucide React** - Primary icon set
- Consistent 24px default size
- 1.5px stroke width
- Matches text color by default
### Common Icons
| Icon | Usage |
|------|-------|
| Search | Search functionality |
| Menu | Mobile navigation |
| User | Profile, account |
| Heart | Favorites, likes |
| Star | Ratings, reviews |
| Map Pin | Location features |
| Calendar | Dates, schedules |
| Camera | Photo uploads |
| Edit | Edit actions |
| Trash | Delete actions |
| Check | Success, completion |
| X | Close, cancel |
| ChevronRight | Navigation, expand |
| ExternalLink | External links |
---
## Responsive Breakpoints
| Breakpoint | Width | Target |
|------------|-------|--------|
| `sm` | 640px | Large phones |
| `md` | 768px | Tablets |
| `lg` | 1024px | Small laptops |
| `xl` | 1280px | Desktops |
| `2xl` | 1536px | Large screens |
---
## Accessibility Guidelines
### Color Contrast
- Normal text: 4.5:1 minimum
- Large text: 3:1 minimum
- Interactive elements: 3:1 minimum
### Focus States
- Visible focus ring on all interactive elements
- Primary color ring (2px offset)
- Never remove focus outlines
### Motion
- Respect `prefers-reduced-motion`
- Provide alternatives for animations
- No auto-playing videos
---
## Dark Mode Considerations
1. **Reduce contrast** - Pure white (#FFF) is too harsh; use off-white
2. **Elevate with lightness** - Higher elements are slightly lighter
3. **Subtle borders** - Use semi-transparent borders
4. **Glow effects** - Replace shadows with subtle glows
5. **Image dimming** - Slightly reduce image brightness
---
## Related Documentation
- [Site Overview](./SITE_OVERVIEW.md)
- [Pages Guide](./PAGES.md)
- [Components](./COMPONENTS.md)
- [User Flows](./USER_FLOWS.md)

1057
source_docs/PAGES.md Normal file
View File

File diff suppressed because it is too large Load Diff

244
source_docs/SITE_OVERVIEW.md Normal file
View File

@@ -0,0 +1,244 @@
# ThrillWiki Site Overview
> The Ultimate Theme Park & Roller Coaster Database
ThrillWiki is a comprehensive, community-driven platform for theme park enthusiasts to discover, document, and celebrate the world's attractions.
---
## Mission Statement
To be the definitive source for accurate, community-verified information about theme parks, rides, and the companies that create them.
---
## Site Map
```
ThrillWiki
├── 🏠 Homepage
│ ├── Hero Search
│ ├── Discovery Tabs (11 categories)
│ └── Recent Changes Feed
│
├── 🎢 Parks
│ ├── /parks - All Parks Listing
│ ├── /parks/nearby - Location-Based Discovery
│ └── /parks/{slug} - Individual Park Pages
│ ├── Overview Tab
│ ├── Rides Tab
│ ├── Reviews Tab
│ ├── Photos Tab
│ └── History Tab
│
├── 🎠 Rides
│ ├── /rides - All Rides Listing
│ └── /parks/{park}/rides/{ride} - Individual Ride Pages
│ ├── Overview Tab
│ ├── Specifications Tab
│ ├── Reviews Tab
│ ├── Photos Tab
│ └── History Tab
│
├── 🏭 Companies
│ ├── /manufacturers - Ride Manufacturers
│ ├── /designers - Ride Designers
│ ├── /operators - Park Operators
│ └── /owners - Property Owners
│
├── 📋 Ride Models
│ └── /ride-models/{slug} - Standard Ride Designs
│
├── 🔍 Search
│ └── /search - Global Search with Filters
│
├── 👤 User Features
│ ├── /auth - Sign In / Sign Up
│ ├── /profile/{username} - Public Profiles
│ ├── /settings - Account Settings
│ ├── /my-credits - Ride Credits Dashboard
│ └── /my-lists - Personal Rankings
│
├── ✏️ Contribution
│ ├── /submit/* - Content Submission Forms
│ └── /my-submissions - Submission History
│
├── 🛡️ Moderation
│ ├── /moderation - Queue Dashboard
│ └── /moderation/{id} - Review Interface
│
├── ⚙️ Admin
│ ├── /admin - Dashboard
│ ├── /admin/users - User Management
│ ├── /admin/monitoring - System Health
│ └── /admin/errors - Error Tracking
│
└── 📄 Static Pages
├── /terms - Terms of Service
├── /privacy - Privacy Policy
├── /guidelines - Community Guidelines
├── /contact - Contact Form
└── /blog - News & Updates
```
---
## Core Features
### 1. Discovery & Exploration
| Feature | Description |
|---------|-------------|
| **Global Search** | Find any park, ride, or company instantly |
| **Parks Nearby** | Location-based discovery with interactive map |
| **Advanced Filters** | Filter by type, status, location, specifications |
| **Discovery Tabs** | 11 curated categories on homepage |
| **Trending Content** | See what's popular in the community |
### 2. Content & Information
| Feature | Description |
|---------|-------------|
| **Detailed Park Pages** | Complete information, photos, reviews |
| **Comprehensive Ride Specs** | Technical details in user's preferred units |
| **Company Profiles** | Manufacturers, designers, operators |
| **Ride Models** | Standard designs with all installations |
| **Photo Galleries** | Community-uploaded imagery |
| **Historical Records** | Track changes over time |
### 3. Community Features
| Feature | Description |
|---------|-------------|
| **Reviews & Ratings** | Share experiences with star ratings |
| **Ride Credits** | Log rides you've experienced |
| **Personal Lists** | Create and share rankings |
| **Leaderboards** | Recognition for top contributors |
| **Badges** | Achievement system |
### 4. Contribution System
| Feature | Description |
|---------|-------------|
| **Submit New Content** | Add parks, rides, companies |
| **Edit Existing** | Suggest improvements |
| **Photo Uploads** | Share your images |
| **Moderation Queue** | Quality review process |
| **Version History** | Track all changes |
---
## User Roles
### Anonymous Visitors
- Browse all public content
- Use search and filters
- View photos and reviews
- See ride specifications
### Registered Users
- All anonymous features, plus:
- Write reviews and ratings
- Log ride credits
- Create personal lists
- Upload photos
- Submit new content
- Edit existing content
### Contributors
- All registered features, plus:
- Higher submission trust
- Skip moderation for minor edits
- Recognition on leaderboards
### Moderators
- All contributor features, plus:
- Access moderation queue
- Approve/reject submissions
- Review photos
- Manage content quality
### Administrators
- All moderator features, plus:
- User management
- System configuration
- Error monitoring
- Database maintenance
---
## Key User Journeys
### Discovery Journey
```
Homepage → Search/Browse → Park/Ride Page → Explore Related Content
```
### Engagement Journey
```
View Content → Sign Up → Write Review → Log Credit → Create List
```
### Contribution Journey
```
Find Missing Info → Submit Edit → Await Moderation → See Changes Live
```
### Recognition Journey
```
Contribute Content → Earn Points → Climb Leaderboard → Earn Badges
```
---
## Content Statistics (Typical)
| Content Type | Description |
|--------------|-------------|
| Parks | Theme parks, amusement parks, water parks worldwide |
| Rides | Roller coasters, flat rides, water rides, dark rides |
| Companies | Manufacturers, designers, operators, owners |
| Reviews | User experiences and ratings |
| Photos | Community-uploaded images |
| Ride Credits | Personal ride experiences logged |
---
## Platform Availability
| Platform | Status |
|----------|--------|
| Web (Desktop) | ✅ Full Experience |
| Web (Tablet) | ✅ Responsive Design |
| Web (Mobile) | ✅ Touch-Optimized |
| Native Apps | ❌ Not Available |
---
## Accessibility
- Full keyboard navigation
- Screen reader compatible
- High contrast support
- Respects reduced motion preferences
- Touch-friendly on mobile
---
## Internationalization
| Feature | Status |
|---------|--------|
| Language | English only |
| Units | Metric/Imperial toggle |
| Dates | Localized formatting |
| Currency | Not applicable |
---
## Next Steps
- [Design System](./DESIGN_SYSTEM.md) - Visual identity and styling
- [Pages Guide](./PAGES.md) - Detailed page documentation
- [Components](./COMPONENTS.md) - UI component library
- [User Flows](./USER_FLOWS.md) - Journey diagrams

881
source_docs/USER_FLOWS.md Normal file
View File

@@ -0,0 +1,881 @@
# ThrillWiki User Flows
> Visual diagrams of user journeys and system interactions
---
## Table of Contents
1. [Discovery Flows](#discovery-flows)
2. [Authentication Flows](#authentication-flows)
3. [Content Viewing Flows](#content-viewing-flows)
4. [Contribution Flows](#contribution-flows)
5. [Engagement Flows](#engagement-flows)
6. [Moderation Flows](#moderation-flows)
7. [Admin Flows](#admin-flows)
---
## Discovery Flows
### Homepage Discovery Journey
```
┌─────────────────────────────────────────────────────────────────┐
│ │
│ USER ARRIVES │
│ │ │
│ ┌───────────────┼───────────────┐ │
│ ▼ ▼ ▼ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Search │ │ Discovery│ │ Recent │ │
│ │ Bar │ │ Tabs │ │ Changes │ │
│ └────┬─────┘ └────┬─────┘ └────┬─────┘ │
│ │ │ │ │
│ ▼ ▼ ▼ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Instant │ │ Content │ │ Click │ │
│ │ Results │ │ Grid │ │ Item │ │
│ └────┬─────┘ └────┬─────┘ └────┬─────┘ │
│ │ │ │ │
│ └──────────────┼──────────────┘ │
│ ▼ │
│ ┌──────────┐ │
│ │ Entity │ │
│ │ Page │ │
│ └──────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
```
### Search Flow
```
┌─────────────────────────────────────────────────────────────────┐
│ │
│ User Types Query │
│ │ │
│ ▼ │
│ ┌───────────────────┐ │
│ │ Debounce Input │ │
│ │ (300ms) │ │
│ └─────────┬─────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────┐ │
│ │ Search API │ │
│ │ Called │ │
│ └─────────┬─────────┘ │
│ │ │
│ ┌───────┴───────┐ │
│ ▼ ▼ │
│ ┌─────────┐ ┌─────────┐ │
│ │ Results │ │ No │ │
│ │ Found │ │ Results │ │
│ └────┬────┘ └────┬────┘ │
│ │ │ │
│ ▼ ▼ │
│ ┌─────────┐ ┌─────────┐ │
│ │ Display │ │ Empty │ │
│ │ List │ │ State │ │
│ └────┬────┘ └─────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────┐ │
│ │ User Selects Result │ │
│ │ (Click or Keyboard) │ │
│ └───────────┬─────────────┘ │
│ │ │
│ ▼ │
│ Navigate to Page │
│ │
└─────────────────────────────────────────────────────────────────┘
```
### Parks Nearby Flow
```
┌─────────────────────────────────────────────────────────────────┐
│ │
│ User Opens Nearby Page │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ Check Location │ │
│ │ Preferences │ │
│ └─────────────┬─────────────┘ │
│ │ │
│ ┌───────────┴───────────┐ │
│ ▼ ▼ │
│ ┌─────────┐ ┌───────────┐ │
│ │ Saved │ │ No Saved │ │
│ │Location │ │ Location │ │
│ └────┬────┘ └─────┬─────┘ │
│ │ │ │
│ │ ▼ │
│ │ ┌───────────────────┐ │
│ │ │ Request Browser │ │
│ │ │ Geolocation │ │
│ │ └─────────┬─────────┘ │
│ │ │ │
│ │ ┌─────────────┴─────────────┐ │
│ │ ▼ ▼ │
│ │ ┌─────────┐ ┌─────────────┐ │
│ │ │ Granted │ │ Denied │ │
│ │ └────┬────┘ └──────┬──────┘ │
│ │ │ │ │
│ │ │ ▼ │
│ │ │ ┌───────────────┐ │
│ │ │ │ Show Manual │ │
│ │ │ │ Location Entry│ │
│ │ │ └───────┬───────┘ │
│ │ │ │ │
│ └────────┼──────────────────────────┘ │
│ ▼ │
│ ┌──────────────┐ │
│ │ Load Parks │ │
│ │ Within Radius│ │
│ └──────┬───────┘ │
│ │ │
│ ┌───────┴───────┐ │
│ ▼ ▼ │
│ ┌──────────┐ ┌──────────┐ │
│ │ Map │ │ List │ │
│ │ View │ │ View │ │
│ └──────────┘ └──────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
```
---
## Authentication Flows
### Sign Up Flow
```
┌─────────────────────────────────────────────────────────────────┐
│ │
│ User Clicks "Sign Up" │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ Choose Sign Up Method │ │
│ └─────────────┬─────────────┘ │
│ │ │
│ ┌───────────┼───────────────────────┐ │
│ ▼ ▼ ▼ │
│ ┌─────────┐ ┌─────────┐ ┌───────────┐ │
│ │ Email │ │ Magic │ │ OAuth │ │
│ │Password │ │ Link │ │(Google/ │ │
│ └────┬────┘ └────┬────┘ │ Discord) │ │
│ │ │ └─────┬─────┘ │
│ ▼ ▼ │ │
│ ┌─────────┐ ┌─────────┐ │ │
│ │ Fill │ │ Enter │ │ │
│ │ Form │ │ Email │ │ │
│ └────┬────┘ └────┬────┘ │ │
│ │ │ │ │
│ ▼ ▼ ▼ │
│ ┌─────────────────────────────────────────────┐ │
│ │ CAPTCHA Verification │ │
│ └─────────────────────┬───────────────────────┘ │
│ │ │
│ ▼ │
│ ┌──────────────────┐ │
│ │ Email Sent │ │
│ │ (Confirmation) │ │
│ └────────┬─────────┘ │
│ │ │
│ ▼ │
│ ┌──────────────────┐ │
│ │ User Clicks Link │ │
│ └────────┬─────────┘ │
│ │ │
│ ▼ │
│ ┌──────────────────┐ │
│ │ Email Verified │ │
│ │ Account Active │ │
│ └────────┬─────────┘ │
│ │ │
│ ▼ │
│ ┌──────────────────┐ │
│ │ Redirect to │ │
│ │ Profile Setup │ │
│ └──────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
```
### Sign In Flow
```
┌─────────────────────────────────────────────────────────────────┐
│ │
│ User Clicks "Sign In" │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ Enter Credentials │ │
│ │ (Email/Password or OAuth)│ │
│ └─────────────┬─────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ Validate Credentials │ │
│ └─────────────┬─────────────┘ │
│ │ │
│ ┌───────────┴───────────┐ │
│ ▼ ▼ │
│ ┌─────────┐ ┌───────────┐ │
│ │ Success │ │ Failed │ │
│ └────┬────┘ └─────┬─────┘ │
│ │ │ │
│ │ ▼ │
│ │ ┌───────────────┐ │
│ │ │ Show Error │ │
│ │ │ (Too many │ │
│ │ │ attempts = │ │
│ │ │ lockout) │ │
│ │ └───────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ Check for MFA │ │
│ └─────────────┬─────────────┘ │
│ │ │
│ ┌─────────┴─────────┐ │
│ ▼ ▼ │
│ ┌─────────┐ ┌───────────┐ │
│ │ MFA │ │ No MFA │ │
│ │ Enabled │ │ │ │
│ └────┬────┘ └─────┬─────┘ │
│ │ │ │
│ ▼ │ │
│ ┌─────────────┐ │ │
│ │ Enter TOTP │ │ │
│ │ Code │ │ │
│ └──────┬──────┘ │ │
│ │ │ │
│ └───────────────┤ │
│ ▼ │
│ ┌──────────────────┐ │
│ │ Check Ban Status │ │
│ └────────┬─────────┘ │
│ │ │
│ ┌────────────┴────────────┐ │
│ ▼ ▼ │
│ ┌─────────┐ ┌───────────┐ │
│ │ Banned │ │ Not Banned│ │
│ └────┬────┘ └─────┬─────┘ │
│ │ │ │
│ ▼ ▼ │
│ ┌─────────┐ ┌───────────────┐ │
│ │ Show │ │ Create Session│ │
│ │ Message │ │ Redirect Home │ │
│ └─────────┘ └───────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
```
---
## Content Viewing Flows
### Park Page Journey
```
┌─────────────────────────────────────────────────────────────────┐
│ │
│ User Arrives at Park Page │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ View Hero Section │ │
│ │ (Banner, Name, Stats) │ │
│ └─────────────┬─────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ SELECT TAB │ │
│ ├──────────┬──────────┬──────────┬──────────┬────────────┤ │
│ │ Overview │ Rides │ Reviews │ Photos │ History │ │
│ └────┬─────┴────┬─────┴────┬─────┴────┬─────┴─────┬──────┘ │
│ │ │ │ │ │ │
│ ▼ ▼ ▼ ▼ ▼ │
│ ┌─────────┐┌─────────┐┌─────────┐┌─────────┐┌──────────┐ │
│ │ Park ││ Ride ││ Review ││ Photo ││ Version │ │
│ │ Info, ││ List ││ List ││ Gallery ││ History │ │
│ │ Map, ││ with ││ with ││ ││ Timeline │ │
│ │ Contact ││ Filters ││ Ratings ││ ││ │ │
│ └────┬────┘└────┬────┘└────┬────┘└────┬────┘└──────────┘ │
│ │ │ │ │ │
│ │ ▼ ▼ ▼ │
│ │ ┌──────────────────────────────────┐ │
│ │ │ CLICK ITEM FOR DETAIL │ │
│ │ └─────────────────┬────────────────┘ │
│ │ │ │
│ │ ┌───────────┴───────────┐ │
│ │ ▼ ▼ │
│ │ ┌───────────┐ ┌───────────┐ │
│ │ │ Ride Page │ │ Lightbox │ │
│ │ └───────────┘ └───────────┘ │
│ │ │
│ └──────────────────────────────────────────────────────▶│
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ USER ACTIONS │ │
│ ├──────────────┬──────────────┬──────────────────────────┤ │
│ │ Edit Park │ Write Review │ Upload Photo │ Log Credit│ │
│ │ (if logged) │ (if logged) │ (if logged) │(if logged)│ │
│ └──────────────┴──────────────┴──────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
```
---
## Contribution Flows
### Submit New Content Flow (The Sacred Pipeline)
```
┌─────────────────────────────────────────────────────────────────┐
│ │
│ THE SACRED PIPELINE │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ USER │ │
│ │ │ │ │
│ │ ▼ │ │
│ │ ┌───────────────────────────────────────┐ │ │
│ │ │ SUBMISSION FORM │ │ │
│ │ │ • Multi-step wizard │ │ │
│ │ │ • Auto-save drafts │ │ │
│ │ │ • Validation │ │ │
│ │ │ • Unit conversion │ │ │
│ │ └─────────────────┬─────────────────────┘ │ │
│ │ │ │ │
│ │ ▼ │ │
│ │ ┌───────────────────────────────────────┐ │ │
│ │ │ SUBMISSION RECORD CREATED │ │ │
│ │ │ (content_submissions table) │ │ │
│ │ │ Status: "pending" │ │ │
│ │ └─────────────────┬─────────────────────┘ │ │
│ │ │ │ │
│ └─────────────────────┼───────────────────────────────────┘ │
│ │ │
│ ┌─────────────────────┼───────────────────────────────────┐ │
│ │ ▼ │ │
│ │ MODERATION ┌───────────────────────────────────────┐ │ │
│ │ │ MODERATION QUEUE │ │ │
│ │ │ • Appears in moderator dashboard │ │ │
│ │ │ • Sorted by priority/age │ │ │
│ │ └─────────────────┬─────────────────────┘ │ │
│ │ │ │ │
│ │ ▼ │ │
│ │ ┌───────────────────────────────────────┐ │ │
│ │ │ MODERATOR CLAIMS ITEM │ │ │
│ │ │ • Locks item for 30 minutes │ │ │
│ │ │ • Prevents conflicts │ │ │
│ │ └─────────────────┬─────────────────────┘ │ │
│ │ │ │ │
│ │ ▼ │ │
│ │ ┌───────────────────────────────────────┐ │ │
│ │ │ REVIEW INTERFACE │ │ │
│ │ │ • Side-by-side diff │ │ │
│ │ │ • Field-by-field review │ │ │
│ │ │ • Preview changes │ │ │
│ │ └─────────────────┬─────────────────────┘ │ │
│ │ │ │ │
│ │ ┌───────────────┼───────────────┐ │ │
│ │ ▼ ▼ ▼ │ │
│ │ ┌─────────┐ ┌───────────┐ ┌─────────┐ │ │
│ │ │ APPROVE │ │ REQUEST │ │ REJECT │ │ │
│ │ │ │ │ CHANGES │ │ │ │ │
│ │ └────┬────┘ └─────┬─────┘ └────┬────┘ │ │
│ │ │ │ │ │ │
│ └────────────────┼───────────────┼──────────────┼─────────┘ │
│ │ │ │ │
│ │ ▼ ▼ │
│ │ ┌──────────────┐ ┌──────────────┐ │
│ │ │ Notify User │ │ Notify User │ │
│ │ │ To Revise │ │ With Reason │ │
│ │ └──────────────┘ └──────────────┘ │
│ │ │
│ ┌────────────────┼────────────────────────────────────────┐ │
│ │ ▼ │ │
│ │ APPROVAL ┌───────────────────────────────────────┐ │ │
│ │ │ EDGE FUNCTION TRIGGERED │ │ │
│ │ │ • Transaction begins │ │ │
│ │ │ • Create/update entity │ │ │
│ │ │ • Create version record │ │ │
│ │ │ • Update submission status │ │ │
│ │ │ • Transaction commits │ │ │
│ │ └─────────────────┬─────────────────────┘ │ │
│ │ │ │ │
│ │ ▼ │ │
│ │ ┌───────────────────────────────────────┐ │ │
│ │ │ VERSION RECORD CREATED │ │ │
│ │ │ • Full snapshot of data │ │ │
│ │ │ • Version number incremented │ │ │
│ │ │ • is_current = true │ │ │
│ │ └─────────────────┬─────────────────────┘ │ │
│ │ │ │ │
│ │ ▼ │ │
│ │ ┌───────────────────────────────────────┐ │ │
│ │ │ ENTITY NOW VISIBLE │ │ │
│ │ │ • Appears in listings │ │ │
│ │ │ • Searchable │ │ │
│ │ │ • Has public URL │ │ │
│ │ └───────────────────────────────────────┘ │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
```
### Edit Content Flow
```
┌─────────────────────────────────────────────────────────────────┐
│ │
│ User Clicks "Edit" on Entity │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ Check User Role │ │
│ └─────────────┬─────────────┘ │
│ │ │
│ ┌───────────┴───────────────────┐ │
│ ▼ ▼ │
│ ┌─────────────┐ ┌───────────────┐ │
│ │ Moderator+ │ │ Regular User │ │
│ │ (Skip mod) │ │ (Needs review)│ │
│ └──────┬──────┘ └───────┬───────┘ │
│ │ │ │
│ └───────────────────────────┤ │
│ ▼ │
│ ┌───────────────────────┐ │
│ │ Load Edit Form │ │
│ │ (Pre-filled with │ │
│ │ current data) │ │
│ └───────────┬───────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────┐ │
│ │ User Makes Changes │ │
│ │ (Auto-save enabled) │ │
│ └───────────┬───────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────┐ │
│ │ Add Submission Note │ │
│ │ (Explain changes) │ │
│ └───────────┬───────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────┐ │
│ │ Submit for Review │ │
│ │ or Direct Apply │ │
│ └───────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
```
### Photo Upload Flow
```
┌─────────────────────────────────────────────────────────────────┐
│ │
│ User Clicks "Upload Photo" │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ Open Upload Dialog │ │
│ └─────────────┬─────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ Drag & Drop or Browse │ │
│ │ (Max 10 photos) │ │
│ └─────────────┬─────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ For Each Photo: │ │
│ │ • Validate format │ │
│ │ • Check file size │ │
│ │ • Show preview │ │
│ │ • Optional: Edit/Crop │ │
│ └─────────────┬─────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ Click "Upload" │ │
│ └─────────────┬─────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ Get CloudFlare Direct │ │
│ │ Upload URL │ │
│ └─────────────┬─────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ Upload to CloudFlare │ │
│ │ (Show progress) │ │
│ └─────────────┬─────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ Create Photo Submission │ │
│ │ (Status: Pending) │ │
│ └─────────────┬─────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ → Moderation Queue │ │
│ │ Photo visible after │ │
│ │ approval │ │
│ └───────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
```
---
## Engagement Flows
### Write Review Flow
```
┌─────────────────────────────────────────────────────────────────┐
│ │
│ User on Park/Ride Page │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ Click "Write Review" │ │
│ └─────────────┬─────────────┘ │
│ │ │
│ ┌───────────┴───────────┐ │
│ ▼ ▼ │
│ ┌─────────────┐ ┌───────────────┐ │
│ │ Logged In │ │ Not Logged In │ │
│ └──────┬──────┘ └───────┬───────┘ │
│ │ │ │
│ │ ▼ │
│ │ ┌───────────────────┐ │
│ │ │ Redirect to Login │ │
│ │ │ (Return after) │ │
│ │ └───────────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ Check Existing Review │ │
│ └─────────────┬─────────────┘ │
│ │ │
│ ┌───────────┴───────────┐ │
│ ▼ ▼ │
│ ┌─────────────┐ ┌───────────────┐ │
│ │ Has Review │ │ No Review │ │
│ │ (Edit mode) │ │ (Create mode) │ │
│ └──────┬──────┘ └───────┬───────┘ │
│ │ │ │
│ └──────────┬──────────┘ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ Review Form │ │
│ │ • Star rating (1-5) │ │
│ │ • Written review text │ │
│ │ • "Experienced recently" │ │
│ └─────────────┬─────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ Submit Review │ │
│ └─────────────┬─────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ Review Visible │ │
│ │ (No moderation for │ │
│ │ reviews by default) │ │
│ └───────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
```
### Log Ride Credit Flow
```
┌─────────────────────────────────────────────────────────────────┐
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ ENTRY POINTS │ │
│ ├───────────────┬───────────────┬─────────────────────────┤ │
│ │ Ride Page │ Credits Page │ Quick Add │ │
│ │ "Log Credit" │ "Add Credit" │ (Previously │ │
│ │ Button │ Button │ logged rides) │ │
│ └───────┬───────┴───────┬───────┴───────────┬─────────────┘ │
│ │ │ │ │
│ ▼ ▼ │ │
│ ┌──────────────────────────────────┐ │ │
│ │ RIDE SEARCH (if not from ride) │ │ │
│ │ • Search by name │ │ │
│ │ • Filter by park │ │ │
│ │ • Recent rides shown │ │ │
│ └──────────────┬───────────────────┘ │ │
│ │ │ │
│ └───────────────────────────┤ │
│ ▼ │
│ ┌────────────────────────────────┐ │
│ │ CREDIT DETAILS │ │
│ │ • Ride count (default: 1) │ │
│ │ • Date (optional) │ │
│ │ • Notes (optional) │ │
│ └────────────────┬───────────────┘ │
│ │ │
│ ▼ │
│ ┌────────────────────────────────┐ │
│ │ SAVE CREDIT │ │
│ └────────────────┬───────────────┘ │
│ │ │
│ ┌───────────────┴───────────────┐ │
│ ▼ ▼ │
│ ┌──────────────┐ ┌──────────────┐
│ │ New Credit │ │ Update │
│ │ Created │ │ Existing │
│ └──────────────┘ └──────────────┘
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ QUICK INCREMENT │ │
│ │ On credit card: [−] 12 [+] │ │
│ │ Instantly updates count without dialog │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
```
---
## Moderation Flows
### Moderator Queue Workflow
```
┌─────────────────────────────────────────────────────────────────┐
│ │
│ Moderator Opens Queue │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ View Pending Items │ │
│ │ (Sorted by priority/age) │ │
│ └─────────────┬─────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ Apply Filters │ │
│ │ • Type (park/ride/etc) │ │
│ │ • Status │ │
│ │ • Priority │ │
│ │ • Assigned to me │ │
│ └─────────────┬─────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ Select Item to Review │ │
│ └─────────────┬─────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ CLAIM ITEM │ │
│ │ • Locks for 30 mins │ │
│ │ • Others can't claim │ │
│ │ • Can unclaim if needed │ │
│ └─────────────┬─────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ REVIEW INTERFACE │ │
│ ├───────────────────────┬───────────────────────────────┤ │
│ │ CURRENT DATA │ PROPOSED CHANGES │ │
│ │ │ │ │
│ │ Name: Cedar Point │ Name: Cedar Point │ │
│ │ Status: Open │ Status: Open │ │
│ │ Rides: 72 │ Rides: 73 ← CHANGED │ │
│ │ Desc: ... │ Desc: ... (expanded) ← + │ │
│ │ │ │ │
│ └───────────────────────┴───────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ Add Reviewer Notes │ │
│ │ (Internal notes for │ │
│ │ decision reasoning) │ │
│ └─────────────┬─────────────┘ │
│ │ │
│ ┌───────────┼───────────────────┐ │
│ ▼ ▼ ▼ │
│ ┌─────────┐ ┌─────────┐ ┌───────────────┐ │
│ │ APPROVE │ │ REJECT │ │ REQUEST │ │
│ │ ALL │ │ │ │ CHANGES │ │
│ └────┬────┘ └────┬────┘ └───────┬───────┘ │
│ │ │ │ │
│ │ ▼ ▼ │
│ │ ┌───────────────┐ ┌───────────────┐ │
│ │ │ Notify User │ │ Notify User │ │
│ │ │ (Rejected) │ │ (Changes │ │
│ │ │ │ │ Needed) │ │
│ │ └───────────────┘ └───────────────┘ │
│ │ │
│ ▼ │
│ ┌──────────────────────────────┐ │
│ │ APPROVAL PROCESSING │ │
│ │ • Edge function called │ │
│ │ • Transaction executed │ │
│ │ • Entity updated │ │
│ │ • Version created │ │
│ │ • User notified │ │
│ └──────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
```
---
## Admin Flows
### User Management Flow
```
┌─────────────────────────────────────────────────────────────────┐
│ │
│ Admin Opens User Management │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ Search/Filter Users │ │
│ │ • By username/email │ │
│ │ • By role │ │
│ │ • By status │ │
│ └─────────────┬─────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ Select User │ │
│ └─────────────┬─────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ USER PROFILE VIEW │ │
│ │ │ │
│ │ Username: coasterFan123 │ │
│ │ Email: user@email.com │ │
│ │ Role: User │ │
│ │ Status: Active │ │
│ │ Joined: Jan 2024 │ │
│ │ │ │
│ │ Stats: 45 submissions, 12 reviews, 89 credits │ │
│ │ │ │
│ └───────────────────────────────────────────────────────┘ │
│ │ │
│ ┌───────────┼───────────────────┬───────────────────┐ │
│ ▼ ▼ ▼ ▼ │
│ ┌─────────┐ ┌─────────┐ ┌───────────┐ ┌───────────┐ │
│ │ Change │ │ Ban │ │ Unban │ │ Delete │ │
│ │ Role │ │ User │ │ User │ │ User │ │
│ └────┬────┘ └────┬────┘ └─────┬─────┘ └─────┬─────┘ │
│ │ │ │ │ │
│ ▼ ▼ ▼ ▼ │
│ ┌─────────┐ ┌───────────────┐ ┌───────────┐ ┌───────────────┐ │
│ │ Select │ │ Enter Reason │ │ Confirm │ │ Confirm │ │
│ │ New Role│ │ Set Duration │ │ Unban │ │ (Irreversible)│ │
│ └────┬────┘ └───────┬───────┘ └─────┬─────┘ └───────┬───────┘ │
│ │ │ │ │ │
│ └──────────────┼───────────────┼────────────────┘ │
│ ▼ │
│ ┌───────────────────┐ │
│ │ Action Logged │ │
│ │ (Audit Trail) │ │
│ └───────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
```
---
## Notification Flow
```
┌─────────────────────────────────────────────────────────────────┐
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ EVENT TRIGGERS │ │
│ ├──────────────┬──────────────┬──────────────┬────────────┤ │
│ │ Submission │ Review │ Social │ System │ │
│ │ Status │ Response │ Interaction │ Alert │ │
│ │ Changed │ │ │ │ │
│ └──────┬───────┴──────┬───────┴──────┬───────┴──────┬─────┘ │
│ │ │ │ │ │
│ └──────────────┴──────────────┴──────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ CHECK USER PREFERENCES │ │
│ │ • Notification enabled? │ │
│ │ • Email enabled? │ │
│ │ • In-app enabled? │ │
│ └─────────────┬─────────────┘ │
│ │ │
│ ┌───────────────────┼───────────────────┐ │
│ ▼ ▼ ▼ │
│ ┌───────────┐ ┌───────────────┐ ┌───────────┐ │
│ │ In-App │ │ Email │ │ None │ │
│ │ Only │ │ + In-App │ │ (Opted │ │
│ │ │ │ │ │ Out) │ │
│ └─────┬─────┘ └───────┬───────┘ └───────────┘ │
│ │ │ │
│ ▼ ▼ │
│ ┌───────────┐ ┌───────────────┐ │
│ │ NOVU │ │ NOVU │ │
│ │ In-App │ │ Email + App │ │
│ │ Channel │ │ Channels │ │
│ └─────┬─────┘ └───────┬───────┘ │
│ │ │ │
│ └────────────────────┤ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ NOTIFICATION DELIVERED │ │
│ └─────────────┬─────────────┘ │
│ │ │
│ ┌───────────────────┴───────────────────┐ │
│ ▼ ▼ │
│ ┌───────────────┐ ┌───────────────┐ │
│ │ NOTIFICATION │ │ EMAIL │ │
│ │ BELL │ │ INBOX │ │
│ │ (🔔 Badge) │ │ │ │
│ └───────┬───────┘ └───────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ NOTIFICATION FEED │ │
│ │ • Mark as read │ │
│ │ • Click to navigate │ │
│ │ • Mark all as read │ │
│ └───────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
```
---
## Related Documentation
- [Site Overview](./SITE_OVERVIEW.md)
- [Design System](./DESIGN_SYSTEM.md)
- [Pages](./PAGES.md)
- [Components](./COMPONENTS.md)