Frontend Overview

The frontend is a standalone React 18 single-page application built with Vite, TailwindCSS, and Radix UI. It serves as the web dashboard for controlling the bot, managing guild settings, and viewing statistics.

Technology Stack

Environment Variables

Create a .env file in frontend/ based on .env.example:

The redirect URI for the Discord OAuth2 flow must be set to /invite-callback on your frontend domain (e.g., https://meww.me/invite-callback).

Application Root (App.tsx)

The root component wraps the application with providers:

QueryClientProvider (TanStack)
  └── AuthProvider (Discord session)
       └── TooltipProvider (Radix)
            └── Sonner (Toasts)
                 └── BrowserRouter
                      └── SmoothScroll
                           └── Routes
                      └── BackgroundMusicPlayer

Routing

Key Hooks

useAuth (hooks/useAuth.tsx)

Authentication context provider. Fetches user session from /auth/me on mount and exposes:

• user - current user object (id, username, avatar, isAdmin)
• isAuthenticated - boolean
• logout() - calls /auth/logout and clears state

usePlayer (hooks/usePlayer.ts)

Central player state management hook. Handles:

• Fetching player state from /api/player/:guildId
• Sending control commands (pause, skip, volume, loop, seek, shuffle, queue management)
• Socket.IO event subscription for real-time state updates
• Automatic reconnection and state reconciliation

Returns the full player state including: current, queue, paused, volume, loop, position, autoplay, isPremium.

useSocket (hooks/useSocket.ts)

Socket.IO connection hook. Manages:

• Connection to the backend Socket.IO server
• Guild-specific room subscription (subscribe / unsubscribe events)
• Automatic reconnection on disconnect

useLikedSongs (hooks/useLikedSongs.ts)

Manages the user's liked songs collection. Provides:

• likedSongs - array of liked tracks
• toggleLike(track) - add or remove a track from liked songs
• isLiked(uri) - check if a track is liked

useTrackColor (hooks/useTrackColor.ts)

Extracts dominant color from album artwork to create dynamic UI theming.

Backend Communication

All API calls go to VITE_BACKEND_URL. The frontend uses two communication channels:

HTTP (REST API)

Session-based authentication via cookies. The Fastify backend sets an httpOnly cookie (mewwme-dash.sid) on login. All /api/* requests include credentials.

Key patterns:

• GET /auth/me - check session
• GET /api/guilds - list mutual guilds
• GET /api/player/:guildId - get player state
• PATCH /api/player/:guildId - control player
• GET /api/search?identifier=...&source=... - search tracks

Socket.IO (Real-time)

After connecting, the client emits subscribe with a guildId to join a guild room. The server then emits real-time player events:

External Links (config/links.ts)

Centralized link definitions used across the frontend:

Running the Frontend

Development

cd frontend
npm install
npm run dev

The Vite dev server starts on port 5173 by default.

Production

cd frontend
npm run build
npm run preview

The build output is in frontend/dist/. Serve with any static file server or deploy to a CDN.