477 lines
14 KiB
Markdown
477 lines
14 KiB
Markdown
<div align="center">
|
||
|
||
<!-- DEPLOYMENT COMMAND -->
|
||
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; border-radius: 10px; margin-bottom: 30px;">
|
||
<h3 style="color: white; margin: 0;">DEPLOYMENT COMMAND</h3>
|
||
<code style="color: #ffd700; font-size: 16px; font-weight: bold;">npm run build && wrangler deploy</code>
|
||
<br />
|
||
<small style="color: #fff; opacity: .9;">Or use preview: <code>npm run preview</code></small>
|
||
<br />
|
||
<small style="color: #fff; opacity: .9;">Cloudflare typegen: <code>npm run cf-typegen</code></small>
|
||
</div>
|
||
|
||
<a id="readme-top"></a>
|
||
|
||
<!-- PROJECT SHIELDS -->
|
||
[![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]
|
||
|
||
<!-- PROJECT LOGO -->
|
||
<br />
|
||
<div align="center">
|
||
<a href="https://minecraft.biohazardvfx.com">
|
||
<img src="public/2025-10-22_17.07.42.png" alt="BiohazardVFX Minecraft" width="600">
|
||
</a>
|
||
|
||
<h1 align="center" style="font-size: 48px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">BiohazardVFX Minecraft</h1>
|
||
|
||
<p align="center" style="font-size: 18px; max-width: 720px;">
|
||
Real‑time Minecraft server website built on Cloudflare Workers with Next.js 15 and OpenNext. Pulls live stats from Plan Analytics.
|
||
<br />
|
||
<strong>Edge‑rendered • Fast • Server‑aware</strong>
|
||
<br /><br />
|
||
<a href="https://minecraft.biohazardvfx.com"><strong>View Live Site »</strong></a>
|
||
<br /><br />
|
||
<a href="#getting-started">Quick Start</a>
|
||
·
|
||
<a href="https://git.biohazardvfx.com/BiohazardVFX/minecraft-website/issues/new?labels=bug">Report Bug</a>
|
||
·
|
||
<a href="https://git.biohazardvfx.com/BiohazardVFX/minecraft-website/issues/new?labels=enhancement">Request Feature</a>
|
||
</p>
|
||
</div>
|
||
|
||
---
|
||
|
||
<details open>
|
||
<summary><h2 style="display: inline-block;">Table of Contents</h2></summary>
|
||
<ol>
|
||
<li><a href="#about-the-project">About The Project</a>
|
||
<ul>
|
||
<li><a href="#key-features">Key Features</a></li>
|
||
<li><a href="#why-this-project">Why This Project?</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="#tech-stack">Tech Stack</a></li>
|
||
<li><a href="#architecture">Architecture</a></li>
|
||
<li><a href="#getting-started">Getting Started</a>
|
||
<ul>
|
||
<li><a href="#prerequisites">Prerequisites</a></li>
|
||
<li><a href="#installation">Installation</a></li>
|
||
<li><a href="#environment-variables">Environment Variables</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="#development">Development</a>
|
||
<ul>
|
||
<li><a href="#common-commands">Common Commands</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="#deployment">Deployment</a></li>
|
||
<li><a href="#documentation">Documentation</a></li>
|
||
<li><a href="#roadmap">Roadmap</a></li>
|
||
<li><a href="#contributing">Contributing</a></li>
|
||
<li><a href="#license">License</a></li>
|
||
<li><a href="#contact">Contact</a></li>
|
||
</ol>
|
||
</details>
|
||
|
||
---
|
||
|
||
## About The Project
|
||
|
||
<div align="center">
|
||
<img src="public/2023-11-23_21.00.17.png" alt="Minecraft Screenshot" width="800" style="border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);">
|
||
</div>
|
||
|
||
<br />
|
||
|
||
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
|
||
|
||
<table>
|
||
<tr>
|
||
<td width="50%">
|
||
|
||
#### 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
|
||
|
||
</td>
|
||
<td width="50%">
|
||
|
||
#### 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
|
||
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
### Why This Project?
|
||
|
||
<div style="background: #f6f8fa; padding: 20px; border-left: 4px solid #667eea; border-radius: 4px; margin: 20px 0;">
|
||
|
||
**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.
|
||
|
||
</div>
|
||
|
||
<p align="right">(<a href="#readme-top">back to top</a>)</p>
|
||
|
||
---
|
||
|
||
## Tech Stack
|
||
|
||
<div align="center">
|
||
|
||
### 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/)
|
||
|
||
</div>
|
||
|
||
<p align="right">(<a href="#readme-top">back to top</a>)</p>
|
||
|
||
---
|
||
|
||
## Architecture
|
||
|
||
<div align="center">
|
||
|
||
```mermaid
|
||
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
|
||
```
|
||
|
||
</div>
|
||
|
||
### System Flow
|
||
|
||
<details>
|
||
<summary><strong>Server Status Flow</strong></summary>
|
||
|
||
```
|
||
Client → /api/server-status (edge)
|
||
↓
|
||
Fetch Plan /v1/serverOverview
|
||
↓
|
||
Cache 30s (Next revalidate)
|
||
↓
|
||
Return JSON → UI updates every 30s
|
||
```
|
||
|
||
</details>
|
||
|
||
### 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)
|
||
```
|
||
|
||
<p align="right">(<a href="#readme-top">back to top</a>)</p>
|
||
|
||
---
|
||
|
||
## Getting Started
|
||
|
||
### Prerequisites
|
||
|
||
<div style="background: #fff3cd; padding: 15px; border-left: 4px solid #ffc107; border-radius: 4px; margin: 20px 0;">
|
||
<strong>Required</strong>
|
||
|
||
- Cloudflare account with Workers enabled
|
||
- Node.js 18+
|
||
- Wrangler CLI v3+
|
||
- Access to Plan Analytics endpoint (read‑only)
|
||
</div>
|
||
|
||
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
|
||
|
||
<p align="right">(<a href="#readme-top">back to top</a>)</p>
|
||
|
||
---
|
||
|
||
## Development
|
||
|
||
### Common Commands
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Command</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td colspan="2"><strong>Local</strong></td></tr>
|
||
<tr>
|
||
<td><code>npm run dev</code></td>
|
||
<td>Start Next.js dev server (Turbopack)</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>npm run build</code></td>
|
||
<td>Build for production</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>npm start</code></td>
|
||
<td>Run production build locally</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>npm run lint</code></td>
|
||
<td>Run ESLint</td>
|
||
</tr>
|
||
|
||
<tr><td colspan="2"><strong>Cloudflare</strong></td></tr>
|
||
<tr>
|
||
<td><code>npm run deploy</code></td>
|
||
<td>Deploy to Cloudflare Workers via OpenNext</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>npm run preview</code></td>
|
||
<td>Wrangler preview (local)</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>npm run cf-typegen</code></td>
|
||
<td>Generate Cloudflare types</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<p align="right">(<a href="#readme-top">back to top</a>)</p>
|
||
|
||
---
|
||
|
||
## Deployment
|
||
|
||
**Production URL:** https://minecraft.biohazardvfx.com
|
||
|
||
### Quick Deploy
|
||
|
||
<div style="background: #f8d7da; padding: 15px; border-left: 4px solid #dc3545; border-radius: 4px; margin: 20px 0;">
|
||
<strong>Command</strong><br><br>
|
||
<code>npm run build && wrangler deploy</code>
|
||
</div>
|
||
|
||
### Notes
|
||
- OpenNext outputs Worker assets; Wrangler pushes them to Cloudflare Workers.
|
||
- API routes run with `runtime = 'edge'` for compatibility and speed.
|
||
|
||
<p align="right">(<a href="#readme-top">back to top</a>)</p>
|
||
|
||
---
|
||
|
||
## Documentation
|
||
|
||
- Project AI/dev guide: <code>CLAUDE.md</code>
|
||
- SEO plan: <code>SEO_STRATEGY.md</code>
|
||
- Configs of interest: <code>wrangler.jsonc</code>, <code>open-next.config.ts</code>
|
||
|
||
<p align="right">(<a href="#readme-top">back to top</a>)</p>
|
||
|
||
---
|
||
|
||
## 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
|
||
|
||
<p align="right">(<a href="#readme-top">back to top</a>)</p>
|
||
|
||
---
|
||
|
||
## Contributing
|
||
|
||
Contributions are welcome! Please open an issue to discuss significant changes first.
|
||
|
||
Suggested workflow:
|
||
1. Fork the repo
|
||
2. Create a feature branch: <code>git checkout -b feat/awesome</code>
|
||
3. Commit with conventional commits
|
||
4. Open a PR with screenshots and context
|
||
|
||
<p align="right">(<a href="#readme-top">back to top</a>)</p>
|
||
|
||
---
|
||
|
||
## 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.).
|
||
|
||
<p align="right">(<a href="#readme-top">back to top</a>)</p>
|
||
|
||
---
|
||
|
||
## Contact
|
||
|
||
<div align="center">
|
||
|
||
**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)
|
||
|
||
</div>
|
||
|
||
---
|
||
|
||
**Repository**
|
||
|
||
https://git.biohazardvfx.com/BiohazardVFX/minecraft-website
|
||
|
||
---
|
||
|
||
<div align="center">
|
||
|
||
### Star this repository if you find it helpful!
|
||
|
||
<p align="right">(<a href="#readme-top">back to top</a>)</p>
|
||
|
||
</div>
|
||
|
||
<!-- MARKDOWN REFERENCE LINKS & BADGES -->
|
||
[contributors-shield]: https://img.shields.io/gitea/contributors/BiohazardVFX/minecraft-website?server=https%3A%2F%2Fgit.biohazardvfx.com&style=for-the-badge&label=Contributors&color=667eea
|
||
[contributors-url]: https://git.biohazardvfx.com/BiohazardVFX/minecraft-website/graphs/contributors
|
||
[forks-shield]: https://img.shields.io/gitea/forks/BiohazardVFX/minecraft-website?server=https%3A%2F%2Fgit.biohazardvfx.com&style=for-the-badge&label=Forks&color=667eea
|
||
[forks-url]: https://git.biohazardvfx.com/BiohazardVFX/minecraft-website/network/members
|
||
[stars-shield]: https://img.shields.io/gitea/stars/BiohazardVFX/minecraft-website?server=https%3A%2F%2Fgit.biohazardvfx.com&style=for-the-badge&label=Stars&color=667eea
|
||
[stars-url]: https://git.biohazardvfx.com/BiohazardVFX/minecraft-website/stargazers
|
||
[issues-shield]: https://img.shields.io/gitea/issues/open/BiohazardVFX/minecraft-website?server=https%3A%2F%2Fgit.biohazardvfx.com&style=for-the-badge&label=Issues&color=667eea
|
||
[issues-url]: https://git.biohazardvfx.com/BiohazardVFX/minecraft-website/issues
|
||
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=0077B5
|
||
[linkedin-url]: https://linkedin.com/in/nicholai-vogel
|
||
|
||
[workers-badge]: https://img.shields.io/badge/Deployed_on-Cloudflare_Workers-F38020?style=for-the-badge&logo=cloudflare&logoColor=white
|
||
[workers-url]: https://dash.cloudflare.com
|
||
|
||
[nextjs-badge]: https://img.shields.io/badge/Next.js_15-000000?style=for-the-badge&logo=nextdotjs&logoColor=white
|
||
[next-url]: https://nextjs.org/
|
||
[react-badge]: https://img.shields.io/badge/React_18-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
|
||
[react-url]: https://react.dev/
|
||
[typescript-badge]: https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white
|
||
[typescript-url]: https://www.typescriptlang.org/
|
||
[cloudflare-badge]: https://img.shields.io/badge/Cloudflare_Workers-F38020?style=for-the-badge&logo=cloudflare&logoColor=white
|
||
[cloudflare-url]: https://developers.cloudflare.com/workers/
|
||
[opennext-badge]: https://img.shields.io/badge/OpenNext-18181B?style=for-the-badge&logo=vercel&logoColor=white
|
||
[opennext-url]: https://opennext.js.org/
|
||
[shadcn-badge]: https://img.shields.io/badge/ShadCN_UI-000000?style=for-the-badge&logo=shadcnui&logoColor=white
|
||
[shadcn-url]: https://ui.shadcn.com
|
||
[tailwind-badge]: https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white
|
||
[tailwind-url]: https://tailwindcss.com
|