Southbound Cafe-Bar
The Brief
Southbound is a cafe, bar and music venue based in Leamington Spa. Southbound required a website to tell people what they were about and share details of their upcoming gigs and events. They wanted the website to extend their physical presence and fit with the industrial, handbuilt feel of the bar. They also wanted a way to manage some of the content themselves, such as keeping an up to date list of upcoming events.
The Stack
Although not necessary for the scale of this project, with the support of the client, I took the opportunity to apply my knowledge of React using Remix as the framework and build a basic custom CMS. Content data is stored in a Postgres database and Prisma ORM is used for database communication.
The Design
A standout feature of the bar is the large chalk board menu. I decided to base the website around a chalkboard theme and use a handwritten font to emulate chalk writing. I needed a way to display photos and in order to not look out of place on the board, I settled on using a polaroid frame with a drop shadow to give the impression of photos stuck on the board.
Initially I was making the photos in Photoshop but found this time consuming when photos needed to be changed. To make this process easier, I created a component that takes an img src as a prop and applies some filters and fits the image in a frame made of a div element. This has the added benefit of enabling the user to save a full resolution version of the image.
During early development, I utilised a chalk texture and css background clipping to apply a texture to the text. However, this created a problem as I was also using a rotation transform to make the handwritten effect more realistic and I found that webkit could not support a rotated background clip so MacOS and iOS browsers would not render the text. I decided the rotation was more important than the texture and having a solid colour also makes the text more readable.
Content Management
I provided an admin area for the Southbound team to share upcoming gigs and events with their users. Authentication is provided through a session cookie based on the implementation in the Remix Indie Stack. All routes in the admin section are protected to ensure they cannot be accessed by an unauthorised user.
Event data is stored in a Postgres database. Events are fetched from the database and displayed on the “What’s On” page to show future events in the style of the public site.
Hosting
The Southbound website is hosted on a VPS in a Docker container alongside a Postgres container. I run daily backups of the Docker volume to ensure minimal data loss in the event of an unrecoverable server crash.