React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

S22 Poll - RGL HL Season 22 Map Poll

A React-based voting application with Steam authentication for the RGL Highlander Season 22 map selection poll.

Features

• 🎮 Steam authentication via Passport.js
• 📱 Mobile-friendly drag & drop interface
• 🖱️ Desktop drag & drop support
• 📊 Vote ranking system
• ✅ Confirmation dialog before submission
• 🔒 Secure backend API

Setup Instructions

1. Get Steam API Key

1. Go to Steam Web API Key page
2. Sign in with your Steam account
3. Enter a domain name (you can use localhost for development)
4. Copy your API key

2. Configure Environment Variables

1. Navigate to the server directory
2. Edit the .env file:

   STEAM_API_KEY=your-steam-api-key-here
   SESSION_SECRET=your-super-secret-session-key-change-this-in-production
   

3. Install Dependencies

# Install frontend dependencies
npm install

# Install backend dependencies
cd server
npm install
cd ..

4. Start the Application

# Start both frontend and backend
npm run dev:full

Or start them separately:

# Terminal 1 - Frontend (Vite dev server)
npm run dev

# Terminal 2 - Backend (Express server)
npm run server

URLs

• Frontend: http://localhost:5173
• Backend API: http://localhost:3001
• Steam Auth: http://localhost:3001/auth/steam

How to Vote

1. Sign in with your Steam account
2. Arrange the maps by dragging (desktop) or tapping (mobile)
3. Submit your vote - you'll see a confirmation dialog
4. Confirm to finalize your vote (cannot be changed after submission)

API Endpoints

• GET /auth/steam - Initiate Steam authentication
• GET /auth/steam/return - Steam authentication callback
• GET /auth/user - Get current authenticated user
• GET /auth/logout - Logout current user
• POST /api/submit-vote - Submit vote ranking (requires authentication)

Technologies Used

• Frontend: React, TypeScript, Tailwind CSS, Vite
• Backend: Node.js, Express, Passport.js, passport-steam
• Authentication: Steam OpenID via Passport.js

Development

The app uses:

• Hot reload for both frontend and backend
• CORS enabled for cross-origin requests
• Session-based authentication
• Mobile-responsive design with Tailwind CSS

Production Deployment

Before deploying to production:

1. Update the STEAM_API_KEY and SESSION_SECRET in your production environment
2. Set secure: true for cookies in server.js when using HTTPS
3. Update the CORS origin and Steam return URLs to match your production domain
4. Build the frontend: npm run build

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])