# 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](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) 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](https://steamcommunity.com/dev/apikey)
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

```bash
# Install frontend dependencies
npm install

# Install backend dependencies
cd server
npm install
cd ..
```

### 4. Start the Application

```bash
# Start both frontend and backend
npm run dev:full
```

Or start them separately:

```bash
# 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](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

```js
// 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...
    },
  },
])
```