I developed a local community mapping tool to assist in identifying and managing potential greening areas for a new Friends of The Earth post-code gardener project.

The mapping tool utilises the Leaflet JS RESTful API to add map locations and retrieves geo-coordinates and ward statistics from local government datasets and the Mayor of London's open data using cURL. These details are automatically applied to form fields when setting the marker position.

The web application is built as a Progressive Web App (PWA), functioning as a single-page app to provide a native app-like experience. It features admin authentication for updating or deleting map locations.

The defined area of the project is shown on the map with ward outlines using map polygons and overlay colours for clarity. Places are also presented in a list format, categorised into ownership, current use, and potential. Content is uploaded via a Next.js form using server actions, with images taken from handheld devices or uploaded from device folders.

I developed a custom CMS for a Personal Media Portfolio, providing an easy-to-use interface to manage media from platforms like SoundCloud, YouTube, and Vimeo.

The front-end design utilises Bootstrap's responsive grid system, emphasising full-screen imagery, client-chosen fonts, and a bespoke colour scheme. The site features AJAX-based media loading into modals, ensuring continuous page browsing.

Migrated from WordPress.com to a custom CMS with a Next.js front-end, featuring a custom admin interface for managing events and mass mailing. The migration ensured zero loss of content, including pages, events, and images, with domain redirects from the old site to the new one.

Server-Side Rendering (SSR) was employed at the page component level to enhance modular page loading, optimise performance, and improve SEO. Static Site Generation (SSG) generates static HTML at build time for faster page loads. Incremental Static Regeneration (ISR) uses webhooks from the custom CMS to update static content on the front-end. TypeScript is adopted throughout the site for improved type safety.

API integration provides endpoints for TFL travel updates on the "Find Us" page. A search component modal displays results for events and page content.

The custom admin features an events calendar with support for various recurring patterns, using FullCalendar JS for dynamic front-end rendering. Automated social media banner image generation ensures correct dimensions for metadata content sharing. The mass mail system includes theme templating, GMAIL SEND API integration, authentication, and server cron job operations for scheduled sending.

The front-end features multiple views for events, including grid views and a full calendar archive, as well as engaging components like slides, mini-intro sections, and a donate component. Asynchronous updates for subscribe and contact forms are implemented with minimal resource dependency for user authentication.

Achieved 100% scores in Lighthouse reports for performance and usability.