cs2investments

CS2 Investments - Item Tracker

A web application for tracking Counter Strike 2 items built with NextJS and Supabase.

Features

• List and track CS2 items with detailed information
• Store images in Supabase storage
• Add new items via a modal interface
• Display current market prices from the CSFloat API
• Wear condition visualization with color-coded labels
• Track your investments with purchase prices and quantities
• Calculate total investment value and average investment cost

Schema

CS Items

Each item includes:

• def_index: Item definition index (number)
• def_name: Item definition name (string)
• paint_index: Paint index, nullable (number)
• paint_name: Paint name, nullable (string)
• max_float: Maximum float value 0-1, nullable (number)
• min_float: Minimum float value 0-1, nullable (number)
• category: Item category 0-3 (number)
• market_hash_name: Steam market hash name, nullable (string)
• image: Item image stored in Supabase storage

Investments

Each investment tracks:

• item_id: Reference to a CS item (number)
• purchase_date: Date of purchase (date)
• purchase_price: Purchase price in USD (decimal)
• quantity: Number of items purchased (integer)

Getting Started

Prerequisites

• Node.js 18.x or later
• Bun (preferred) or npm
• Supabase account
• Supabase CLI (optional, for migrations)

Setup

1. Clone the repository
2. Install dependencies

   bun install
   

3. Create a .env.local file in the project root with your Supabase credentials:

   NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
   # Optional: CSFloat API key for fetching item prices
   NEXT_PUBLIC_CSFLOAT_API_KEY=your-csfloat-api-key
   

4. Set up Supabase:

Option 1: Using the Supabase Dashboard

• Create a new Supabase project
• Create a table called cs_items with the following schema:

     create table cs_items (
  id bigint generated by default as identity primary key,
  def_index integer not null,
  def_name text not null,
  paint_index integer,
  paint_name text,
  max_float numeric,
  min_float numeric,
  category integer not null default 0,
  market_hash_name text,
  image_url text,
  created_at timestamp with time zone default now()
     );
  

• Create a table called investments with the following schema:

     create table investments (
  id uuid primary key default gen_random_uuid(),
  item_id bigint not null references cs_items(id) on delete cascade,
  purchase_date date not null,
  purchase_price decimal(10, 2) not null,
  quantity integer not null default 1,
  created_at timestamp with time zone default now()
     );
  

• Create a storage bucket called cs-items-images
• Set the storage bucket’s public access to allow read and write access

Option 2: Using Migrations

• Install the Supabase CLI if you haven’t already: ```bash # Using npm npm install -g supabase

# Or using homebrew on macOS brew install supabase/tap/supabase

   
   - Link your local project to your Supabase project:
   ```bash
   supabase login
   supabase link --project-ref your-project-ref

• Apply the migrations and seed data:

     supabase db push
  

Or, if you want to include the seed data:

   supabase db push --include-seed

1. Run the development server:

   bun dev
   

2. Open http://localhost:3000 in your browser

Database Migrations

This project uses Supabase migrations to manage the database schema. The migrations are located in the supabase/migrations directory.

Migration Files

• 00000000000001_create_cs_items_table.sql: Creates the cs_items table and sets up RLS policies
• 00000000000002_create_storage_bucket.sql: Creates the storage bucket for CS2 item images and sets up storage policies
• 00000000000003_update_rls_policies.sql: Updates row-level security policies
• 00000000000004_create_investments_table.sql: Creates the investments table for tracking purchases

Seed Data

The project includes a seed file (supabase/seed.sql) with example CS2 items to get you started.

Applying Migrations

To apply the migrations to your Supabase project, run:

supabase db push

To apply the migrations and seed data:

supabase db push --include-seed

Local Development with Supabase

For local development with Supabase, you can use the Supabase CLI:

# Start a local Supabase instance
supabase start

# Apply migrations to the local instance
supabase db reset

# Stop the local instance when done
supabase stop

Built With

• Next.js - The React framework
• Supabase - The open source Firebase alternative
• Tailwind CSS - Utility-first CSS framework
• React Hook Form - Forms with easy validation
• Zod - TypeScript-first schema validation

CSFloat API Integration

This application integrates with the CSFloat API to fetch current market prices for CS2 items. The integration:

1. Fetches listing data based on item parameters (def_index, paint_index, float values)
2. Calculates average prices from multiple listings
3. Displays pricing information in the item table

To use the CSFloat API features:

1. Sign up at CSFloat and get an API key from your profile’s developer tab
2. Add your API key to the .env.local file:

   NEXT_PUBLIC_CSFLOAT_API_KEY=your-csfloat-api-key
   

Note: Without an API key, price data will not be available or may be rate-limited.