The Boulder

Visit Website

Overview:
- Graphic, logo, and web design
- Front end web development using CSS and vanilla JavaScript
- Back end development using the Flask microframework - Use of Google API to automate events calendar.

The Project

The owner of The Boulder had an interesting request - she wanted a website that made sharing what was happening at her bar as easy as possible. The Boulder is a small bar, and the owner is often the only one working behind the bar. To keep things simple for her, I decided to build a web app that focuses on being easy to use on mobile but provided a great experience for users on a desktop or laptop. Already familiar with Flask, I decided to use that and build out the app and leverage the Google Calendar API to make updates to her website seamless. As is typical for most of my projects, this process started out with design first and then moved onto programming.

Graphic Design

The Boulder didn't really have any graphical assets. Sure, someone must have created some sort of CAD file for their sign, but knowledge of who that was and were that file is are lost to history. So I had to do some research - I looked up photos of The Boulder online and use those to recreate the logo.

Once that was done, I moved on to the rest of the website. I knew this website was going to serve as an events page first and foremost, so I looked to the websites of venues for inspiration. Instead of a cluttered calendar view, I went with a list view.

It was also important that the venues information was front and center, so that without searching, visitors knew the hours and address for the place. The Boulder about page, with hours and address visible.

This front end was also created using CSS and vanilla JavaScript. One lesson learned early on was keeping things simple - I created a fogged glass effect for the menus, but due to cross browser support, had to ditch it early. While it looked great on Android devices, the look was not supported on iOS. Overall, we were quite satisfied with the minimalist, mobile first look.

Programming

The back end was built using the Flask framework. Different services, like authorization, an admin panel, database integration, etc., had to be build from scratch. I went with SQLite, a small but powerful database that was perfect for the job. This database is file based, so it can live along side our app without needing to be spun up and served on it's own instance.

The most challenging aspect of this app however, was using the Google API to fetch the owners Google Calendar information and push updates to their Google Calendar. This was challenging in the sense of learning the API, but also in thinking about how to design the user interface to design it. The UI was written using CSS and vanilla JS, and there are some parts that might be smoother had I used a front end framework.

Future and Take aways

While vanilla JS and CSS are great, they have their limitations. Relying on a framework, like TailWind CSS of Svelte JS could have helped speed up the process and given us a better result.