Development of a simple project about specialty coffee shops in Cyprus continues. I talked the API microservice in the first part, the frontend site in the second part, and the Telegram bot in the final article.

The project code 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 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.

Two additional plugins, vite-plugin-html-purgecss and 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 as in the API microservice, 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 platform with managed micro VM Firecracker. It's much easier than hosting the microservice API here, and a four-line Dockerfile suffices:

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 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, website https://specialtycoffee.cy/.

In the third section, I'll go over how to make a Telegram bot.