Hellion-Media Web App Template

A starting point for Hellion Online Media web apps. Mirrors the production stack used for hellion-media-website, hellion-initiative-v3, and nova-corp-website.

Stack:

• Next.js 16 (App Router, Turbopack)
• React 19
• TypeScript strict mode
• Prisma ORM + MySQL
• NextAuth (Auth.js v5)
• Sass/SCSS in external files — never inline styles
• FontAwesome

Plugin & FFXIV/Modding work? See the Hellion Forge sub-org instead.

---

How to use this template

1. Click "Use this template" on the Forge.
2. Clone locally and replace project name in:
   • package.json → name
   • README.md → this section + project description
3. Set up your .env.local from env.example (rename to .env.example after cloning if your editor prefers it).
4. npm install, npx prisma generate, npx prisma migrate dev.
5. npm run dev → http://localhost:3000.
6. Implement your app in src/app/.

---

Branding — Arctic Cyan + Ember Glow

Hellion Online Media's brand schema. Apply via CSS Custom Properties in globals.scss, never hardcoded. Source-of-truth: BRANDING.md in the hellion-media-website repo — this template lists the tokens you'll typically need:

Primary — Arctic Cyan (structure, navigation, HUD)

Token	Hex	When
--brand-color-dark	#0097A7	Hover-states, pressed buttons
--brand-color	#00BED2	HUD-borders, panel-borders, active nav
--brand-color-light	#4DD9E8	Link text, light accents
--brand-color-glow	rgba(0, 190, 210, 0.6)	Glow effects, text-shadows
--brand-color-subtle	rgba(0, 190, 210, 0.15)	Subtle backgrounds

Accent — Ember Orange (CTAs, badges, highlights)

Token	Hex	When
--accent-color-dark	#E85D04	Hover state for CTAs
--accent-color	#F97316	Primary CTA buttons, feature badges
--accent-color-light	#FB923C	Light accents, text
--accent-color-glow	rgba(249, 115, 22, 0.6)	Button glow

Backgrounds

Token	Hex	When
--background	#070B12	Body background (very dark, not pure black)
--background-medium	#0C1220	Mid background
--surface	#1A2538	Card / panel surfaces
--surface-elevated	rgba(6, 10, 18, 0.75)	Frosted glass panels

Allocation rules

• Cyan for structure: HUD-borders, navigation, links, focus states, glow effects
• Ember for action: CTA-buttons, submit buttons, feature badges, highlights
• Status colors stay semantic: --success #5CB85C, --danger #D9534F, --warning #F0AD4E
• Never the old #448f45 green (fully replaced) or admin-OTP red (#c0392b) repurposed for cyan
• Email templates use raw hex (CSS variables don't work in email clients)

---

Project structure

.
├── .editorconfig
├── env.example                    Template for .env.local — rename if your editor wants the dot
├── .gitea/
│   ├── ISSUE_TEMPLATE/
│   ├── PULL_REQUEST_TEMPLATE.md
│   └── workflows/
│       └── ci.yml                 Lint + type-check + Prisma validate
├── .gitignore
├── prisma/
│   └── schema.prisma              Skeleton with NextAuth tables
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── api/auth/[...nextauth]/route.ts
│   ├── components/                Reusable UI components
│   ├── lib/
│   │   ├── prisma.ts              Prisma client singleton
│   │   └── auth.ts                NextAuth config
│   └── styles/
│       └── globals.scss           Global styles + brand tokens entry
├── next.config.ts
├── package.json
├── tsconfig.json
├── CODEOWNERS
├── LICENSE                        MIT
└── README.md                      This file (replace before shipping)

---

Hellion Online Media conventions

• External SCSS files only — no inline style={...}, no style.css per component. Co-located *.module.scss is fine.
• Database access via DAL layer — direct Prisma calls only inside src/lib/dal/*.ts, never in components or routes. Pattern from hellion-initiative-v3.
• No client-side secrets — all auth/DB access goes through server components or route handlers.
• PM2 single-process deployment — production runs on Strato Windows Server with PM2 (NSSM-wrapped) + IIS reverse proxy. No clustering, no Vercel.
• WireGuard-only DB access — MySQL on the Strato VPS isn't exposed to the public internet, only reachable via the hellion WireGuard tunnel.

---

Production deployment

Opinionated about non-cloud deployment:

• Server: Strato Windows Server 2025
• Process manager: PM2 (NSSM Windows-service wrapper, single-process mode)
• Reverse proxy: IIS with TLS termination
• Database: MySQL on Strato VPS, accessible only via WireGuard
• CI: Gitea Actions on this Forge — see .gitea/workflows/ci.yml

Adjust next.config.ts accordingly (no output: 'standalone' unless you containerize).

---

License

MIT — see LICENSE.