Packwise is a mobile-first packing-list prototype for travel planning. Enter a destination, travel dates, and activities, then the app builds a grouped checklist from built-in weather sample data and activity rules. It is designed as a PWA handoff and runs as a self-contained Design Component in the browser.
Internal idea key: PackListSmart. The product name used in the UI and repository is Packwise.
- Three-step onboarding for the packing workflow.
- Mock login and registration with local state persistence.
- Dashboard with next-trip progress, saved trips, templates, and empty state.
- Trip creation flow for destination, dates, activities, and checklist preview.
- Checklist grouped by documents, clothing, weather gear, toiletries, electronics, activities, and custom additions.
- Item check-off, custom item entry, trip editing, and reusable template saving.
- Thai and English UI toggle.
- Celsius and Fahrenheit setting.
- Mock pre-trip reminder toggle and test notification toast.
- Empty state and 404 style error state.
This prototype does not call a live weather API. Packwise.dc.html includes a local destination dataset for Chiang Mai, Phuket, Tokyo, Bangkok, Pai, Koh Samui, Osaka, plus a mild fallback for other destinations. The generator adjusts the checklist for cold weather, cool weather, heat, rain chance, international trips, and activities such as beach, hiking, city, business, camping, and food trips.
| App screen | Alternate direction |
|---|---|
 |
 |
Packwise.dc.htmlcontains the working prototype, UI, local data, and app logic.Packwise Overview.dc.htmlshows the multi-screen design overview.support.jsis the Design Component runtime.screenshots/contains app-prefixed screenshots for documentation.
Open Packwise.dc.html in a modern browser. No build step is required.
The prototype stores trips, templates, language, temperature unit, reminder preference, and mock user details in localStorage.
- Replace the local
DESTlookup with a real forecast service before production use. - Replace mock auth with a real account store.
- Add a web app manifest and service worker for installability and real reminders.
- Keep the current checklist generator rules as a starting point for the production packing engine.
- Weather data is local sample data, not a live forecast.
- Authentication and notifications are mocked.
- Reminder scheduling and push delivery are not implemented.
- The layout is tuned for a 390px mobile frame, with responsive scaling for wider screens.