Welcome to Been
Been is a web clone of the popular mobile app for tracking countries you’ve visited. Built with React, TypeScript, and Mapbox GL, it provides an interactive 3D globe visualization with persistent country tracking.Quick Start
Get up and running in minutes
Components
Explore the component architecture
State Management
Learn about Jotai atoms and state
Development Setup
Set up your development environment
Key Features
Interactive 3D Globe
Visualize visited countries on a rotating globe powered by Mapbox GL
Persistent Tracking
Countries are saved to local storage and persist across sessions
Search & Filter
Search for countries and filter by region with real-time results
Progress Tracking
Track your progress with completion percentages per region
Dark Mode
Automatic dark mode support based on system preferences
Responsive Design
Optimized layouts for both mobile and desktop devices
Technology Stack
Been is built with modern web technologies:- React 19 - Latest React features with concurrent rendering
- TypeScript - Type-safe development with strict mode enabled
- Vite - Fast build tooling and hot module replacement
- Jotai - Atomic state management for React
- Mapbox GL - High-performance WebGL mapping library
- Tailwind CSS 4 - Utility-first CSS framework
- Vitest & Playwright - Comprehensive testing suite
Architecture Overview
The application follows a component-based architecture with centralized state management:- Components - Self-contained UI components with TypeScript interfaces
- Atoms - Jotai atoms for global state (countries, selections, focus)
- Hooks - Custom React hooks for localStorage, media queries, and window access
- Models - TypeScript interfaces for Country and Region data structures
All country data and user selections are stored in the browser’s local storage, ensuring privacy and offline persistence.
Next Steps
Get Started
Follow the quickstart guide to clone and run the project locally
Understand the Architecture
Learn about the architecture and how components work together
Explore Components
Dive into the component documentation to understand the UI building blocks
Contribute
Set up your development environment and start contributing