Custom Fonts for AdvancedKillFeed – create, upload and edit custom fonts for your Unturned killfeeds.

This project is a web-based font manager/editor for the AdvancedKillFeed plugin.
It focuses on the web dashboard: users can sign in with Discord, create and manage their fonts, and see them in a live preview and in a community fonts grid.
It is part of the RedstonePlugins ecosystem.

Status: Work in progress / not actively maintained.
Published as a portfolio project.

• 🔐 Discord OAuth login using NextAuth (Discord provider)
• 🧩 Font management dashboard
  • Create new fonts
  • Edit font metadata (name, sample text, author, visibility, etc.)
  • Track glyph count per font
• 🖼️ Live preview
  • Sample text preview using the selected font
  • Killfeed-style header so users can see how it might look ingame
• 🌍 Community Fonts section
  • Grid of community fonts with search input
  • Font cards showing name, glyph count, author and creation date
• 🎨 Modern UI with Tailwind CSS
  • Dark theme
  • Responsive layout
• 🧪 Glyph manager (WIP)
  • UI prepared to manage glyphs of a font directly from the browser

Note: The current implementation covers the web font manager/editor.
Export and direct integration with the AdvancedKillFeed plugin were planned as a later phase and are not implemented yet.

• Framework: Next.js 13+ (React, App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Auth: NextAuth.js with Discord provider
• Database/ORM: Prisma
• Runtime / Target: Node.js (Vercel / custom VPS)

This project is built with Next.js 13+ using:

• The App Router under src/app for all pages and layouts.
• Classic Pages API routes under src/pages/api for NextAuth and font endpoints.

The project was originally created with create-next-app and then adapted to use:

• TypeScript
• Tailwind CSS
• Prisma
• NextAuth (Discord provider)

.
├─ prisma/
│ └─ schema.prisma # Database schema and Prisma models
├─ public/
│ └─ ... # Static assets (icons, images, etc.)
└─ src/
 ├─ app/ # Next.js App Router (main UI)
 │ ├─ fonts/
 │ │ ├─ [id]/ # Font detail page (view/manage a single font)
 │ │ └─ new/ # Create new font flow
 │ ├─ favicon.ico
 │ ├─ globals.css # Global Tailwind styles
 │ ├─ layout.tsx # Root layout (theme, providers, etc.)
 │ ├─ page.tsx # Landing page (hero, community fonts)
 │ └─ providers.tsx # Global providers (theme, auth, etc.)
 │
 ├─ components/
 │ ├─ Button.tsx # Reusable button component
 │ ├─ Card.tsx # Generic card used across the UI
 │ ├─ ClientLayout.tsx # Layout wrapper for client-side sections
 │ ├─ FontCard.tsx # Card used in the Community Fonts grid
 │ ├─ Footer.tsx
 │ ├─ GlyphManager.tsx # (WIP) UI to manage glyphs of a font
 │ ├─ Logo.tsx
 │ ├─ Navbar.tsx
 │ ├─ Navigation.tsx
 │ ├─ PageContainer.tsx # Shared page layout container
 │ ├─ SectionHeading.tsx # Section titles/subtitles
 │ ├─ SignInButton.tsx # "Sign in with Discord" button
 │ ├─ ThemeToggle.tsx # Light/Dark theme switch
 │ └─ UserMenu.tsx # User dropdown when logged in
 │
 ├─ config/
 │ └─ next-auth.ts # NextAuth configuration (Discord provider)
 │
 ├─ context/
 │ └─ AuthContext.tsx # Auth context to expose user/session across the app
 │
 ├─ hooks/
 │ └─ useFonts.ts # Custom hook to fetch and manage fonts data
 │
 ├─ lib/
 │ └─ ... # Utilities / shared logic (e.g. Prisma client)
 │
 └─ pages/
 └─ api/
 ├─ auth/
 │ └─ [...nextauth].ts # NextAuth API route
 └─ fonts/
 └─ [id]/... # REST-like API for fonts (CRUD, WIP)

• Uses Next.js App Router for the UI and Pages API routes for authentication and font endpoints.
• Authentication is handled via NextAuth with a Discord provider, configured in src/config/next-auth.ts and exposed through src/pages/api/auth/[...nextauth].ts.
• Global authentication state is shared through AuthContext, so components like Navbar, UserMenu and SignInButton can react to the current user.
• Font data is accessed using the custom hook useFonts, which centralises fetching, caching and mutations for fonts.
• UI is built from reusable React components (FontCard, GlyphManager, PageContainer, SectionHeading, etc.) and styled with Tailwind CSS.

All screenshots are stored under docs/screenshots/.

Landing page (logged out)

Landing page (logged in)

All Fonts

New Font

Font Detail

Glyph Details

Add New Glyph

• Node.js 18+
• npm / pnpm / yarn
• A PostgreSQL (or compatible) database for Prisma

 git clone https://github.com/educatalan02/advancedkillfeed-platform.git
cd advanced-killfeed-font-manager
pnpm install 

Create a .env file with your configuration:

DATABASE_URL="postgresql://user:password@localhost:5432/akf-fonts"
NEXTAUTH_SECRET="your-random-secret"
NEXTAUTH_URL="http://localhost:3000"
DISCORD_CLIENT_ID="your-discord-client-id"
DISCORD_CLIENT_SECRET="your-discord-client-secret"

• User authentication with Discord OAuth
• Font management dashboard (list, create, edit fonts)
• Live preview of fonts with sample text and killfeed header
• Community Fonts section with search/filter
• Responsive UI with Tailwind CSS
• Glyph manager UI (WIP)
• Database schema and Prisma models for users, fonts, glyphs
• NextAuth.js setup with Discord provider
• Finish glyph editor UI
• Implement font import/export format
• Expose API endpoints for the AdvancedKillFeed plugin
• Admin tools and moderation for public/community fonts
• Improve documentation and add more examples

Built by Eduardo Catalán (@educatalan02)
Part of the RedstonePlugins ecosystem and the AdvancedKillFeed project.

This project is licensed under the MIT License.