A modern web application to browse FiveM and RedM server lists with search, filtering, and real-time player statistics. Defaults to Thai 🇹🇭 servers.

• Vite + Vue 3 + TypeScript — Frontend framework
• Tailwind CSS 4.1 — Utility-first CSS (Vite plugin)
• Vue Router 4 — Client-side routing
• @msgpack/msgpack — Decode FiveM streaming server data
• Bun — JavaScript runtime & package manager
• GitHub Pages — Static hosting via GitHub Actions

• 🎮 Supports both FiveM and RedM
• 🇹🇭 Defaults to Thai servers with 17+ locale filters
• 🔍 Search by server name, gametype, or map
• 📊 Real-time online player statistics
• 🌙 Modern dark mode UI
• 📱 Fully responsive design
• 🌐 Multi-language support (English & Thai) with auto-detection
• 🔎 SEO optimized (meta tags, Open Graph, JSON-LD, sitemap)
• 📢 Adsterra ad integration (leaderboard, rectangle, banner)
• 🛡️ Ad blocker detection with user notification
• ♻️ Auto-refresh data every 60 seconds
• 🧩 Extensible architecture for future growth

# Install dependencies bun install # Dev server bun run dev # Build for production bun run build # Preview production build bun run preview

This project auto-deploys via GitHub Actions on every push to the main branch.

1. Go to Settings → Pages
2. Set Source to GitHub Actions
3. Push code to the main branch

• Update base in vite.config.ts to match your repository name

Data sourced from Cfx.re API

src/ ├── components/ │ ├── common/ # Shared UI (Loading, Pagination, StatsBar, AdBlockDetector) │ ├── layout/ # Header, Footer, AdBanner │ └── server/ # Server card, list, search, filters ├── composables/ # Vue composables │ ├── useServers.ts # Server data & filtering │ ├── useServerIcon.ts # Lazy-load server icons │ ├── useSeo.ts # Dynamic SEO meta tags │ └── useAdBlock.ts # Ad blocker detection state ├── constants/ # Configuration & constants ├── i18n/ # Internationalization (EN/TH) │ ├── locales/ # Translation files │ └── types.ts # Translation schema ├── pages/ # Page components ├── router/ # Vue Router config ├── services/ # API service layer ├── types/ # TypeScript type definitions └── utils/ # Helper utilities public/ ├── robots.txt # Search engine crawling rules ├── sitemap.xml # Sitemap for SEO └── images/ # Static images 

Ads are powered by Adsterra and managed centrally through AdBanner.vue. Current ad slots:

1. Edit AdBanner.vue — update Adsterra keys or replace with other ad code
2. Update Adsterra ad unit keys in constants/index.ts (ADSTERRA.KEYS)
3. Toggle ad positions on/off via AD_ENABLED in constants/index.ts
4. Ad blocker detection is handled by AdBlockDetector.vue with a modal notification

• Meta tags: title, description, keywords (EN+TH), robots
• Open Graph / Twitter: sharing previews with image
• JSON-LD: WebSite (with SearchAction) + WebApplication structured data
• Dynamic: meta tags update automatically when language is switched
• Sitemap & robots.txt: located in public/
• Hreflang: en, th, x-default for multi-language support

MIT