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

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

2. Configure Environment Variables

Navigate to the server directory

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

Sign in with your Steam account
Arrange the maps by dragging (desktop) or tapping (mobile)
Submit your vote - you'll see a confirmation dialog
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:

Update the STEAM_API_KEY and SESSION_SECRET in your production environment
Set secure: true for cookies in server.js when using HTTPS
Update the CORS origin and Steam return URLs to match your production domain
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...
    },
  },
])

4.0 KiB Raw Blame History