A Vue 3 + TypeScript application for interactive mapping with Discord OAuth integration, deployed on Netlify.

• Interactive maps using Leaflet
• Discord OAuth authentication
• Serverless backend using Netlify Functions
• Modern Vue 3 composition API
• TypeScript support

• Node.js 18+
• npm or yarn
• Discord application with OAuth2 configured

1. Install dependencies:

   npm install

2. Set up environment variables (create a .env file):

   VITE_DISCORD_CLIENT_ID=your_discord_client_id
   VITE_REDIRECT_URI=http://localhost:5173/auth/callback
   VITE_BACKEND_URL=http://localhost:8888
   

3. Start the development server:

   npm run dev:netlify

This will start both the Vite dev server and Netlify functions locally.

This application is configured for deployment on Netlify. See NETLIFY_DEPLOYMENT.md for detailed deployment instructions.

1. Push your code to a Git repository
2. Connect to Netlify
3. Set environment variables in Netlify dashboard
4. Deploy!

├── netlify/
│   ├── functions/
│   │   └── auth.js          # Discord OAuth serverless function
│   └── netlify.toml         # Netlify configuration
├── src/
│   ├── components/
│   │   ├── DiscordAuth.vue  # Discord OAuth component
│   │   ├── HelloWorld.vue   # Example component
│   │   └── Map.vue          # Interactive map component
│   ├── router/
│   │   └── index.ts         # Vue Router configuration
│   └── utils/
│       └── urls.ts          # Dynamic URL utilities
└── server.js                # Legacy Express server (can be removed)

• Frontend: Vue 3, TypeScript, Vite
• Maps: Leaflet, Vue Leaflet
• Authentication: Discord OAuth2
• Backend: Netlify Functions
• Deployment: Netlify

• Vue 3 Documentation
• TypeScript Guide
• Netlify Functions
• Discord OAuth2