Riftbound Cards API & Frontend

A full-stack application for managing Riftbound trading cards with a FastAPI backend and React TypeScript frontend. The application allows users to create, view, and delete cards through an intuitive web interface.

Made By

• GARNIER Quentin
• CANDILLE Thomas

🚀 Project Overview

This project consists of:

• Backend: FastAPI application with Supabase database integration and in-memory fallback
• Frontend: React TypeScript application with card management features
• Deployment: Backend deployed on Render, frontend can be deployed anywhere

Features

• ✨ Create new cards with custom properties
• 📋 View all cards in a responsive grid layout
• 🗑️ Delete cards with confirmation
• 🎨 Card rarity visualization (Common, Uncommon, Rare, Epic, Legendary)
• 🔄 Real-time updates after card operations
• 🌐 CORS-enabled API for cross-origin requests

🛠️ Tech Stack

Backend

• FastAPI - Modern Python web framework
• Supabase - Database and real-time features
• Pytest - Testing framework

Frontend

• React 19 - UI library
• TypeScript - Type safety
• Fetch API - HTTP client

📦 Setup Instructions

Prerequisites

• Python 3.11+
• Node.js 16+
• npm or yarn

Backend Setup

1. Navigate to backend directory

   cd backend

2. Create and activate virtual environment

   python -m venv venv
   source venv/bin/activate  # On Windows: venv\Scripts\activate

3. Install dependencies

   pip install -r requirements.txt

4. Environment configuration

   cp .env.example .env

   Edit .env file with your Supabase credentials (optional - app works with in-memory DB):

   USE_SUPABASE=true
   SUPABASE_URL=your_supabase_url
   SUPABASE_KEY=your_supabase_key
   

5. Run development server

   uvicorn app.main:app --reload --host 0.0.0.0 --port 8000

6. API Documentation

   • Swagger UI: http://localhost:8000/docs
   • Health check: http://localhost:8000/health

Frontend Setup

1. Navigate to frontend directory

   cd frontend

2. Install dependencies

   npm install

3. Configure API endpoint (optional)

   The frontend is pre-configured to use the deployed backend at https://m1-iwid-python.onrender.com/.

   To use local backend, edit src/api/config.ts:

   export const API_BASE_URL = "http://localhost:8000";

4. Start development server

   npm start

5. Access application

   • Frontend: http://localhost:3000
   • The app will automatically connect to the backend API

Production Build

Frontend production build:

cd frontend
npm run build

The build artifacts will be in the build/ directory, ready for deployment.

🌐 Live Backend API

The backend is deployed and accessible at: https://m1-iwid-python.onrender.com

API Endpoints

• GET / - API information
• GET /health - Health check
• GET /cards - Retrieve all cards
• POST /cards - Create a new card
• DELETE /cards/{card_id} - Delete a card
• GET /docs - Interactive API documentation

🧪 Testing

Backend tests:

cd backend
pytest

Frontend tests:

cd frontend
npm test

📁 Project Structure

├── README.md
├── start.sh                 # Production startup script
├── backend/
│   ├── app/
│   │   ├── main.py         # FastAPI application
│   │   ├── api/routes/     # API endpoints
│   │   ├── db/             # Database clients
│   │   └── utils/          # Utilities
│   ├── tests/              # Backend tests
│   ├── requirements.txt    # Python dependencies
│   └── pyproject.toml      # Python project configuration
└── frontend/
    ├── src/
    │   ├── components/     # React components
    │   ├── hooks/          # Custom hooks
    │   ├── api/            # API client
    │   └── utils/          # Utilities
    ├── public/             # Static assets
    └── package.json        # Node.js dependencies

🔧 Development

Code Quality

• Backend: Uses Ruff for linting and formatting
• Frontend: Uses Prettier for code formatting
• Testing: Pytest for backend, Jest for frontend

Environment Variables

• USE_SUPABASE: Enable/disable Supabase (default: false)
• SUPABASE_URL: Your Supabase project URL
• SUPABASE_KEY: Your Supabase anon key
• PORT: Server port (for deployment)