vpc-next is a Next.js application designed to provide leaderboards, statistics, and competition data for the Virtual Pinball Chat (VPC) league. It aggregates data from VPC APIs and the Virtual Pinball Spreadsheet (VPS) to display player rankings, weekly competition results, high scores, and detailed player profiles.
- Framework: Next.js 14 (App Router)
- Language: JavaScript (ES Modules)
- UI & Styling: Tailwind CSS, Ant Design (antd), React Icons
- Data Visualization: Chart.js via
react-chartjs-2 - Deployment: Docker support with standalone output.
- Node.js (v22+ recommended)
- Environment variables configured in
.env(seeREADME.mdfor required keys).
To run the development server:
npm install
npm run devThe application will be available at http://localhost:8080.
To build the application for production:
npm run buildTo start the production server:
npm startThe application will be available at http://localhost:80.
This project includes Docker support for streamlined deployment.
docker build -t vpc-next .docker run -p 80:80 vpc-nextThe application will be accessible at http://localhost.
app/: Contains the Next.js App Router structure.layout.js: Root layout including global navigation.page.js: Main entry point (Main Dashboard).player/[username]/page.js: Dynamic routes for player profiles.- Other directories (
competitions,highscores,season,stats) correspond to main site sections.
components/: Modular React components grouped by feature.lib/: Business logic and data processing utilities.
The app integrates with:
- VPC API: Provides league data, scores, and channel-specific weeks.
- VPS API: Provides metadata about virtual pinball tables and games.
- Discord CDN: Used for fetching player avatars.
- Fork this repo
- Create a feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Create a pull request