A full-featured community trading platform for Pokémon TCG, sports cards, and rare collectibles.
CollectaHub is a community platform purpose-built for serious collectors and card traders. It provides a dedicated space to connect, negotiate privately, and manage trades across Pokémon TCG, sports cards, Yu-Gi-Oh!, and vintage collectibles.
This project demonstrates production-level UI/UX design, a scalable component architecture, and domain expertise in building niche community platforms.
- Hero section with live trader count and animated holographic card previews
- Platform statistics (48K+ members, 120K+ trades, $2.4M volume)
- Category browsing (Pokémon TCG, Sports, Yu-Gi-Oh!, Vintage)
- Real-time trade activity feed
- Filterable thread list (WTB / WTS / H-W / Discussion tags)
- Upvote system with reply and view counts
- Category sidebar with thread counts
- Full-text search across all discussions
- Sort by Latest / Top Rated / Most Replies / Unanswered
- Card listing grid with grade badges and pricing
- Multi-filter system: category, trade type, grade, price range
- WTB / WTS / H-W listing types with color-coded labels
- Seller reputation display (score + verified badge)
- One-click message initiation from any listing
- Conversation list with unread indicators
- In-line trade proposal cards inside messages
- Real negotiation flow (counter offers, confirmations)
- Seller reputation visible in chat header
- Collection highlights with estimated values
- Trade history log with status tracking
- Reputation badges (Verified Trader, Top 1%, star rating)
- Trade volume and activity stats
- Recent forum activity feed
| Layer | Technology |
|---|---|
| Markup | Semantic HTML5 |
| Styling | Custom CSS (variables, grid, flexbox, animations) |
| Typography | Space Grotesk (display) + Inter (body) |
| Design system | Fully custom dark theme with CSS custom properties |
| Fonts | Google Fonts (self-hostable) |
| Dependencies | Zero — no frameworks, no build tools |
Dark-first aesthetic — The target audience (card collectors/traders) frequently browses late at night and values a premium feel that mirrors high-end trading platforms.
Holographic card effect — CSS-only hover animations on the hero cards mirror the physicality of real holographic Pokémon cards. One deliberate signature interaction.
Color language — Yellow (#FFD700) for buying intent and value; Green (#22D3A0) for sales and confirmations; Purple (#7C3AED) for trades/swaps. Mirrors traffic-light logic traders already understand.
Zero dependencies — Keeps the project portable, fast, and free of supply-chain risk. Demonstrates that complex UI doesn't require heavy tooling.
collectahub/
├── .github/
│ └── workflows/
│ └── ci.yml # GitHub Actions CI pipeline
├── css/
│ └── style.css # Full design system + all page styles
├── screenshots/
│ ├── index.png # Landing page screenshot
│ ├── forum.png # Forum screenshot
│ ├── trades.png # Trade marketplace screenshot
│ ├── messages.png # Private messaging screenshot
│ └── profile.png # User profile screenshot
├── index.html # Landing page
├── forum.html # Discussion board
├── trades.html # Trade marketplace
├── messages.html # Private messaging
├── profile.html # User profile
├── LICENSE
└── README.md
| Page | Description |
|---|---|
index.html |
Marketing landing page with live feed |
forum.html |
Threaded discussion boards with sidebar navigation |
trades.html |
Card listing marketplace with filters |
messages.html |
Private messaging with trade proposal UI |
profile.html |
Collector profile with collection and trade history |
Landing page — hero section with holographic card previews and live trade feed
Discussion forum — filterable threads with WTB / WTS / H-W tags
Trade marketplace — card listings with grade badges and multi-filter system
Private messaging — inline trade proposals and negotiation flow
User profile — collection highlights, trade history and reputation badges
Every push to main automatically runs:
- ✅ HTML validation across all 5 pages
- ✅ CSS validation on the design system
- ✅ Required file structure check
- ✅ Internal broken link detection
This codebase is architected to support a backend integration:
- Auth — JWT-based auth with profile picture upload
- Database — PostgreSQL schema for users, threads, listings, messages, trades
- Real-time — WebSocket integration for live messaging and trade feed
- API — REST or GraphQL endpoints for all CRUD operations
- Search — Elasticsearch for full-text card/thread search
- Notifications — Push notifications for new messages and trade offers
- Price data — Integration with TCGPlayer or eBay APIs for market pricing
No build step required. Open any HTML file directly in a browser, or serve with any static server:
# Python
python -m http.server 8000
# Node.js
npx serve .
# Then open http://localhost:8000Prince Boyard MBOUNGOU NGOMA — @MrBoyard7
Built to demonstrate full-stack product thinking: designing and shipping a complete, multi-page community platform from scratch, with production-grade UX and zero external dependencies.
MIT © 2026 Prince Boyard MBOUNGOU NGOMA — see LICENSE for details.
CollectaHub — Where collectors trade, connect, and win.