Pragmatic development 2: frontend
Tags: javascript, map, tutorial, coffee
Published: 2022-10-13 15:45:35

Development of a simple project about specialty coffee shops in Cyprus continues. I talked the API microservice in the [first part](https://dev.to/vladimir mvs/pragmatic-development-2lph), the frontend site in the second part, and the Telegram bot in the [final article](https://dev.to/vladimir_mvs/pragmatic-development-3-telegram-bot-ed1).

The [project code](https://github.com/specialtycoffeecyprus) is open, website https://specialtycoffee.cy/.

## Architecture

The website has only two pages: a map with coffee shop markers and an About page. You don't need anything else for a startup, but for feedback, I have Telegram and email.

The implementation is modular vanilla JavaScript and Google Maps in a free tier, which can always be replaced by Mapbox, Mapquest, and other services.

The map and data from the REST API are loaded concurrently, and when ready, markers from the GeoJson data array are added to the map and collected in clusters. A click on the marker sends a request to the Google Places API for a company id (_cid_) and opens a small description (Info Window) with a link to the company card on the larger Google Maps with the ability to build a route, view reviews, and so on. This link is generated using the _cid_.

If Google Maps is unavailable, a stub with an error message is displayed, but the website navigation remains functional.

Everything is simple and quick thanks to asynchronous execution.

I use [Vite](https://vitejs.dev/) to build the project, which is also very fast and simple.

I use Google Analytics with a direct connection instead of Google Tag Manager for analytics and insights about site visitors (a bit less traffic this way). Info Window openings are recorded in analytics as reaching goals in order to calculate site conversion. The plugin used is [vite-plugin-radar](https://github.com/stafyniaksacha/vite-plugin-radar).

Two additional plugins, [vite-plugin-html-purgecss](https://github.com/Jax-p/vite-plugin-html-purgecss) and [vite-plugin-minify](https://github.com/zhuweiyou/vite-plugin-minify), enable the removal of all unused code from the final build. It took 15 minutes to set them up, which is fine.

## Configuration

Common options and secret names are stored in the .env file, while local overrides are stored in the .env.local file.

## Monitoring

The same [Sentry](https://docs.sentry.io/platforms/javascript/) as in the [API microservice](https://dev.to/vladimir_mvs/pragmatic-development-2lph), in the .env just specify an empty value of VITE_SENTRY_DSN (for clarity), and write the actual value to secret.

## Deployment

The same [Fly.io](http://fly.io/) platform with managed micro VM Firecracker. It's much easier than hosting the microservice API here, and a four-line Dockerfile suffices:
```Dockerfile
FROM pierrezemb/gostatic
COPY docker/config/headerConfig.json /config/
COPY dist/ /srv/http/
ENTRYPOINT ["/goStatic", "--fallback", "/index.html"]
```

## CI/CD

This is slightly more complicated: first, [Github Action](https://github.com/specialtycoffeecyprus/specialty-frontend/blob/develop/.github/workflows/build.yml) creates a build with Vite, then `flyctl` creates a container from it and deploys it to the production VM). All secrets are stored in the GitHub production environment in this case.

**At this point, the website is live, hosted in a production, and accessible to all users. In fact, the project is completed :-)**

[Frontend repository](https://github.com/specialtycoffeecyprus/specialty-frontend), website https://specialtycoffee.cy/.

In the [third section](https://dev.to/vladimir_mvs/pragmatic-development-3-telegram-bot-ed1), I'll go over how to make a Telegram bot.