Meanwhile Gardens
Website for the much loved and well-known Meanwhile Gardens. The site accommodates various user groups, including a children's play hut, a skateboard park, a Steel Pan group, and a mental health charity; each having dedicated web page templates.
The "What's On" page displays events integrating with FullCalendar JS and is managed through the site’s admin interface, supporting various recurring event options.
The font-end is component based built with a JAMstack architecture, utilising a MySQL database, Strapi for admin management, and Next.js for the front end. I created a donations component designed to engage visitors easily step-by-step to donate to garden projects utilising React and Next.js enabling asynchronous dynamic page loading.
The back-end runs off a structured database with relationships between Events, Places, and Admin users, allowing dynamic generation of location-specific event details and contact information.
To enhance functionality, I integrated Leaflet JS, an open-source mapping library and API, to create an interactive map. This map features markers and polygons outlining the garden's areas based on geo-location boundaries, making it easy for users to navigate the garden’s features.
I developed an icon-based slider that offers a quick insight into the garden’s key aspects, such as usage, ecology, and interesting facts. This feature uses symbol design, a common practice in mobile interfaces, for intuitive information sign-posting.