Chapter 18: Building the Music Time Machine Web App

1. Building the Music Time Machine web app

Chapter 17 introduced Flask with routes, templates, sessions, forms, and a small dashboard page. This chapter uses those skills to build the full Music Time Machine web app. The user will open a browser. They will see a dashboard, connect to Spotify, view charts, filter analytics, generate playlists, and manage their saved data from a settings page.

You already have the important backend pieces from Chapter 16. The project can store tracks, artist names, cached raw payloads, and snapshot history in SQLite. Now you are going to give that data a proper interface.

This is where the work starts to pay off. For the last few chapters, the backend has done its job quietly, running scripts and printing results to the terminal. In this chapter, it finally gets a face: pages you can click through, charts you can read at a glance, and controls that work without typing a single command.

Chapter plan

What you'll learn
  • Set up CSRF protection for forms and AJAX requests
  • Add a shared stylesheet and base template
  • Render dashboard pages with shared navigation and consistent styling
  • Pass Python data into JavaScript for Chart.js charts
  • Adapt Spotify OAuth for a browser-based Flask app
  • Filter analytics with query parameters
  • Handle GET and POST requests in Flask routes
  • Improve form submissions with fetch() and in-place updates
  • Protect destructive actions with confirmation steps
  • Send the SQLite database file as a browser download
What you'll build
  • CSRF protection in app.py
  • static/css/dashboard.css, the shared dashboard stylesheet
  • templates/base.html, the layout used by every page
  • templates/home.html, the home dashboard with summary cards and a discovery timeline
  • spotify_client.py, a helper module for Spotify API calls
  • Browser OAuth routes for login, callback handling, and session token storage
  • templates/analytics.html, the Analytics page with Chart.js charts
  • A date-range filter for narrowing the analytics data
  • templates/playlists.html, a playlist generator based on saved snapshot history
  • An AJAX version of the playlist generator
  • templates/settings.html, the Settings page for sync, export, disconnect, and clear actions
  • A complete Flask dashboard that reads from music_time_machine.db

The app you are building

The Music Time Machine is no longer just a data project. By the end of this chapter, it will feel like a small product.

The home page gives the user a quick summary of their listening history. It shows key numbers, recent activity, and a visual timeline of new tracks discovered over time.

The Spotify login lets the user connect their account from the browser. Once connected, the app can use the access token stored in the Flask session when it needs to talk to Spotify.

The Analytics page turns the database into charts. The user can filter the date range and explore patterns in their listening history without writing SQL or running a script.

The Playlist Manager lets the user choose a supported source, such as Forgotten Gems or recent discoveries, and generate a playlist from saved track data. You will first build it as a normal Flask form, then upgrade it with AJAX so the page can update without a full reload.

The Settings page handles the practical parts of the app: syncing data, exporting the SQLite database, disconnecting Spotify, and clearing saved data. These actions are useful, but some of them are sensitive, so they need confirmation and CSRF protection.

The project structure

Most of the new work lives in three places:

  • app.py, where the Flask routes live
  • templates/, where the HTML pages live
  • static/, where the CSS and browser-side JavaScript live
Project structure 
your-project/
├── app.py                  # Flask routes
├── spotify_client.py       # helper module for Spotify API calls
├── music_time_machine.db   # SQLite database, from Chapter 16
├── templates/
│   ├── base.html           # the layout every page extends
│   ├── home.html           # home dashboard
│   ├── analytics.html      # Analytics page
│   ├── playlists.html      # Playlist Manager
│   └── settings.html       # Settings page
└── static/
    ├── css/
    │   └── dashboard.css   # shared dashboard styles
    └── js/                 # browser-side JavaScript, added with the AJAX upgrade

The existing SQLite database remains the source of truth. The Chapter 16 scripts can still write to it. The Chapter 18 web app can read from it. That separation lets you turn the existing project into a web app without starting again.

How the chapter progresses

You begin with security. Before adding forms or AJAX requests, you set up CSRF protection in the Flask app.

Then you add the visual foundation: a shared stylesheet and a base template. Once those are in place, each page can focus on its own content instead of repeating the same layout work.

From there, the app grows page by page. You start with the home dashboard, where the database becomes summary cards and a visual timeline. Then you add browser OAuth so the user can connect to Spotify. After that, the larger feature pages arrive: analytics for exploring listening history, playlists generated from saved snapshot data, and settings for sync, export, disconnect, and clear actions.

Each step adds one visible piece to the application. By the end, the Music Time Machine has moved from a backend project to a browser-based dashboard that a real person can use.