Files

6.8 KiB

Library App Planning Document 📚🎮🎵

Overview

A personal library tracking website where Naomi can catalogue and display her games, music, and books across different status categories.

Core Features

1. Multi-Media Library Support

  • Games: Currently Playing, Completed, Backlog
  • Music: Currently Listening, Completed Albums, Want to Listen
  • Books: Currently Reading, Finished, To Read

2. Authentication & Permissions

  • Public viewing for everyone (read-only)
  • Admin authentication for Naomi only (full CRUD operations)
  • OAuth integration (GitHub? Discord? Both?)

3. User Interface

  • Clean, responsive design
  • Easy navigation between media types
  • Search and filter functionality
  • Statistics/summary view

Technical Stack Considerations

Frontend

  • Framework: Angular
    • Excellent TypeScript support (built with TS in mind!)
    • Powerful CLI and tooling
    • Great for building robust SPAs
    • Built-in RxJS for reactive programming
    • Standalone components in newer versions

Backend

  • Framework: Fastify
    • Extremely fast Node.js framework
    • First-class TypeScript support
    • Built-in schema validation
    • Great plugin ecosystem
    • Excellent error handling

Database

  • Database: MongoDB (Atlas - existing instance)
    • Perfect for flexible schema (games, books, music have different fields)
    • Easy to add new fields without migrations
    • Great performance for document queries
  • ORM: Prisma
    • Excellent TypeScript support
    • Type-safe database queries
    • Great MongoDB support
    • Auto-generated types from schema

Authentication

  • OAuth Provider: Discord only
    • Single OAuth provider for simplicity
    • You already have Discord OAuth experience with Hikari bot
    • JWT for session management

Project Structure

  • Monorepo Tool: Nx
    • Excellent TypeScript support
    • Great caching and build optimization
    • Powerful generators
    • Shared dependencies
    • Integrated testing and linting
  • Linting: @nhcarrigan/eslint-config
    • Your custom ESLint configuration
    • ESLint 9 flat config
    • No Prettier needed!

Hosting

  • Options:
    • Self-hosted on your infrastructure (full control!)
    • Netlify (Good alternative, better ethics)
    • Railway (Developer-friendly, good values)
    • Fly.io (Great for full-stack apps)
    • DigitalOcean App Platform

Data Models (Initial Thoughts)

MongoDB Collections Structure

We'll have three main collections: games, books, and music, each with their specific schema.

Game

interface Game {
  id: string;
  title: string;
  platform?: string;
  status: 'playing' | 'completed' | 'backlog';
  dateAdded: Date;
  dateCompleted?: Date;
  rating?: number;
  notes?: string;
  coverImage?: string;
}

Book

interface Book {
  id: string;
  title: string;
  author: string;
  isbn?: string;
  status: 'reading' | 'finished' | 'toRead';
  dateAdded: Date;
  dateFinished?: Date;
  rating?: number;
  notes?: string;
  coverImage?: string;
}

Music

interface Music {
  id: string;
  title: string;
  artist: string;
  type: 'album' | 'single' | 'ep';
  status: 'listening' | 'completed' | 'wantToListen';
  dateAdded: Date;
  dateCompleted?: Date;
  rating?: number;
  notes?: string;
  coverArt?: string;
}

Feature Roadmap

Phase 1: MVP

  • Basic CRUD for all three media types
  • Simple authentication (single admin user)
  • Public read-only view
  • Basic responsive UI

Phase 2: Enhancements

  • Search and filtering
  • Statistics dashboard
  • Cover image fetching from APIs
  • Import/export functionality

Phase 3: Advanced Features

  • Recommendations system
  • Progress tracking (% complete for books/games)
  • Tags/categories
  • Public API for integrations

Questions to Consider

  1. Design Aesthetic: What vibe are you going for? Minimalist? Colourful? Dark theme?

  2. API Integrations: Should we fetch metadata from external APIs?

    • Games: IGDB, Steam API
    • Books: Open Library, Google Books
    • Music: Spotify, Last.fm, MusicBrainz
  3. URL Structure: How should we organize routes?

    • /games, /books, /music?
    • /library/games, /library/books?
    • Something else?
  4. Data Entry: Manual entry only, or barcode scanning/search integration?

  5. Privacy: Any items you'd want to keep private even from public view?

Current Sprint: Edit, Filters & Comments

Feature 1: Edit Existing Library Entries (Admin Only)

Backend:

  • Add PUT /api/games/:id, /api/books/:id, /api/music/:id endpoints
  • Reuse existing admin authentication middleware
  • Validate input against existing schemas

Frontend:

  • Add edit button to entry cards (visible for admins)
  • Reuse existing "Add" modal/form components with pre-filled data
  • Update state after successful edit

Feature 2: Fix Filter Tab State Updates

Investigation needed:

  • Check how tab counts are calculated (likely not re-fetching after add)
  • Ensure Angular state updates reactively when items are added/modified
  • May need to refresh counts after mutations or use observables properly

Feature 3: Comments System

Database Schema:

model Comment {
  id        String   @id @default(auto()) @map("_id") @db.ObjectId
  content   String   // Markdown content - sanitised on render
  userId    String   @db.ObjectId
  user      User     @relation(fields: [userId], references: [id])
  // Polymorphic relation - one of these will be set
  gameId    String?  @db.ObjectId
  game      Game?    @relation(fields: [gameId], references: [id])
  bookId    String?  @db.ObjectId
  book      Book?    @relation(fields: [bookId], references: [id])
  musicId   String?  @db.ObjectId
  music     Music?   @relation(fields: [musicId], references: [id])
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

Backend:

  • POST /api/games/:id/comments (authenticated users)
  • GET /api/games/:id/comments (public)
  • DELETE /api/games/:id/comments/:commentId (admin only)
  • Same for books and music
  • Use a markdown sanitisation library (e.g., sanitize-html or DOMPurify on render)

Frontend:

  • Expandable comments section on each entry card
  • Markdown rendering with sanitisation (use marked + DOMPurify)
  • Add comment form for authenticated users
  • Delete button for admins
  • Show commenter's Discord username/avatar

Implementation Order

  1. Fix filter tab bug (quick win)
  2. Add edit functionality (builds on existing patterns)
  3. Add comments system (new feature, more complex)

Next Steps

  1. Choose technical stack
  2. Set up project structure
  3. Design database schema
  4. Create authentication flow
  5. Build first media type (games?) as proof of concept
  6. Iterate and add remaining media types

✨ This planning document was created with love by Hikari and Naomi! 🌸