https://github.com/johnhunter/wc-brewery-app

A POC Web-components application for tracking breweries you've visited. Includes a publish action.
https://github.com/johnhunter/wc-brewery-app

poc web-components

Last synced: 3 months ago
JSON representation

A POC Web-components application for tracking breweries you've visited. Includes a publish action.

• Host: GitHub
• URL: https://github.com/johnhunter/wc-brewery-app
• Owner: johnhunter
• License: mit
• Created: 2023-09-23T15:51:51.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-04-29T01:20:17.000Z (8 months ago)
• Last Synced: 2024-04-29T02:34:24.761Z (8 months ago)
• Topics: poc, web-components
• Language: TypeScript
• Homepage: https://johnhunter.github.io/wc-brewery-app/
• Size: 2.68 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Web-component brewery app

A POC Web-components application for tracking breweries you've visited. It uses [Open Brewery DB](https://www.openbrewerydb.org/) for data so unfortunately only covers US cities.

_Completed as part of [Dave Rupert](https://daverupert.com/)'s [Web Components course](https://frontendmasters.com/courses/web-components)_

![image](https://github.com/johnhunter/wc-brewery-app/assets/219160/4d0d73ce-29ce-46e9-b626-eed2bee47376)

## The stack

A TypeScript project that uses [Lit](https://lit.dev/) to build a web-component based app. Production build is provided by [Rollup](https://rollupjs.org/) and [Esbuild](https://esbuild.github.io/). The project was scaffolded using the [@open-wc](https://github.com/open-wc) starter.

[![Built with open-wc recommendations](https://img.shields.io/badge/built%20with-open--wc-blue.svg)](https://github.com/open-wc)

## Quickstart

To get started:

```sh

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 `` 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.