{"id":50512597,"url":"https://github.com/andyfrith/explorer-ui","last_synced_at":"2026-06-02T21:04:22.277Z","repository":{"id":342067027,"uuid":"1168019207","full_name":"andyfrith/explorer-ui","owner":"andyfrith","description":"Explorer UI is a composable UI system built for modern travel applications that blends AI storytelling, real-time data, and beautiful interface design.","archived":false,"fork":false,"pushed_at":"2026-03-04T16:21:03.000Z","size":11702,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-03-04T22:37:22.108Z","etag":null,"topics":["atomic-design","react","shadcn","storybook","tailwindcss","tanstack-start","ux-design"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andyfrith.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-26T23:39:10.000Z","updated_at":"2026-03-04T16:33:21.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/andyfrith/explorer-ui","commit_stats":null,"previous_names":["andyfrith/explorer-ui"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/andyfrith/explorer-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyfrith%2Fexplorer-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyfrith%2Fexplorer-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyfrith%2Fexplorer-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyfrith%2Fexplorer-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andyfrith","download_url":"https://codeload.github.com/andyfrith/explorer-ui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyfrith%2Fexplorer-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33835766,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-02T02:00:07.132Z","response_time":109,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["atomic-design","react","shadcn","storybook","tailwindcss","tanstack-start","ux-design"],"created_at":"2026-06-02T21:04:20.971Z","updated_at":"2026-06-02T21:04:22.272Z","avatar_url":"https://github.com/andyfrith.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🌍 Explorer UI\n\n### Designing Intelligent Travel Experiences\n\nExplorer UI is a composable UI system built for modern travel applications that blends **AI storytelling, real-time data, and beautiful interface design**.\n\nBuilt with:\n\n- **Shadcn UI**\n- **Atomic Design methodology**\n- **Storybook for live component documentation**\n- **TanStack Start**\n- **TypeScript + Tailwind CSS**\n\nExplorer UI isn’t just a component library — it’s a design foundation for generative travel experiences.\n\n---\n\n![Screenshot1: Destination Selection Experience](./screenshot1.png)\n\n---\n\n# ✨ The Experience We’re Building\n\nTravel is emotional.  \nIt’s inspirational.  \nIt’s informational.\n\nExplorer UI enables experiences where:\n\n- Users discover destinations visually\n- AI generates personalized travel narratives\n- Weather data adds real-world context\n- Attractions are presented with clarity and structure\n- Every screen feels cohesive and intentional\n\nThe goal is simple:\n\n\u003e Let AI generate the story.  \n\u003e Let design deliver the experience.\n\n---\n\n# 🧩 A System, Not Just Components\n\nExplorer UI follows **Atomic Design** to ensure consistency and scalability.\n\n```mermaid\ngraph TD\n    A[Atoms] --\u003e B[Molecules]\n    B --\u003e C[Organisms]\n    C --\u003e D[Templates]\n    D --\u003e E[Pages]\n```\n\nThis allows us to:\n\n- Maintain visual consistency\n- Reuse patterns across features\n- Design once, compose everywhere\n- Scale without redesigning\n\nEvery page in the app is composed from predictable building blocks.\n\n---\n\n# 🚀 Core Product Use Cases\n\n## 1️⃣ Destination Selection\n\nUsers begin their journey by choosing a destination.\n\n### Experience Goals\n\n- Visually compelling\n- Easy to scan\n- Responsive across devices\n- Adaptable to curated or AI-generated results\n\n### System Composition\n\n- Atoms for typography, imagery, and interactive controls\n- Molecules for structured card layouts\n- Organisms for grid presentation\n- Templates for responsive page structure\n\n```mermaid\nflowchart LR\n    Atoms --\u003e Molecules\n    Molecules --\u003e DestinationGridOrganism\n    DestinationGridOrganism --\u003e DestinationSelectionPage\n```\n\n### Why It Matters\n\nThis pattern supports:\n\n- AI recommendations\n- Editorial curation\n- Seasonal content\n- Personalization\n\nWithout changing the layout system.\n\n---\n\n## 2️⃣ Destination Detail View\n\n![Screenshot: Destination Detail with AI Article and Weather](./screenshot2.png)\n\nWhen a user selects a destination, they experience:\n\n- A customized AI-generated article\n- Destination imagery\n- Current weather forecast\n\n### Experience Goals\n\n- Story-first layout\n- Strong visual hierarchy\n- Clear contextual data (weather)\n- Space for personalization\n\n### System Composition\n\n- Structured content containers\n- Modular weather presentation\n- Media sections\n- Reusable layout template\n\n```mermaid\ngraph TD\n    DestinationDetailPage --\u003e Template\n    Template --\u003e ContentSection\n    Template --\u003e WeatherSection\n    Template --\u003e MediaSection\n```\n\n### Design Advantage\n\nThe layout remains stable while content changes dynamically.\n\nThis creates:\n\n- Trust in structure\n- Flexibility in storytelling\n- Room for experimentation\n\nAI enhances the content —\nthe UI preserves the experience.\n\n---\n\n## 3️⃣ Attraction Detail View\n\n![Screenshot: Attraction Detail View with Map and Weather](./screenshot3.png)\n\nWhen users explore a specific attraction, they see:\n\n- Description\n- Activities\n- Hours of operation\n- Contact information\n- Location map\n- Weather forecast\n\n### Experience Goals\n\n- Clear information hierarchy\n- Actionable details\n- Geographical context\n- No clutter\n\n### System Composition\n\n- Structured metadata blocks\n- Reusable information patterns\n- Map container\n- Weather module reused from destination view\n\n```mermaid\nflowchart TD\n    AttractionDetailPage --\u003e Template\n    Template --\u003e MetadataSection\n    Template --\u003e MapSection\n    Template --\u003e WeatherSection\n```\n\n### Product Strength\n\nBecause patterns are reusable:\n\n- Weather appears consistently across features\n- Metadata layouts stay uniform\n- New data types can be added easily\n\nThe system grows without visual fragmentation.\n\n---\n\n# 📘 Storybook: Where Design and Code Meet\n\nStorybook acts as a shared design language between:\n\n- Designers\n- Engineers\n- Product stakeholders\n\nIt provides:\n\n- Live component previews\n- State exploration\n- Accessibility review\n- Prop-level experimentation\n\nStorybook transforms the UI library into a living design system.\n\n---\n\n# 🔷 Built on TanStack Start\n\nExplorer UI runs within TanStack Start, giving us:\n\n- Modern routing\n- Predictable data loading\n- Type-safe development\n- Flexible rendering strategies\n\n```mermaid\ngraph LR\n    Data --\u003e TanStackStart\n    TanStackStart --\u003e ExplorerUI\n    ExplorerUI --\u003e UserExperience\n```\n\nThis foundation supports:\n\n- Real-time weather\n- AI-generated content hydration\n- Future expansion into booking and itinerary tools\n\n---\n\n# 🎯 Why Explorer UI Matters\n\nExplorer UI enables a rare balance:\n\n- Structured design system\n- Generative content flexibility\n- Scalable architecture\n- Creative storytelling\n\nIt supports both:\n\n- The emotional side of travel discovery\n- The informational side of travel planning\n\nAnd it does so in a cohesive, extensible way.\n\n---\n\n# 🛠 Getting Started\n\n```bash\npnpm install\npnpm dev\npnpm run storybook\n```\n\n---\n\n# 🔮 What’s Next\n\n- Itinerary composition experiences\n- Trip timeline patterns\n- Theming expansion\n- Enhanced generative layout experimentation\n\nExplorer UI is not just about building screens.\n\nIt’s about designing how travelers experience intelligent assistance.\n\n## 📫 Let's Connect\n\n- **Portfolio**: [andyfrith.com](https://andyfrith.com)\n- **LinkedIn**: [linkedin.com/in/goodapplemedia](https://linkedin.com/in/goodapplemedia)\n- **GitHub**: [@andyfrith](https://github.com/andyfrith)\n\n\u003e _\"Delivering sound, proven, and trusted architecture solutions that are ready for any challenge.\"_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandyfrith%2Fexplorer-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandyfrith%2Fexplorer-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandyfrith%2Fexplorer-ui/lists"}