DEPLOYMENT COMMAND

npm run build && wrangler deploy
Or use preview: npm run preview
Cloudflare typegen: npm run cf-typegen

BiohazardVFX Minecraft

Real‑time Minecraft server website built on Cloudflare Workers with Next.js 15 and OpenNext. Pulls live stats from Plan Analytics.
Edge‑rendered • Fast • Server‑aware

View Live Site »

Quick Start · Report Bug · Request Feature

---

Table of Contents

1. About The Project
   • Key Features
   • Why This Project?
2. Tech Stack
3. Architecture
4. Getting Started
   • Prerequisites
   • Installation
   • Environment Variables
5. Development
   • Common Commands
6. Deployment
7. Documentation
8. Roadmap
9. Contributing
10. License
11. 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

Cloudflare Infrastructure

UI & Styling

Charts

(back to top)

---

Architecture

graph TB
    subgraph "Client Layer"
        Browser[Browser]
    end

    subgraph "Edge Layer - Cloudflare Workers"
        NextJS[Next.js 15<br/>App Router]
        OpenNext[OpenNext<br/>Adapter]
    end

    subgraph "External Services"
        Plan[Plan Analytics API<br/>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:

npm install -g wrangler

Installation

1. Clone and install

   git clone https://github.com/biohazardvfx/minecraft-website.git
   cd minecraft-website
   npm install
   

2. Configure environment (optional for local)

   cp .dev.vars.example .dev.vars  # if present
   # Edit values as needed
   

3. Run locally (Next.js dev)

   npm run dev
   

4. Preview Cloudflare build locally

   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

• Live server status from Plan API
• Edge runtime on Cloudflare Workers
• 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

Live Website https://minecraft.biohazardvfx.com

---

Repository

https://git.biohazardvfx.com/BiohazardVFX/minecraft-website

---

Star this repository if you find it helpful!

(back to top)