BiohazardVFX/minecraft-website

Fork 0

Nicholai 0284993ad3 updated readme

2025-11-02 01:18:43 -06:00

14 KiB

Raw Blame History

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

About The Project
- Key Features
- Why This Project?
Tech Stack
Architecture
Getting Started
Development
- Common Commands
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

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

Clone and install

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

Configure environment (optional for local)

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

Run locally (Next.js dev)
```
npm run dev
```
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