🎒 Pack-Pal

A web and mobile app for organizing and managing packing lists for trips, adventures, and activities. Create packs, categorize items, track weight and volume, and share with others.

🚀 Features

• Smart Pack Organization: Hierarchical structure (Packs → Categories → Items)
• Weight & Volume Tracking: Support for multiple units (g, kg, oz, lb, ml, l) with accurate conversions
• Drag & Drop: Intuitive item and category reordering on desktop and mobile
• Visual Capacity Indicators: See how full your bag is at a glance with circular progress charts
• Category Visibility: Hide categories from capacity calculations while keeping them in your pack
• CSV Import/Export: Import from LighterPack or other Pack-Pal users exported CSV files, export for offline access
• Pack Sharing: Share packs via public URLs
• Worn Weight Tracking: Mark items as worn to exclude from pack weight
• Email Authentication: Secure signup with email/password or Google Oauth
• Cross-Platform: Mobile (iOS/Android via React Native) and Web

🛠️ Tech Stack

• Frontend: React Native (0.81.5) + Expo (54.0.22)
• Language: TypeScript (~5.9.2)
• Styling: StyleSheet API (no external styling libraries)
• Backend: Supabase (PostgreSQL, Auth, Real-time)
• State Management: Zustand
• Navigation: React Navigation v7 (Native Stack)
• Charts: Victory Native + Skia
• Icons: @expo/vector-icons (Feather)

📋 Prerequisites

• Node.js 18+
• npm or yarn
• Expo CLI
• Supabase account

🏗️ Setup Instructions

1. Clone and Install Dependencies

cd Pack-Pal
npm install

2. Set Up Supabase

1. Create a new project at supabase.com
2. Go to Project Settings → API
3. Copy your project URL and anon key
4. Create a .env file in the root directory:

cp .env.example .env

5. Add your Supabase credentials to .env:

🔐 Environment Variables

Required environment variables:

• EXPO_PUBLIC_SUPABASE_URL: Your Supabase project URL
• EXPO_PUBLIC_SUPABASE_KEY: Your Supabase anon public key

3. Set Up Database

Run the SQL migrations in your Supabase project:

1. Go to your Supabase project dashboard → SQL Editor

2. Run the main schema:

   • Copy contents of supabase/schema.sql
   • Execute in SQL Editor

3. Run migrations in order:

   • supabase/migrations/20251112_add_pack_weight.sql
   • supabase/migrations/20251112_add_category_is_hidden.sql

4. Run the App

For Web:

npm run web

For iOS:

npm run ios

For Android:

npm run android

📁 Project Structure

Pack-Pal/
├── src/
│   ├── components/
│   │   ├── home/           # Home screen tabs and components
│   │   ├── modals/         # Modal dialogs (Create, Edit, Share, etc.)
│   │   ├── pack/           # Pack detail components
│   │   ├── shared/         # Shared components (Header, Nav)
│   │   └── ui/             # Reusable UI (Button, Input, Card, etc.)
│   ├── hooks/              # Custom React hooks
│   ├── navigation/         # App navigation setup
│   ├── screens/
│   │   ├── auth/          # Login, SignUp, AuthCallback
│   │   ├── onboarding/    # Landing page
│   │   └── packs/         # Pack management screens
│   ├── services/          # API calls (Supabase, cache)
│   ├── stores/            # Zustand state stores
│   ├── types/             # TypeScript definitions
│   └── utils/             # Helpers (conversions, CSV, etc.)
├── supabase/
│   ├── schema.sql         # Database schema
│   └── migrations/        # Database migrations
├── assets/                # Images, icons
├── .env.example           # Environment template
├── app.config.js          # Expo configuration
├── vercel.json            # Deployment config
└── PRE-DEPLOYMENT-REVIEW.md  # Production readiness checklist

🚢 Deployment

Web (Vercel)

1. Update Base URL:

   • Edit src/utils/helpers.ts
   • Change fallback in getBaseUrl() to your production domain

2. Build and Deploy:

# Build for web
npm run build:web

# Deploy (if using Vercel CLI)
vercel --prod

3. Set Environment Variables in Vercel:
   • Go to Project Settings → Environment Variables
   • Add EXPO_PUBLIC_SUPABASE_URL
   • Add EXPO_PUBLIC_SUPABASE_KEY

Mobile (Expo)

# Build for iOS
eas build --platform ios

# Build for Android
eas build --platform android

# Submit to stores
eas submit --platform ios
eas submit --platform android

� Development

Key Commands

# Start development server
npm start

# Run on web
npm run web

# Run on iOS simulator
npm run ios

# Run on Android emulator
npm run android

# Lint code
npm run lint

# Format code
npm run format

# Build for production
npm run build:web

📚 Documentation

• Architecture: See docs/architecture.md for detailed system design
• Development Guide: See .github/copilot-instructions.md for coding patterns
• Deployment: See PRE-DEPLOYMENT-REVIEW.md for production checklist

🐛 Troubleshooting

"Supabase configuration missing" error

• Verify .env file exists and has correct values
• Restart development server after adding env variables

Build errors on web

• Clear cache: expo start -c
• Delete node_modules and reinstall: rm -rf node_modules && npm install

Database errors

• Verify migrations have been run in correct order
• Check Supabase project logs for details
• Ensure RLS policies are configured correctly

🤝 Contributing

Contributions are welcome! Please feel free to submit an Issue or Pull Request.

📄 License

MIT License - feel free to use this project for personal or commercial purposes.