Web-component brewery app

A POC Web-components application for tracking breweries you've visited. It uses Open Brewery DB for data so unfortunately only covers US cities.

Completed as part of Dave Rupert's Web Components course

The stack

A TypeScript project that uses Lit to build a web-component based app. Production build is provided by Rollup and Esbuild. The project was scaffolded using the @open-wc starter.

Quickstart

To get started:

npm install
npm start

Will open your browser at http://localhost:8000

Changing the city

The brewery-app component takes an optional attribute city. To change the city:

1. Open the Elements panel in the browser dev-tools
2. Select the <brewery-app> custom element
3. Add a city attribute, e.g. city="New York"
4. The app ui will update and fetch breweries in New York 🎉

Scripts

• start runs your app for development, reloading on file changes
• start:build runs your app after it has been built using the build command
• build builds your app and outputs it in your dist directory, generates a cem (Custom Elements Manifest)
• test runs your test suite with Web Test Runner
• lint runs the linter for your project

Tooling configs

For most of the tools, the configuration is in the package.json to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.