Album Collection Manager

About

This is a production-grade, cloud-hosted web application for managing a music album collection. The application supports full CRUD operations, persistent SQL storage, and a responsive UI designed for both desktop and mobile use. This project represents a significant upgrade from previous iterations, moving from local and JSON storage to a robust PostgreSQL backend.

Links

Live Site: https://christianjohnston.dev
Backend API (Render): https://album-collection-manager.onrender.com/api/albums

Usage

• View & Navigate: Browse your collection with server-side paging. The table is fully responsive; on mobile devices, simply swipe left/right to view all columns.
• Manage Albums: Use the integrated form to add new entries or edit existing ones.
• Safety: Deletions require a browser-level confirmation to prevent accidental data loss.
• Persist: Your settings, specifically Page Size, are saved via cookies and will remain consistent even after closing your browser.

Architecture & Tech Stack

• Frontend: Vanilla JavaScript, HTML5, and CSS3 hosted on Cloudflare Pages
• Backend: RESTful API built with Python 3 and Flask, hosted on Render
• Data Storage: PostgreSQL (SQLAlchemy ORM) for persistent, relational data storage
  • Note: The app initializes with 30+ default records. On Render's free tier, the data may take a few minutes to load after the page has been dormant.

Key Features

• SQL Persistence: All 30+ records are stored in a relational PostgreSQL database, ensuring data integrity and production-readiness.
• Cookie-Based Preferences: User-selected page sizes (5, 10, 20, or 50) are stored in a browser cookie and restored automatically on reload.
• Mobile-First Design: The UI includes a table-responsive container with a forced min-width to ensure functional horizontal scrolling on small screens.
• Image Handling: Each record features an image. If a URL is broken or missing, the system automatically renders a placeholder to maintain UI consistency.
• Dynamic Production Stats: Total record counts and average ratings are calculated directly via SQL aggregate functions (func.count, func.avg) on the server.

File Structure

root/
│
├── app.py                # Flask Backend (SQLAlchemy models & API routes)
├── requirements.txt      # Python dependencies (Flask, Flask-SQLAlchemy, Gunicorn)
├── DEPLOYMENT.md         # Production deployment & environment documentation
│
├── index.html            # UI Structure (including responsive table wrapper)
├── app.js                # Frontend logic (Fetch API, Cookie helpers, & UI Sync)
└── style.css             # Production styles (Mobile-scrolling & Flexbox/Grid)