Pack It

Pack It is a React Native and Expo mobile app for building reusable packing checklists for trips, work kits, family days out, camera bags, gym lockers, and other repeatable loadouts.

The core idea is simple:

• create a pack
• add items to it
• save it for reuse
• track exactly when each item was packed
• reset it and use it again for the next trip

Product Summary

Pack It helps users avoid forgetting essential items by turning frequently reused bag setups into saved templates.

Examples:

• weekend city break
• camping duffel
• work conference carry-on
• road trip camera bag
• family beach day
• gym locker kit

Current App Status

The app is currently an offline-first MVP with local persistence.

Current capabilities:

• create reusable packs
• assign a fixed pack category
• add notes to packs
• seed starter items when creating a pack
• add items to an existing pack
• assign a fixed item category
• set quantity and weight per item
• assign user images to packs and items
• toggle packed state as a timestamp
• clear packed state by unpacking an item
• duplicate packs for reuse
• reset packed progress for a full pack
• delete packs
• clear all local packs
• restore built-in example packs

Tech Stack

• Expo SDK 54
• React Native 0.81
• React 19
• Expo Router
• NativeWind / Tailwind
• Zustand
• AsyncStorage
• React Hook Form
• Expo Image
• Expo Image Picker
• Expo File System
• React Native Gesture Handler
• React Native Safe Area Context

Project Structure

Key app files and folders:

• app/ - Expo Router screens
• components/ - reusable UI pieces
• store/ - Zustand state and persistence
• types/ - shared TypeScript schema definitions
• utils/ - helpers such as image picking and local file handling

Important files:

• app/_layout.tsx
• app/(tabs)/index.tsx
• app/(tabs)/build.tsx
• app/(tabs)/settings.tsx
• app/pack/[id].tsx
• store/use-pack-store.ts
• types/pack.ts

Data Model

Current main entities:

type Pack = {
  id: string;
  name: string;
  category: PackCategory;
  imageUri: string | null;
  notes: string;
  createdAt: string;
  updatedAt: string;
  items: PackItem[];
};

type PackItem = {
  id: string;
  name: string;
  category: PackItemCategory;
  quantity: number;
  weight: number;
  imageUri: string | null;
  notes: string;
  packedAt: string | null;
};

Packed State

Items do not use a boolean packed flag anymore.

Instead:

• packedAt is null when unpacked
• packedAt is an ISO timestamp when packed

This allows the app to record when the user actually packed each item.

Fixed Categories

Pack Categories

• Travel
• Work
• Outdoor
• Family
• Fitness
• Tech
• Other

Pack Item Categories

• Essentials
• Clothing
• Toiletries
• Tech
• Documents
• Food
• Health
• Misc

Storage

The app currently stores everything locally on-device.

Structured data:

• Zustand persisted with @react-native-async-storage/async-storage
• storage key: pack-it-store

Persisted shape:

{
  packs: Pack[]
}

Images:

• image URIs are stored in the persisted pack/item records
• native image files are copied into app-local document storage
• web uses the selected browser URI directly

There is currently:

• no backend
• no cloud sync
• no user accounts
• no remote database

Sample Data

Built-in example packs are included for testing.

Current examples:

• Weekend City Break
• Road Trip Camera Bag
• Camping Weekend Duffel
• Work Conference Carry-On
• Family Beach Day
• Gym Locker Kit

These can be restored from the Settings tab.

Web Support

The app is designed primarily as a mobile app, but it also builds for web.

Verified in this repo:

• TypeScript typecheck passes
• Expo lint passes
• Expo web export passes

Command used for verification:

npx expo export --platform web

Current UX Notes

The app has already had an initial UX cleanup pass:

• pack cards use explicit action buttons instead of a whole-card nested tap target
• pack detail uses a single continuous scroll flow
• item packed state shows a timestamp when packed

There is still room for a stronger layout system and visual polish.

Layout And Theming Direction

After reviewing brasslog and practicalshooterapp, the next structural improvement for Pack It should be:

• app-wide SafeAreaProvider
• screen-level useSafeAreaInsets() handling
• shared layout tokens for spacing, radius, and typography
• a reusable header component

Recommended visual direction:

Field Journal Theme

A calm, premium, outdoors-meets-travel aesthetic.

Suggested palette direction:

• warm canvas background
• off-white cards
• pine green primary colour
• clay accent colour
• dark ink text
• soft shadows and large rounded surfaces

This is intended to make Pack It feel more personal, lifestyle-oriented, and distinct from the existing apps.

Planned Improvements

Likely next areas of work:

• safe-area-aware screen shell and header system
• central design tokens and theme provider
• editable existing packs and items
• user-defined grouping for packs and pack items
• total pack weight summaries
• optional camera capture in addition to library upload
• local data migration support for schema changes
• future backend or sync design if required

Development

Install dependencies:

npm install

Start the Expo dev server:

npm start

Run web locally:

npm run web

Verification Commands

Useful checks used during development:

npx tsc --noEmit
npm run lint
npx expo export --platform web