Hexa Country Map - SvelteKit Application

A SvelteKit application that displays world countries on an interactive map with Leaflet, using Supabase authentication.

Tech Stack

• Frontend: SvelteKit 2 with Svelte 5 (runes syntax)
• Styling: TailwindCSS
• Backend/Database/Auth: Supabase
• Mapping: Leaflet
• Runtime: Bun
• Data Source: GeoJSON from datahub.io
• PDF Generation: jsPDF

Libraries Used

• @supabase/[email protected] - Authentication and session management
• [email protected] - Interactive map rendering
• [email protected] - PDF generation
• tailwindcss - Styling
• sveltekit@2 - Full-stack framework
• svelte@5 - Frontend framework with runes syntax

Prerequisites

• Bun installed (v1.3.4 or higher)
• Supabase account (free tier)

Supabase Setup

1. Go to https://supabase.com and create an account
2. Create a new project:
   • Project name: hexa-country-map
   • Database password: Generate and save it
   • Region: Asia-Pacific (or closest to you)
   • Plan: Free
3. Wait 2-3 minutes for project creation
4. Get your API credentials:
   • Go to Project Settings → API
   • Copy the Project URL
   • Copy the anon public key
5. Create a test user:
   • Go to Authentication → Users
   • Click "Add user" → "Create new user"
   • Email: Any email
   • Password: Create a password
   • Click "Create user"

Installation & Setup

1. Clone the repository:

   git clone <your-repo-url>
   cd hexa-country-map
   

2. Install dependencies:

   bun install
   

3. Create .env file in the root directory:

   SUPABASE_URL=your-project-url-here
   SUPABASE_ANON_KEY=your-anon-key-here
   

4. Running the Application:

   bun run dev