One Ring Characters

A minimalist RPG character gallery for The One Ring, built with BOLT and Supabase. Mobile-ready, fully editable, and designed for GMs, players, and storytelling fans.

Comment 1

🌟 Inspiration

I play The One Ring RPG with friends.
During our sessions, we kept forgetting who was who — NPCs, party members, their stories…
We needed a simple gallery to help us stay immersed. So I thought:
"Let’s build something fast with Bolt!"
What started as a fun side tool became a larger experiment in rapid solo dev using Bolt, Supabase, and AI tooling.

🧰 What it does

  • 🖼️ Public Gallery with character portraits, names, and quick bios
  • 🔍 Search and responsive masonry layout
  • 🔐 Admin Panel with secure login and role restriction
  • ✏️ Edit / Add / Delete characters via modals
  • 🖼️ Image Uploads with automatic compression (JPEG ≤ 1 MB)
  • 📡 Realtime updates via Supabase subscriptions
  • 🚀 Cache Analyzer tool to validate CDN headers and cache strategies

🛠️ How I built it

As a solo dev, I built everything in under a week:

  • Frontend: Built entirely with BOLT + Tailwind CSS
  • Backend: Supabase (PostgreSQL DB, Storage for images, Auth for login, Realtime API)
  • Hooks & Logic:
    • useAuth: manages login, logout, role checks
    • ImagesProvider: context for characters, Supabase sync, uploads, deletes
    • useEnums: fetch ENUM values (race, culture, etc.)
    • imageCompressionService: compresses images with browser-image-compression
    • cache-analyzer.ts: tests CDN headers + busting logic
  • Routing: react-router-dom (/ public, /admin protected)
  • AI Assistants:
    • Code: Copilot, ChatGPT 4.1, Claude 3.5, OpenAI Codex
    • Images: GPT-4o (character art)
    • Journals/Notes: NotebookLM, ChatGPT Custom GPTs

All code is stored in GitHub and deployed through Netlify. The stack is lightweight, fast, and easy to scale.

🧩 Challenges I ran into

  • Linking Supabase Auth to Bolt routes securely
  • Compressing and naming images cleanly for cache performance
  • Making ENUMs dynamic from the DB without needing to edit SQL manually
  • Keeping the entire admin panel usable on small mobile screens

🏆 Accomplishments I'm proud of

  • Fully working CRUD gallery in <48h, solo
  • Real-time updates across devices
  • Modular structure that will scale to campaign management
  • Cache tools I now reuse on other Supabase projects
  • Appreciated by our actual RPG table 😄

🎓 What I learned

  • Bolt + Supabase = rapid prototyping dream
  • Supabase Realtime makes syncing trivial once subscriptions are well-structured
  • Edge Functions are great for email workflows
  • AI can drastically reduce bug time, but still needs strong logic behind the code
  • ENUM-based form UX is elegant but needs good dev tooling

🔮 What's next for One Ring Characters

  • Filter by culture, status, race
  • Sharable public profile pages for each character
  • Role-based admin (GM vs viewer)
  • Integration into my next project: JDR-Manager

Built with a love for tabletop games, solo dev, and the power of AI tooling ⚔️🛠️🤖

➕ JDR-Manager (expanding the concept)

After completing the One Ring Characters gallery, I decided to go further:
What if I could manage entire RPG campaigns — not just characters?

So I began work on a second app: JDR-Manager.
It reuses the same architecture (Bolt + Supabase) and pushes it further into a complete platform for Game Masters.

📽️ This second project is briefly showcased in the second part of the demo video.

🧙 What JDR-Manager already does:

  • Campaign Management
    Create, edit, and publish campaigns with cover images and descriptions.

  • Session Tracking
    Log play sessions with date, title, notes, and player attendance.

  • Journal System
    Write and edit entries with rich formatting (using Tiptap editor). Journals can include inline images and be linked to campaigns.

  • Character System
    Manage characters (CRUD), upload avatars, and assign them to campaigns. Includes an admin table and modal editor.

  • Email Notifications
    Store player email preferences and send session reminders via Supabase Edge Functions + Mailjet.

  • Public & Admin Modes
    Public visitors can browse campaigns and characters; admins can edit everything via a protected interface.

⚙️ Technical Overview

  • Built with React + Bolt.dev
  • Supabase: PostgreSQL (with custom ENUMs), Auth, Storage, Realtime, and Edge Functions
  • Modular hook system: useAuth, useCampaigns, useJournals, useCharacters, useImageCleanup, useEmailNotifications
  • Optimized image handling and CDN cache-busting
  • Public data caching for faster UX (with localStorage and memory Map)

This project is still growing, but the vision is clear:
A free, modern, solo-built tool to help GMs plan, share, and run campaigns smoothly — with real-time updates, player notifications, and immersive visuals.

Built With

  • bolt.dev
  • chatgpt-4.1
  • claude
  • claude-3.7
  • database
  • github
  • gpt-4o-(image-gen)
  • openai-codex
  • postgresql
  • react
  • realtime)
  • storage
  • sunoai-(music)
  • supabase
  • supabase-(auth
  • supabase-edge-functions
  • tailwind-css
  • typescript
  • vscode
Share this project:

Updates