OneYugiMon // The Ultimate Multi-TCG Database & Portfolio Manager
🌍 Live Demo: https://oneyugimon.netlify.app
(Note: The application is currently hosted on Netlify. If there is enough community demand, we will upgrade to a highly optimized custom.comdomain!)
OneYugiMon is a modern, high-performance, and fully responsive progressive web app (PWA) designed for Trading Card Game enthusiasts. Manage your entire physical collection, build decks, track live portfolio prices, and discover meta trends across different cards games in a unique Cyber-Brutalism UI.
Supports standard physical TCGs using real-time sync with global APIs:
- 🐉 Yu-Gi-Oh! (via YGOPRODeck API)
- ⚡ Pokémon TCG (via Pokémon TCG API)
- 🏴☠️ One Piece TCG (via One Piece API)
- 🧙♂️ Magic: The Gathering (via Scryfall API)
- Multi-Game Unified Collection: Seamlessly switch between different TCGs with entirely dynamic filters customized for each game (Mana, Types, Attributes, etc.).
- Live Pricing & Portfolio Tracking: Automatically evaluates your collection worth based on real-time market data.
- Deck Builder & Sharing: Create your own standard decks, test starting hands, and share read-only URLs of your builds with friends across the world.
- Card Conditions & Photo Capture: Note the exact condition of your rare pulls, including the ability to snap & upload condition photos directly to your cloud storage.
- Community Insights: Browse a trending meta-dashboard generated by players' publicly shared decks.
- PWA Ready: Install the app directly to your iOS or Android home screen for native-like performance.
- Offline / Cloud Sync: Full backend integration via Supabase ensures your collection never gets lost.
- Frontend: React 19, TypeScript, Tailwind CSS 4 (Custom Neo-Brutalism Design)
- State Management: Zustand, LocalStorage (Persist)
- Backend/DB: Supabase (PostgreSQL, Row Level Security, Auth, Storage)
- Tooling: Vite, ESLint, Lucide Icons
-
Clone the repository:
git clone https://github.com/hehljo/OneYugiMon.git cd OneYugiMon -
Install dependencies:
npm install
-
Configure Environment Variables: Create a
.env.localfile in the root directory and add your Supabase credentials:VITE_SUPABASE_URL=your_supabase_url VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
-
Run Development Server:
npm run dev
-
Deploy Supabase Schema: (Note: The required SQL schema for tables like
collection_items,decks, andwantsneeds to be applied manually to your Supabase project instance. Be sure to configure thecard_photosstorage bucket and appropriate RLS policies).
If you find this project useful and want to support its ongoing development, feel free to buy me a coffee!
Contact via GitHub: @hehljo
Disclaimer: OneYugiMon is an unofficial Fan-Project. It is not affiliated with, endorsed, sponsored, or specifically approved by Konami, The Pokémon Company, Nintendo, Wizards of the Coast, Hasbro, Bandai, or any of their affiliates. All card images, set names, and characters are trademarked and copyrighted materials of their respective owners.