diff --git a/README.md b/README.md index e215bc4..6ea7199 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,476 @@ -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). +
+ + +
+

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] + + +
+
+ + BiohazardVFX Minecraft + + +

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 + +
    2. +
  2. Tech Stack
    3. +
  3. Architecture
    4. +
  4. Getting Started + +
    5. +
  5. Development + +
    6. +
  6. Deployment
    7. +
  7. Documentation
    8. +
  8. Roadmap
    9. +
  9. Contributing
    10. +
  10. License
    11. +
  11. Contact
    12. +
+
+ +--- + +## About The Project + +
+ Minecraft Screenshot +
+ +
+ +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 +[![Recharts](https://img.shields.io/badge/Recharts-9146FF?style=for-the-badge&logo=apacheecharts&logoColor=white)](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 -First, run the development server: +### Prerequisites +
+Required + +- Cloudflare account with Workers enabled +- Node.js 18+ +- Wrangler CLI v3+ +- Access to Plan Analytics endpoint (read‑only) +
+ +Install Wrangler: ```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev +npm install -g wrangler ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +### Installation -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. +1. Clone and install + ```bash + git clone https://github.com/biohazardvfx/minecraft-website.git + cd minecraft-website + npm install + ``` -This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. +2. Configure environment (optional for local) + ```bash + cp .dev.vars.example .dev.vars # if present + # Edit values as needed + ``` -## Learn More +3. Run locally (Next.js dev) + ```bash + npm run dev + ``` -To learn more about Next.js, take a look at the following resources: +4. Preview Cloudflare build locally + ```bash + npm run preview + ``` -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. +### Environment Variables -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! +The app primarily consumes the public Plan API; no secrets are required for basic usage. If you introduce credentials or bindings, use: -## Deploy on Vercel +- Local: `.dev.vars` (Wrangler) +- Production: Cloudflare Dashboard → Workers → Settings → Variables -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. +

(back to top)

-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. +--- + +## Development + +### Common Commands + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandDescription
Local
npm run devStart Next.js dev server (Turbopack)
npm run buildBuild for production
npm startRun production build locally
npm run lintRun ESLint
Cloudflare
npm run deployDeploy to Cloudflare Workers via OpenNext
npm run previewWrangler preview (local)
npm run cf-typegenGenerate 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** + +[![Website](https://img.shields.io/badge/Website-nicholai.work-667eea?style=for-the-badge&logo=google-chrome&logoColor=white)](https://nicholai.work) +[![LinkedIn](https://img.shields.io/badge/LinkedIn-Nicholai_Vogel-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://linkedin.com/in/nicholai-vogel) +[![Instagram](https://img.shields.io/badge/Instagram-@nicholai.exe-E4405F?style=for-the-badge&logo=instagram&logoColor=white)](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)

+ +
+ + +[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