142 lines
4.0 KiB
Markdown
142 lines
4.0 KiB
Markdown
# 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...
|
|
},
|
|
},
|
|
])
|
|
```
|