Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time

Wine & Cheese Map

This is an app to view wine and cheese pairings through a Cytoscape.js visualisation.

This app is a demo of the sort of functionality that Cytoscape.js allows you to easily add to your webapp. This repository is MIT-licensed, like Cytoscape.js itself.

The data was generated from recommendations in Max McCalman's book, Cheese: A Connoisseur's Guide to the World's Best.

Project organisation

This app can be used as an example of how you might structure your modern webapp. While this repository may act as a good general reference, you would probably want to tailor and optimise the build configuration files for your project.

The technologies used for this project include:

  • Building
    • Webpack: Bundle JS
    • PostCSS: Bundle CSS
    • Babel: Compile newer JS to older JS to support older browsers
    • CSSNext: Compile newer CSS to older CSS to support older browsers
  • UI
    • Preact: Basic component support
    • Cytoscape: Graph/network visualisation
  • Linting
    • ESLint: Identify common problems in JS
    • Stylelint: Identify common problems in CSS

Building the project

The project's build targets are specified as npm scripts. Use npm run <target> for one of the following targets:

  • watch : Do a debug build of the app, which automatically rebuilds and reloads as the code changes
  • prod : Do a production build of the app
  • clean : Delete all files under the dist directory
  • lint : Run linters on the JS and CSS files