Outdoors and Eco: A Technical Demonstration

Introduction

This post covers a few of the key technical features that make up this web application - Outdoors and Eco (www.outdoorsandeco.com), and that contribute to high performance, scalability, and ease of ongoing maintenance. Outdoors and Eco is a web application, custom built from the ground up and managed end to end by Gareth Brown of App Software Ltd, demonstrating full stack web engineering capability.

If you think I might be able to help with your project, contact me at [email protected]

Technical Stack

The stack used for Outdoors and Eco is as follows. While through App Software Ltd I often develop using different tooling than defined below (for example larger projects might use AWS over Digital Ocean, or Angular on the front end in place of Alpine.js), the below technologies were selected to aid rapid delivery, deployment and ease of maintenance:

Languages / Markup

C#, TypeScript/JavaScript, CSS, SQL, HTML, Markdown

C# drives the backend while JavaScript with some TypeScript for core services and bundling of NPM libraries. SQL is used to access the Postgres database, where a mix of relational and NoSQL features are used.

CI/CD / Platform

Application code is containerised using Docker and deployed on Digital Ocean infrastructure. For this project, low cost and fast deployment were priorities. Digital Ocean's App Platform fitted the requirement with low running cost, simple networking and the facility to build and deploy containers on Git commit, without the overhead of container registry and orchestration setup.

Some AWS services are used such as CloudFront for our CDN and SES for email delivery.

Frameworks / Libraries

The frameworks and libraries are described below with a brief explanation of the choices made. Smaller libraries and tools (e.g. CodeMirror, Marked.js) are not included.

.NET 8 LTS (ASP.NET MVC / Razor Pages)

ASP.NET is a robust, well supported backend development framework with which I have great familiarity, which facilitates a progressive programming model, from simple HTML server generated pages through to SPA (single page applications) with a range of technologies supported in the same framework (MVC, Razor Pages, Blazor) and simple, robust, routing.

Node.js

Node.js is used primarily for compiling frontend assets and managing build-time dependencies.

Bulma CSS

Bulma CSS was selected for the styling of Outdoors and Eco, since it works as a standalone library without the requirement of a build system and is easily extendable with custom vanilla CSS and facilitates rapid UI development.

Alpine.js

Alpine.js is a great tool for building dynamic reactive UIs which works as a standalone library and does not require the use of a build system.

Services

Mapbox

Outdoors and Eco integrates with Mapbox for map display and editing features.

Application Features

OAuth / JWT Based Authentication Flow

Outdoors and Eco's custom, built in authentication has features typical of applications implementing the OAuth 2.0 protocol, acting as its own identity server with custom JWT issuing in conjunction with social identity providers (below).

Social Account Registration and Sign In

Outdoors and Eco features social sign in, integrated with the wider authentication system for rapid user registration and sign in, reducing friction in the authentication process.

Activity Search

Outdoors and Eco allows users to search for activities by location, title, or category. The activity search feature implements a responsive web UI control that dynamically adapts its layout based on the selected search mode.

Search result generation leverages advanced PostgreSQL features to support location-based filtering and full-text search. This includes geospatial distance filtering within a specified radius, powered by the PostgreSQL cube and earthdistance extensions.

(Activity Search)

Activity Editor

The activity editor allows users to efficiently add new activities to the web application, with features including a tag system, address / place search, and route definition using the map editor.

(Activity Editor)

(Activity Editor Route Editing)

Integrated Content Management and Delivery

Outdoors and Eco features a markdown content management and delivery system that is used to curate and deliver content around the application. The editor features a custom Code Mirror powered markdown editor and HTML preview pane, with image uploading and basic editing (resizing / quality etc) that is integrated with the same asset delivery system and CDN as the rest of the application system.

Content Delivery can occur via direct service request, or via JSON API.

(Content management index UI)

(Content editor UI)

Resource Caching and CDN Integration

Images on Outdoors and Eco are stored in AWS S3 served via the Asset API. The Asset API uses a custom URL format that enables on-the-fly processing of resource variants (such as image resizing and format conversion).

Asset requests are routed through the AWS CloudFront CDN, with the Asset API setting cache control headers so that processed assets are cached for a fixed time period. This allows further requests with the same request parameters to be served directly by the CDN, and as a result they will not hit the API for processing again until the cache expiry.

In addition to CDN-based caching, the site also employs in-memory caching for selected database operations, using sliding expirations to balance performance and freshness.

Integrated Blog

Driven by the integrated content management and delivery system described above, Outdoors and Eco hosts it's own integrated blog to keep users updated on news and latest developments.

(Integrated Blog)

Category Management

Activities on Outdoors and Eco can be categorised using the tagging system, which facilitates tag nesting for the building of tag hierarchies:

Integrated Web Analytics

Outdoors and Eco features integrated web analytics for observability of user interaction and GDPR compliance without cookie consent banners (due not tracking personal data, anonymous session IDs, IP anonimisation and no use of 3rd party services).

(Integrated Web Analytics)

Summary

I hope you found this technical demonstration useful.

Again, if you think we may be able to work together, contact me at [email protected]