Vanilla² Website is the public web application for the Vanilla² Minecraft Fabric mod. The main page introduces the mod's combat and progression overhaul, links to downloads, Discord, documentation, GitHub, and bug reporting, and showcases feature cards for weapons, armor, enchantments, fishing rod combat, HUD improvements, and the Sulfur Cube.

The app also includes a local account system, OpenAuth token routes, development utilities, a MySQL-backed bug reporter, and a small reusable component/template library used by the site's pages.

• Landing page for Vanilla² with feature, enchanting, download, documentation, Discord, and GitHub links.
• Email-code style login and signup flow powered by OpenAuth and first-party server actions.
• HTTP-only access and refresh token cookies with token verification helpers.
• MySQL-backed users, roles, bug reports, bug report counters, and uploaded bug report files.
• Bug list, detail, filtering, search previews, and authenticated multipart bug submission.
• Server-side validation for bug categories, versions, status, priority, file limits, and server-controlled fields.
• Reusable UI components including buttons, cards, header/footer, tags, modals, search, inputs, toggles, multiselects, file uploads, previews, and scroll helpers.
• Reusable page templates for default pages, element views, error pages, and searchable list pages.
• Development pages for component/template inspection.

• Next.js App Router
• React
• Tailwind CSS v4 via PostCSS
• OpenAuth
• Hono for OpenAuth route handling
• mysql2
• Valibot for auth subject schemas

src/app/                  Next.js routes, pages, layouts, server actions, and API routes
src/app/api/bugs/         JSON API for listing and submitting bug reports
src/app/bugs/             Bug browsing, filtering, detail pages, and report form UI
src/auth/                 OpenAuth issuer, providers, subjects, permissions, and MySQL user helpers
src/bugs/                 Bug report validation, persistence, file storage, and demo seed helpers
src/components/           Shared UI components
src/security/             Request and server-field guards
src/template-pages/       Reusable page templates
src/assets/               Project assets and SVG icons
cdn/                      Static CDN-style assets aliased as @cdn
scripts/                  Local MySQL helper scripts

Important entry points:

• src/app/page.js — home page content.
• src/app/layout.js — global metadata, fonts, header, and layout shell.
• src/app/login/page.js, src/app/signup/page.js, src/app/login/code/page.js — auth UI.
• src/app/authorize/route.js, src/app/token/route.js, src/app/api/callback/route.js — OpenAuth flow routes.
• src/app/api/auth/status/route.js, src/app/api/auth/logout/route.js — session status and logout APIs.
• src/app/api/bugs/route.js — bug report list/create API.
• src/bugs/reporter.js — bug schema creation, validation, filtering, persistence, and uploads.

• Node.js compatible with Next.js 16.
• npm.
• MySQL 8 or a compatible MySQL server.

Install dependencies before running any Next.js script:

npm install

The application can connect through either DATABASE_URL or individual MySQL variables.

Example .env:

MYSQL_HOST=localhost
MYSQL_PORT=3306
MYSQL_USER=root
MYSQL_PASSWORD=password
MYSQL_DATABASE=vanillasquared
INTERNAL_AUTH_SECRET=replace-with-a-long-random-secret
EMAIL_CODE_CLAIM_SECRET=replace-with-a-long-random-secret
bypass=replace-with-a-temporary-login-bypass-code

Start the development server:

npm run dev

npm run dev first runs scripts/start-mysql.js. The helper checks local MySQL availability and can auto-start a local Windows MySQL Server install. On non-Windows platforms it only reports that auto-start is not configured.

Build the project before checking in changes:

npm run build

Run the production server after building:

npm run start

• Login and signup use email-code verification.
• Codes are currently logged to the server console; wire sendCode/email delivery to a transactional email provider before production use.
• If the bypass environment variable is set, typing that exact value in the code field bypasses email-code verification.
• The first account that signs up is automatically assigned the owner role.
• Session tokens are stored in HTTP-only cookies named access_token and refresh_token.
• Production requires INTERNAL_AUTH_SECRET, and should use strong secrets for email-code signing.

• Submitting a bug report requires an authenticated user.
• Accepted upload extensions are .log, .png, .txt, .json, and .html.
• Uploads are limited to 3 files, 10 MiB per file.
• Uploaded files are stored under .data/bug-reports.
• Bug categories are currently vanilla-squared, website, and test.
• Priority and status are server-controlled fields and are guarded against client-supplied writes during report creation.

The app exposes helpers intended for development/testing contexts:

• loginInfo() — inspect the current browser session.
• logout() — clear the current browser session.
• openModal('VARIANT') — open modal variants on development pages.

• Next.js build output is written to .next/.
• OpenAuth persistence, generated development secrets, and bug uploads are stored in .data/.
• Do not commit .next/, .data/, local environment files, or secrets.