DEPLOYMENT COMMAND
npm run build && wrangler deploy
Or use preview: npm run preview
Cloudflare typegen: npm run cf-typegen
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![Cloudflare Workers][workers-badge]][workers-url]
[![LinkedIn][linkedin-shield]][linkedin-url]
---
Table of Contents
- About The Project
- Tech Stack
- Architecture
- Getting Started
- Development
- Deployment
- Documentation
- Roadmap
- Contributing
- License
- Contact
---
## About The Project
This site powers the BiohazardVFX Minecraft server homepage. It shows real‑time server status, uptime, TPS, and player statistics using the Plan Analytics API, and runs entirely at the edge on Cloudflare Workers using OpenNext.
### Key Features
|
#### Live Server Status
- Edge API route proxies Plan `/v1/serverOverview`
- 30s caching and client polling
- Displays online players, uptime, total players, 7d unique, avg TPS
#### Player Activity Chart
- Recharts‑based chart component
- Currently mock data with easy API integration point
- Responsive container and themed tooltips
#### Polished Landing UI
- Hero section with background overlays
- Shadcn/ui components and Tailwind v4
- Accessible defaults and keyboard focus states
|
#### Cloudflare Edge Runtime
- `runtime = 'edge'` for API routes
- Deployed via Wrangler + OpenNext adapter
- Fast static asset delivery
#### Modern Frontend Stack
- Next.js 15 App Router
- TypeScript strict mode
- Path alias `@/*` to `src/*`
#### Simple Ops
- Single deploy command
- Automatic typegen for CF bindings
- No server to manage
|
### Why This Project?
**Edge‑first delivery** for low latency status checks and fast page loads.
**Plan API integration** to surface meaningful metrics players care about.
**Maintainable codebase** with clear separation of UI, API route, and config.
(back to top)
---
## Tech Stack
### Core Framework
[![Next.js][nextjs-badge]][next-url]
[![React][react-badge]][react-url]
[![TypeScript][typescript-badge]][typescript-url]
### Cloudflare Infrastructure
[![Cloudflare Workers][cloudflare-badge]][cloudflare-url]
[![OpenNext][opennext-badge]][opennext-url]
### UI & Styling
[![ShadCN UI][shadcn-badge]][shadcn-url]
[![Tailwind CSS][tailwind-badge]][tailwind-url]
### Charts
[](https://recharts.org/)
(back to top)
---
## Architecture
```mermaid
graph TB
subgraph "Client Layer"
Browser[Browser]
end
subgraph "Edge Layer - Cloudflare Workers"
NextJS[Next.js 15
App Router]
OpenNext[OpenNext
Adapter]
end
subgraph "External Services"
Plan[Plan Analytics API
stats.biohazardvfx.com]
end
Browser --> NextJS
NextJS --> OpenNext
OpenNext --> Plan
style Browser fill:#667eea,color:#fff
style NextJS fill:#000,color:#fff
style OpenNext fill:#f38020,color:#fff
style Plan fill:#0a7cff,color:#fff
```
### System Flow
Server Status Flow
```
Client → /api/server-status (edge)
↓
Fetch Plan /v1/serverOverview
↓
Cache 30s (Next revalidate)
↓
Return JSON → UI updates every 30s
```
### Project Structure
```
minecraft-website/
├── src/app/ # Next.js App Router
│ ├── api/server-status/ # Edge API route → Plan
│ ├── layout.tsx # Root layout (fonts, providers)
│ └── page.tsx # Landing page
├── src/components/ # UI + feature components
│ ├── server-status.tsx # Live status widget
│ ├── player-activity-chart.tsx
│ └── ui/ # shadcn/ui primitives
├── public/ # Static assets
├── open-next.config.ts # OpenNext adapter config
├── wrangler.jsonc # Cloudflare Workers config
└── CLAUDE.md # AI dev guide (this project’s details)
```
(back to top)
---
## Getting Started
### Prerequisites
Required
- Cloudflare account with Workers enabled
- Node.js 18+
- Wrangler CLI v3+
- Access to Plan Analytics endpoint (read‑only)
Install Wrangler:
```bash
npm install -g wrangler
```
### Installation
1. Clone and install
```bash
git clone https://github.com/biohazardvfx/minecraft-website.git
cd minecraft-website
npm install
```
2. Configure environment (optional for local)
```bash
cp .dev.vars.example .dev.vars # if present
# Edit values as needed
```
3. Run locally (Next.js dev)
```bash
npm run dev
```
4. Preview Cloudflare build locally
```bash
npm run preview
```
### Environment Variables
The app primarily consumes the public Plan API; no secrets are required for basic usage. If you introduce credentials or bindings, use:
- Local: `.dev.vars` (Wrangler)
- Production: Cloudflare Dashboard → Workers → Settings → Variables
(back to top)
---
## Development
### Common Commands
| Command |
Description |
| Local |
npm run dev |
Start Next.js dev server (Turbopack) |
npm run build |
Build for production |
npm start |
Run production build locally |
npm run lint |
Run ESLint |
| Cloudflare |
npm run deploy |
Deploy to Cloudflare Workers via OpenNext |
npm run preview |
Wrangler preview (local) |
npm run cf-typegen |
Generate Cloudflare types |
(back to top)
---
## Deployment
**Production URL:** https://minecraft.biohazardvfx.com
### Quick Deploy
Command
npm run build && wrangler deploy
### Notes
- OpenNext outputs Worker assets; Wrangler pushes them to Cloudflare Workers.
- API routes run with `runtime = 'edge'` for compatibility and speed.
(back to top)
---
## Documentation
- Project AI/dev guide: CLAUDE.md
- SEO plan: SEO_STRATEGY.md
- Configs of interest: wrangler.jsonc, open-next.config.ts
(back to top)
---
## Roadmap
- [x] Live server status from Plan API
- [x] Edge runtime on Cloudflare Workers
- [x] Shadcn/ui + Tailwind v4 UI
- [ ] Integrate Plan graph endpoints for activity chart
- [ ] Player list via websockets/HTML parsing fallback
- [ ] Add uptime history and incidents page
- [ ] Add CI workflow for lint/build checks
(back to top)
---
## Contributing
Contributions are welcome! Please open an issue to discuss significant changes first.
Suggested workflow:
1. Fork the repo
2. Create a feature branch: git checkout -b feat/awesome
3. Commit with conventional commits
4. Open a PR with screenshots and context
(back to top)
---
## License
This project currently does not declare a license. If you plan to open‑source it, consider adding a LICENSE file (MIT, Apache‑2.0, GPL‑3.0, etc.).
(back to top)
---
## Contact
**Nicholai Vogel**
[](https://nicholai.work)
[](https://linkedin.com/in/nicholai-vogel)
[](https://instagram.com/nicholai.exe)
**Live Website**
[https://minecraft.biohazardvfx.com](https://minecraft.biohazardvfx.com)
---
**Repository**
https://git.biohazardvfx.com/BiohazardVFX/minecraft-website
---
### Star this repository if you find it helpful!
(back to top)
