Asset Structure Setup - Complete ✅

Date: October 11, 2025
Branch: feat/tailwind-integration

Summary

Successfully set up folder-based image organization for 30 apps across 10 divisions in the cloudalt-frontend.

What Was Created

1. Script: scripts/setup-brand-assets.sh

Automated script that creates standardized asset directory structures for all brands.

Features:

• Creates 6 image category folders per app: hero/, logos/, features/, onboarding/, avatars/, misc/
• Generates comprehensive README.md for each app’s images directory
• Idempotent (safe to run multiple times)
• Includes .gitkeep files to preserve empty folders in git

Usage:

scripts/setup-brand-assets.sh

2. Directory Structure

Created for all 30 apps across divisions:

apps/{division}/{brand}/shared/assets/images/
├── hero/           # Hero/banner images (< 300KB)
├── logos/          # Brand logos (< 25KB)
├── features/       # Feature screenshots (< 150KB)
├── onboarding/     # Tutorial images (< 100KB)
├── avatars/        # Default avatars (< 50KB)
├── misc/           # Other images
└── README.md       # Comprehensive guidelines

Apps Affected:

• stay_match: pinkguest, orangeguest, purpleguest, rainbowhost, staymatch_app
• guestroom: guestroom_city, guestroom_help, guestroom_host, guestroom_lgbt, guestroom_pink, guestroom_travel
• homestay: homestay_international, homestay_lgbt, stayovernight
• altFinder: altFinder_app, orangeFinder, pinkFinder
• bonjour_services: bonjour_it_com, bonjour_locker, lingua_it_com
• greenhost: greenhost_app
• hostguest: hostguest_click, hostguest_cloud
• pride_city: pride_city_app
• room_lgbt: room_lgbt, roomlgbt_app, rooms_gay
• roommate: roommate_guru, roommate_help, roommate_works

3. Documentation Updates

Updated Files:

1. docs/asset-management.md

   • Added folder structure documentation
   • Updated asset type table with folder paths
   • Detailed guidelines for each folder (hero/, logos/, features/, onboarding/, avatars/, misc/)
   • File size targets and optimization guidelines

2. docs/onboarding_guide.md

   • Added comprehensive “Asset Management” section
   • Explained two-tier system (packages/assets/ vs apps/…/shared/assets/)
   • Detailed folder-by-folder guidelines
   • Usage examples for web and mobile
   • Optimization tool recommendations

3. README.md (Root)

   • Added “Architecture” section
   • Documented three-tier component system
   • Explained asset management two-tier system
   • Added quick reference with folder structure
   • Added setup script command

4. apps/stay_match/pinkguest/shared/README.md

   • Updated with complete folder structure
   • Detailed guidelines for each image folder
   • Brand colors reference (#F90772)
   • Optimization guidelines
   • Related documentation links

File Size Guidelines

Category	Target	Max	Format
Hero	< 300KB	500KB	WebP (web), PNG/JPG (mobile)
Logos	< 25KB	50KB	SVG (preferred), PNG
Features	< 150KB	200KB	WebP (web), PNG/JPG (mobile)
Onboarding	< 100KB	-	WebP, PNG/JPG
Avatars	< 50KB	-	PNG, JPG

Naming Conventions

• Use kebab-case: hero-background.png
• Include density suffix: @2x, @3x for mobile
• Be descriptive: feature-messaging.png not img1.png
• Sequential numbering: onboarding-step-1.png, onboarding-step-2.png

Usage Examples

Web

// Brand-specific hero image
import heroImage from '../../shared/assets/images/hero/hero-background.png';

<img
  src={heroImage}
  srcSet={`${heroImage} 1x, ${heroImage2x} 2x`}
  alt="Hero"
/>

Mobile

// Brand-specific hero image
const heroImage = require('../../shared/assets/images/hero/hero-background.png');

<Image
  source={heroImage}
  style={styles.hero}
/>

Optimization Tools

Before committing images:

• squoosh.app - Web-based image compressor
• tinypng.com - PNG/JPG compression
• imageoptim.com - macOS app
• SVGO - SVG optimization

Why This Structure?

Benefits

1. Scalability - Easy to add more images without clutter
2. Organization - Clear categorization by function
3. Team Workflow - Different teams can work on different folders
4. Maintenance - Easy to find and update images
5. Bundle Optimization - Each brand only ships its own assets

Two-Tier System

Tier 1: Monorepo-Wide (packages/assets/)

• Generic icons, illustrations, company branding
• Used by ALL apps → keep minimal
• Bundle impact: Affects all 30 apps

Tier 2: Brand-Specific (apps/{division}/{brand}/shared/assets/)

• Brand-specific images, fonts, content
• Used by ONE app → can be larger
• Bundle impact: Only affects that brand

Next Steps

1. Add Images: Start adding brand-specific images to the appropriate folders
2. Optimize: Run images through compression tools before committing
3. Update Components: Update Hero components to use images from shared/assets/images/hero/
4. Test: Verify images load correctly in web and mobile apps

Related Documentation

• Asset Management Strategy - Complete guide
• Component Architecture - Three-tier component system
• Onboarding Guide - Essential setup guide

Statistics

• Apps processed: 30
• Folders created: 180 (6 per app)
• READMEs created: 30
• Divisions covered: 10
• Documentation files updated: 4

---

Status: ✅ Complete and ready for use
Script: scripts/setup-brand-assets.sh
Branch: feat/tailwind-integration