Randall Stillwell e75a4a6649 Major redesign: Enhanced card display with particle effects, improved filters, and search functionality

- Redesigned card display with 2.5:3.5 aspect ratio and image-only view
- Added infinite scroll to replace pagination
- Implemented authentic card back placeholders for MTG, Pokemon, and Lorcana
- Added rarity-based particle effects with tiered intensity (mythic/enchanted/rare/uncommon)
- Enhanced hover details panel with structured card information
- Fixed search functionality with debouncing and Enter key support
- Improved filter system with working TCG, rarity, set, and price filters
- Added favorite system for cards in both hover and detail views
- Updated card detail page with comprehensive metadata and actions
- Fixed API filtering with proper Vercel Postgres implementation
- Added particle animations and rarity glow effects
- Improved overall UX with better visual hierarchy and interactions

2025-07-23 21:26:54 -05:00

3 KiB

Raw Blame History

TCG Vault

A modern trading card game collection manager built with Next.js and Neon Database.

🚀 Features

Card Management: Track your MTG, Pokémon, and Lorcana cards
Collection Organization: Create and manage card collections
Deck Building: Build and share decks
Authentication: Secure user accounts with JWT
Admin Panel: Manage cards and users
Real-time Pricing: Track card values

🛠️ Tech Stack

Frontend: Next.js 15, React 18, TypeScript
Backend: Next.js API Routes
Database: Neon PostgreSQL (serverless)
Authentication: JWT with bcrypt
Styling: Tailwind CSS
Deployment: Vercel

📦 Installation

Clone the repository

git clone <repository-url>
cd tcg-vault

Install dependencies
```
npm install
```

Set up environment variables

cp .env.example .env.local

Update .env.local with your Neon database URL:

POSTGRES_URL="postgresql://your-username:your-password@your-host/your-database"
JWT_SECRET="your-super-secret-jwt-key"

Set up the database
```
npm run setup-db
```
Start development server
```
npm run dev
```

🗄️ Database Schema

The application uses the following tables:

users - User accounts and authentication
cards - Card information and metadata
user_cards - User's card collections
collections - Named card collections
collection_cards - Cards in collections
decks - Deck definitions
deck_cards - Cards in decks

🔧 API Endpoints

Authentication

POST /api/auth/register - User registration
POST /api/auth/login - User login

Admin

GET /api/admin - Admin panel data

Health Check

GET /api/health - Application health
GET /api/test-db - Database connection test

🚀 Deployment

This app is configured for deployment on Vercel:

Connect your repository to Vercel
Set environment variables in Vercel dashboard
Deploy automatically on push to main branch

📁 Project Structure

tcg-vault/
├── pages/                 # Next.js pages and API routes
│   ├── api/              # API endpoints
│   │   ├── auth/         # Authentication routes
│   │   └── admin/        # Admin routes
│   ├── _app.js           # App wrapper
│   └── index.js          # Home page
├── lib/                  # Utility libraries
│   └── database.js       # Database adapter
├── scripts/              # Database setup scripts
├── public/               # Static assets
└── .env.local           # Environment variables

🔐 Default Admin Account

After running the database setup:

Email: admin@tcgvault.com
Password: admin123

🤝 Contributing

Fork the repository
Create a feature branch
Make your changes
Submit a pull request

📄 License

MIT License - see LICENSE file for details

3 KiB Raw Blame History