This is a minimalistic in-browser OPTIMADE aggregator, written in TypeScript language on top of the Svelte frontend framework. It fetches the official OPTIMADE providers list, looks for the structure endpoints, and allows simultaneous querying against all of them, collecting the results together at the single webpage.
Technically this is just the single file index.html, highly-portable, can be opened from anywhere, on any environment (e.g. at the smartphone or locally from the USB-stick).
Svelte-Spectre (based on Spectre CSS framework) is used as a user interface kit. A standalone Optimade client written in isomorphic TypeScript is employed.
To build the project, nodejs version greater than 8.x.x should be installed in your system. Run the following commands in your terminal/command line:
cd ./project-folder/
npm install
npm run buildAfter the build process succeeds, the resulting index.html file will be available in dist folder. It can be simply opened in your browser. Run the following command to start the static web-server locally:
npm run startand open http://localhost:5000/ in your browser.
To run the project in development and watch mode, run the following command in your terminal/command line:
npm run devDon't close the terminal window to watch file changes and automatically apply to and reload the page.
assets - static files
components - low-level (dumb, pure, reusable) UI parts
helpers - pure functions for the templates (that cannot be inlined)
layouts - CSS framework components wrapped around the slots and providing the props
services - singletons sharing the business logic across the app (e.g. Optimade API consumption)
stores - shareable and reusable data flows
types - TS definitions
views - smarter high-level multi-purpose UI parts, mostly not reusable, cf. components
