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/appfor all pages and layouts. - Classic Pages API routes under
src/pages/apifor 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.tsand exposed throughsrc/pages/api/auth/[...nextauth].ts. - Global authentication state is shared through
AuthContext, so components likeNavbar,UserMenuandSignInButtoncan 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/.
- 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.