TCG Card Builder

Warning

This project is deprecated and no longer maintained. It has been replaced by Lorcana Card Maker — use that instead.

The repository is archived and read-only. No further updates, bug fixes, or dependency upgrades are planned, and issues and pull requests are closed. The code remains available for reference — feel free to fork it.

TCG Card Builder is a React application for creating custom trading card game cards for Lorcana and Yu-Gi-Oh. Pick a template, customize attributes like card type, name, abilities, power levels and rarity, upload your own artwork, then export the finished card as an image or PDF.

Live Demo

https://tcgbuilder.netlify.app/

The demo may go offline at any time now that the project is no longer maintained. Use lorcanacardmaker.com instead.

Features

• Template Options: Character, Action, Magic, Trap and Fusion card types.
• Customization: Custom card names and abilities, adjustable power levels and rarity, and custom uploaded artwork.
• Export Options: Save cards as images or generate PDFs for sharing and printing.

Supported Card Games

• Lorcana
• Yu-Gi-Oh (legacy, unmaintained)

Pokémon and Magic: The Gathering support were planned but never implemented, and no longer will be.

Running Locally

The project still builds and runs, but dependencies are pinned to versions from 2024 and are not receiving security updates.

1. Clone the repository: git clone https://github.com/johnuberbacher/react-card-builder.git
2. Navigate to the project directory: cd react-card-builder
3. Install dependencies: npm install
4. Start the development server: npm start

Docker Setup

With Docker and Docker Compose installed:

1. git clone https://github.com/johnuberbacher/react-card-builder.git
2. cd react-card-builder
3. docker-compose up --build

This builds the app, installs dependencies, and serves it with Nginx on port 3000. Open http://localhost:3000.

Build

Run npm run build for a production build, or docker-compose up --build to build and serve it via Docker on http://localhost:3000.

Dependencies

The project uses the following key libraries:

• React - Core framework for building the application.
• @react-three/fiber and @react-three/drei - For 3D rendering and custom effects.
• html-to-image and html2canvas - For exporting cards as images.
• jspdf - For exporting cards as PDFs.
• tailwindcss - For styling components.

Scripts

• npm start: Starts the development server.
• npm run build: Builds the app for production.
• npm test: Runs the test suite.

License

This project is licensed under the MIT License. It is provided as-is, with no support or maintenance.