LightHouse

ExhibitionDB

Art exhibitions database

With this app you can create your own art gallery with artworks from various museums.

• Metropolitan Museum API
• The Art Institute of Chicago API
• Rijksmuseum API

Why?

The main purpose of this project is to investigate how to build a web application that

• follows the Jamstack architecture best practices (in a nutshell: full CI/CD and no server side database).
• handles a lot (tens of megabytes) of structured data.
• performs well according to measurement tools like Lighthouse.

Currently the web app is deployed at https://rednaw.github.io/exhibitionDB/.

Deployment diagram

Use case diagram

At this moment the app implements the following use cases.

ER diagram

Datamodel of the database created from FileMaker exports (not the databases created from Museum API's, those are separate and not integrated in this model yet)

Supporting technologies

A breakdown of the various technologies and projects on which this project depends ordered by where in the deployment overview they are used.

The Browser

• Computer Modern: Computer Modern is the family of typefaces developed by Donald Knuth for TeX.
• Interactjs: JavaScript drag and drop, resizing, and multi-touch gestures for modern browsers.
• Javascript: The only programming language that runs in all browsers.
• LocalForage: Deal with getting and setting bulk data in the browser offline store.
• svelte-asyncable: Super tiny, declarative, optimistic, async store for Svelte.
• svelte-i18n Internationalization library for Svelte.
• svelte-select: A select/autocomplete component for Svelte.
• svelte-simple-modal: A simple, small, and content-agnostic modal for Svelte.
• svelte-toggle: Accessible toggle switch component for Svelte.
• sql.js: A javascript SQL database, it allows creating a relational database and querying it entirely in the browser.
• Tabulator: Data visualisation using interactive tables.
• zip.js: A JavaScript library to zip and unzip files in the browser and Deno.

The Content Delivery Network

• GitHub Pages: Static site hosting service that takes files straight from a repository on GitHub.

The Build Pipeline

• GitHub Actions: Automate tasks within the software development life cycle.
• Checkout: GitHub action to check-out the repository so the workflow can access it.
• github-pages-deploy-action: GitHub action that pushes generated files to production.

Data pipeline

• SQLite: SQLite is a C-language library that implements a small, fast, self-contained SQL database engine.
• curl: Command line tool and library for transferring data with URLs
• csv-to-sqlite: A script that copies CSV files into a SQLite database.
• zip: package and compress (archive) files

Code pipeline

• npm: Javascript dependencymanager and script runner.
• Svelte: Static Site Generator for reactive user interface.
• Rollup: Bundle generated html, css and javascript to a small number of compressed files.
• Jekyll: Static Site Generator for Markdown generated documentation HTML.
• jekyll-action-ts: GH action for running Jekyll.
• ESLint: Static analysis, detects basic code smells.
• Lighthouse: Collect runtime performance metrics and insights on developer best practices.
• Lighthouse CI: Run asserts against Lighthouse analysis results.

Automated data sources

• Metropolitan Museum API: Data on artworks in the museum collection.
• The Art Institute of Chicago API: Historical data on art exhibitions held in the museum.
• Rijksmuseum API: Data on artworks in the museum collection.

Version control

• GitHub: Version control, this project. Stores code and Filemaker dumps.
• Dependabot: Automated dependency updates

Manual data source

• Filemaker: Manual data entry