Vizball
Bilingual federation website for Vizball, a Cameroonian team sport: news, forum, shop, club map and admin dashboard, on a custom Express + Bun + SQLite backend.
About This Project
Vizball Play Pro is the official bilingual (French/English) website for Vizball, a team sport created in Cameroon. It brings the federation's news, community forum, equipment shop, club locator map, event calendar, governance documents and video tutorials into one site, with an admin dashboard to run it all. I took over an app that had been prototyped on Base44, a no-code backend platform. Once its SDK was removed, data persistence, login and file uploads all stopped working. I replaced that layer with a custom Express + Bun + SQLite backend, then shipped the site to production through roughly six weeks of client feedback.
At a Glance
15
REST modules
~535
FR/EN UI strings
13
releases in 6 weeks
~16.5k
lines of JS/TS
- Role
- Full-stack developer, working directly with the client: backend rebuild, frontend features, translation, SEO and production deployment.
- Timeline
- July – August 2026 · 6 weeks
- Status
- Live in production
Technologies Used
Frontend
React 18, Vite 6, React Router 6, Tailwind CSS, shadcn/ui
15 pages, bilingual UI with ~535 translation keys, custom typography
Backend
Express 4 on Bun, TypeScript
15 REST route modules, one per resource
Data
SQLite via bun:sqlite
Schema, migrations and automatic seeding on first run
Auth & security
JWT, bcrypt, role-based access
Admin and forum login, env-based secrets, per-IP rate limiting
AI
Groq API (Llama 3.3 70B)
On-demand translation of articles, forum posts and events
Hosting
Ubuntu VPS, Nginx, systemd, HTTPS
Reverse proxy, process supervision, backups, deployment guide
Key Features
- •News and articles managed from the admin dashboard
- •Community forum with user registration and login
- •Equipment shop with product pages, ratings and a browser-side cart
- •Interactive club locator map built on Leaflet
- •Events calendar for tournaments and federation events
- •Video tutorials by category and skill level, plus a field diagram
- •One-click AI translation of articles, forum posts and events (FR ⇄ EN)
- •Admin dashboard for content, products, clubs, events, gallery, messages and forum moderation
- •SEO tooling: per-page meta tags, generated sitemap and a pre-launch gate
Challenges & Solutions
01Replacing a removed no-code backend
With the Base44 SDK gone, nothing saved, nobody could log in and uploads failed. I wrote a new Express + Bun backend with one route file per resource, and a fetch-based API client that mirrors those routes one to one, so the frontend needed few changes.
02Keeping hosting simple and cheap
The client runs one small VPS. SQLite through Bun's built-in driver means there is no database server to run; the database creates and seeds itself on first start.
03Translating user content without blowing the budget
Interface text uses a static dictionary, but articles and forum posts are written by people. A translate button backed by a Groq-hosted Llama model accepts only known content types and languages, caps input length, and limits each IP to 20 requests per 10 minutes.
04Securing a public deployment
The API listens only on localhost; Nginx handles HTTPS and proxies /api and /uploads. Secrets live in environment variables, passwords are hashed with bcrypt, and only ports 22, 80 and 443 are open. I documented it all in a step-by-step deployment and backup guide.
05Iterating on client feedback
Several release rounds were driven by client review: spacing, type sizes, heading weights, navbar overflow at large breakpoints and chat widget theming. I also moved the site to a custom typeface and made the chat widget follow the visitor's light or dark setting.
Outcome & Lessons
The site went from a broken prototype to a production-ready, self-hosted app in about six weeks. It runs on one VPS with no paid backend services beyond optional AI translation.
- •Owning the backend pays off: moving off a no-code platform removed a single point of failure and gave the client full control of their data.
- •Simple infrastructure is a feature: SQLite, systemd and Nginx kept hosting costs and maintenance low for a small federation.
- •Guardrails come first with AI features: allow-lists, length caps and rate limits kept translation safe to expose publicly.
- •Short feedback loops build trust: frequent, small releases let the client see and steer progress.
Project Gallery
