Interactive map of Colombia where you can track your travel experiences by department. Mark each department with different levels based on your travel status - from planning to visit to having lived there.

This project is based on a series of travel level maps from different countries:

• Original inspiration: Japan Travel Level Map by zhung.com.tw
• Philippines version: Philippines Travel Level Map by OSSPhilippines
• Colombia SVG data: Colombia Map Data by aumentada

This Colombian adaptation builds upon these excellent projects, adapting the concept for Colombia's 32 departments and Bogotá D.C.

Each department can be marked with one of six travel levels:

• Nunca estuviste (White) - Never been there
• Pasaste por ahí (Blue) - Passed through
• Aterrizaste ahí (Green) - Landed there
• Visitaste ahí (Yellow) - Visited there
• Te quedaste ahí (Orange) - Stayed there
• Viviste ahí (Red) - Lived there

1. Clone the repository:

   git clone https://github.com/yourusername/colombia-travel-level-map.git

2. Navigate to the project directory:

   cd colombia-travel-level-map

3. Install dependencies:

   pnpm install

4. Set up Firebase (see setup section below)

5. Start the development server:

   pnpm run dev

• Frontend: Astro + Svelte + TypeScript
• Styling: Tailwind CSS
• Authentication: Firebase Auth
• Database: Firestore
• Package Manager: pnpm

Follow this guide to quickly set up Firebase for your project. For more detailed instructions, see FIREBASE_SETUP.md.

1. Go to the Firebase Console
2. Navigate to Project settings > Service accounts
3. Click Generate new private key, then download and secure the JSON file

1. If you haven't added a web app to Firebase, click the web icon (</>) in Project settings > Your apps to create one
2. Find your web app and copy the configuration object

1. Save your service account credentials as service-account.json in the project's root
2. Run the helper script:

   node scripts/createEnvFromServiceAccount.js

3. Update src/firebase/client.ts with your web app configuration
4. Important: Remove service-account.json after setup to protect your credentials

1. In Firebase Console, go to Authentication
2. Click Get started
3. Enable Google sign-in and configure according to Firebase's prompts

• Interactive map of all Colombian departments
• User authentication with Google
• Personal travel level tracking
• Data persistence with Firestore
• Responsive design
• Map export functionality
• Multi-language support

• pnpm dev - Start development server
• pnpm build - Build for production
• pnpm preview - Preview production build
• pnpm test - Run tests
• pnpm lint - Run linter

src/
├── components/          # Svelte components
├── firebase/           # Firebase configuration
├── layouts/            # Astro layouts
├── pages/              # Astro pages
└── css/                # Global styles

• Achievement system: Badges like "Caribbean Explorer", "Andean Expert"
• User comparisons: Rankings and statistics
• Social sharing: Share your travel map on social media
• Export options: SVG, PDF formats
• Department information:
  • Tourist information for each department
  • Representative photos
  • Demographic and economic data
  • Links to official tourism resources

This project is licensed under the MIT License - see the LICENSE file for details.

Contributions are welcome! Please feel free to submit a Pull Request.

• Original concept by zhung.com.tw
• Philippines adaptation by OSSPhilippines
• Colombia map data by aumentada
• Built with Astro, Svelte, and Firebase