uloggd

A platform to catalog, rate and share your game collection.

About

uloggd is a platform where you can keep a virtual list of games in your collection, rate and review the ones you've played, and share everything with your friends.
Think of it as a social gaming diary, inspired by platforms like Letterboxd and Backloggd.

Features

• Personal catalog - Organize your games in custom lists with statuses (playing, completed, dropped, etc.)
• Ratings and reviews - Rate games and write reviews with Markdown support
• Customizable profiles - Avatar, banner, bio, avatar decorations, and badges
• Social system - Follow other users and track their activity
• Discord authentication - Integrated login with your Discord account
• Game data via IGDB - Complete game information provided by the IGDB/Twitch API

Stack

• React 19
• Vite 7
• Tailwind CSS 4
• Supabase (Auth + Database)
• IGDB API
• Discord OAuth
• Vercel Serverless Functions

Development

Prerequisites

• Node.js 18+
• Supabase account
• Application registered on Twitch Developer Console (IGDB API access)
• Steam Web API Key registered at https://steamcommunity.com/dev/apikey
• OAuth application on Discord Developer Portal
• imgchest API key
• Configured domain for OAuth (e.g., http://localhost:3000 for dev or https://yoursite.com for production)

Setup

1. Clone the repository:

git clone https://github.com/uesleibros/uloggd.git
cd uloggd

2. Install dependencies:

npm install

3. Copy the example file and fill in your credentials:

cp .env.example .env

Required Variables

Variable	Description	Where to get
APP_URL	Base application URL (used for Steam/Twitch OAuth and redirects). E.g., http://localhost:3000 (dev) or https://yoursite.com (production)	Defined by you
STEAM_WEB_API_KEY	Steam API key to access public data	https://steamcommunity.com/dev/apikey
TWITCH_CLIENT_ID	Twitch application Client ID	https://dev.twitch.tv/console/apps
TWITCH_CLIENT_SECRET	Twitch application Client Secret	https://dev.twitch.tv/console/apps
TWITCH_REDIRECT_URI	Twitch OAuth callback URL (e.g., https://yoursite.com/api/twitch/callback)	Defined by you and registered in Twitch Dev Console
VITE_SUPABASE_URL	Supabase project URL (frontend)	Supabase Dashboard → Settings → API
VITE_SUPABASE_ANON_KEY	Supabase public anon key (frontend)	Supabase Dashboard → Settings → API
SUPABASE_URL	Supabase project URL (backend)	Supabase Dashboard → Settings → API
SUPABASE_SERVICE_ROLE_KEY	Supabase service role key (backend)	Supabase Dashboard → Settings → API
IMGCHEST_API_KEY	API key for image uploads	https://imgchest.com/docs/api
DISCORD_WEBHOOK_URL	Webhook URL for team notifications	Discord → Channel → Edit Channel → Integrations → Webhooks
ISTHEREANYDEAL_API_KEY	API key for game price history	https://isthereanydeal.com/dev/app/

Local Development

Warning

The .env.local file should not be committed.

Production (Vercel)

Configure the same variables in the Vercel panel:

Project → Settings → Environment Variables

Set:

APP_URL=https://yoursite.com

Select the desired environments:

• ✅ Production
• ✅ Preview (optional)
• ✅ Development (optional)

Important Notes

• APP_URL must always match the domain registered with OAuth providers.
• Never expose SUPABASE_SERVICE_ROLE_KEY on the frontend.
• Variables starting with VITE_ are available on the frontend.
• Avoid using dynamic preview URLs for OAuth (Steam/Twitch).
• If an OAuth integration fails, check:
  1. If the domain is correct.
  2. If the callback is registered with the provider.
  3. If APP_URL is configured correctly.

Also see the .env.example file to apply correctly in your .env.local/.env

4. Start the development server:

npm run dev

For development with Vercel serverless functions:

npm run dev:vercel

Database

The project uses Supabase (PostgreSQL). To set up the database:

1. Create a project on Supabase Dashboard

2. Import the database schema:

   • Access SQL Editor in the Supabase dashboard
   • Copy all contents from database/schema.sql
   • Paste into the editor and click RUN

3. Configure Discord authentication:

   • In Supabase, go to Authentication > Providers
   • Enable Discord and fill in Client ID and Secret

Available Scripts

Command	Description
npm run dev	Start development server with Vite
npm run dev:vercel	Start development environment with Vercel CLI
npm run build	Generate production build
npm run preview	Preview production build locally
npm run lint	Run ESLint on the project

Contributing

Pull requests are welcome. For major changes, please open an issue first.

License

This project is licensed under the Apache 2.0 License. See the LICENSE file for more details.