List App

A web application for managing and organizing lists of movies, series, and games. The app allows users to add, view, and delete media items, with support for sorting and filtering.

Features

• Media Management: Add, view, and delete movies, series, and games
• Sorting Options: Sort by title, year, or date added
• Image Caching: Automatically downloads and caches poster images
• Authentication: Password-protected actions for adding/deleting media
• Responsive Design: Works on mobile and desktop devices

Technologies

• Backend: TypeScript, Express, Bun runtime
• Frontend: TypeScript, Bootstrap 5
• Database: SQLite
• APIs: OMDB API (movies/series), Twitch IGDB API (games)

Project Structure

list_app/
├── backend/              # Backend server code
│   ├── controllers/      # Business logic
│   ├── models/           # Database models
│   ├── routes/           # API routes
│   ├── miscellaneous/    # Utilities and middleware
│   └── app.ts            # Main server entry
│
├── frontend/             # Frontend code
│   ├── list/             # Main list components
│   ├── utils/            # Type definitions
│   └── elementcreate.tsx # Custom element creation
│
├── public/               # Static files
│   ├── index.html        # Main HTML file
│   ├── logo.ico          # Favicon
│   └── no_poster.jpg     # Fallback poster image
│
├── package.json          # Project dependencies
└── README.md             # This file

Setup

1. Install Bun runtime: https://bun.sh/
2. Install dependencies:

   bun install
   

3. Set up your API keys in the database:
   • OMDB API key for movies/series
   • Twitch client ID and secret for games
4. Start the server:

   bun run dev
   

API Endpoints

• GET /api/media/:mediaType - List all media of a type (movies, series, games)
• POST /api/media/:mediaType - Add new media (requires password)
• DELETE /api/media/:mediaType - Delete media (requires password)

Configuration

The application uses SQLite for data storage. The database file mydb.sqlite will be created automatically on first run with the following tables:

• movies - Stores movie information
• series - Stores series information
• games - Stores game information
• userData - Stores configuration including API keys and password

Usage

1. Navigate to http://localhost:4080 in your browser
2. Use the navigation buttons to switch between movies, series, and games
3. Use the "Sort" dropdown to change sorting method
4. Enter your password and media ID in the form to add new items
5. Click "Edit" then use delete buttons to remove items

Building

To build the frontend:

bun run build

License

This project is private and not open source.