context

I started this project in the last couple of weeks of my software development course, while we were digging into Laravel. The arts charity I was working with at the time has a similar tool, but in the comms team we had started to daydream about streamlining it, integrating it with our CRM, and generally introducing more functionality. So this is a basic proof-of-concept project, inspired by those conversations, with the self-imposed constraint of using Laravel for both the front and back end, to cement and expand upon what I’d learnt during the course.

project objectives

The basic pitch of the creativity map is in the name: it’s a tool which displays creative activities taking place in a given location. I wanted to address the needs of a few different kinds of users, in the following order of priority:

1. Individuals who want to find a new creative group in their area
2. Creative activity/group leaders who want to attract new members
3. Arts industry organisers who want to gather basic data on existing local creativity

data

Just a little note here about the data, because you might be wondering if the screen capture above contains real groups. Initially, I did use Laravel’s faker tool to seed my database, but this became unsuitable once I’d integrated Google Maps, which needs real address data to place markers. The data in the project is now a mixture of fake and real – real groups and locations (based on publicly available info that the groups themselves have put online), but faker-generated contact names and email addresses.

searching

So the search function in my GroupController is, uh…longer than the others.

I wanted users to be able to search by location (city or postcode), the type of creative activity they were most interested in, or the name of a group. Or a combination of those things!

When I realised I was about to write a lot of repetitive if statements, I did briefly consider dropping the idea of searching by group name – if someone already knows the name of a group, why aren’t they just googling it?? But it does seem reasonable that someone might search…

• ‘Location: Derby’
• ‘Creative activity: Music and singing’
• ‘Group name: choir’

…using the group name field to, say, filter out orchestras and bands (even if that means they miss any choirs that aren’t literally called ‘____ Choir’). So I sucked it up and wrote my if statements.

Searching by place gives you a more zoomed in map result, centred on that location, and searching by group name or activity type gives you a country-wide view.

The map and markers only show up after a search has been entered, which is because of my past experience of this kind of tool. There are a lot of creative groups in the UK and Ireland; the organisation I worked for had 700+ mapped out, so the default map with all of them marked gives you one of those visuals that’s impressive but not functional. All markers, no map.

The big thing I’d want to change in a future version with regards to the actual map/searching is making the map markers clickable. This was my first exploration of the Google Maps API, so I kept it as simple as possible and just used the HTML.

But clickable markers which display info panels require JavaScript and events, so that’s the plan for next time.

adding a new group

I wanted to create this process for adding new groups to the map:

1. A group leader fills out a short form with their group info
2. An admin checks that form, editing where needed
3. When the admin approves the submission, the new group is automatically added to the map

The goal here was to keep everything simple. So of course, I originally went down a complicated path of setting up a completely separate table for ‘pending_groups’ and then getting stuck, wondering how I was going to get move that data across to my existing ‘groups’ table. Thankfully after I’d slept on it, I realised I could do it all in the same table if I just added a column to show whether a group had been ‘approved’ or not. God knows how much time I saved with that one.

The big thing that’s missing in the form is an input to upload an image. On my course, we stuck to providing links to images, and not actually uploading images themselves, so that’s also something that’s on my list to explore properly and add for next time.

admin area

When we were learning vanilla PHP, we did a bit of work with $_SESSION and using it to check if a user is logged in or not. In Laravel I used the manual authentication documentation and the Auth facade. If a user tries to access an admin page without being logged in, they’ll get a 403 error.

Admins can edit/approve/delete the pending groups, and they can also look up an existing group and edit/delete those too.

Styling is not my passion, but I wanted the admin area to look different to, but not incongruent with, the public-facing parts of the app, so a user can tell when they’re in a backstage area. So it’s…greyish-blue! An attempt was made.

geocoder

I used GeocoderLaravel and followed this brilliant walkthrough to get it set up. Geocoder takes address data and gives you back latitude/longitude coordinates, which you need to place markers on a custom Google Map.

My getCoordinates function runs when an admin clicks ‘approve’ for any group which has null lat/lng values; because of how I set up my routes/views, the ‘approve’ button actually goes to ‘/map’ to call getCoordinates then redirects again to ‘/approve’ to run another function which marks that group as ‘approved’.

Getting this working was my pure joy moment in this project – it was so glorious to see those coordinates magically fill themselves in.

Unfortunately, as I type this I’m realising that if an admin updates address data for a group, I need to be able to run a function to get new lat/lng values to update the map pin (because getCoordinates only works if lat/lng are null). Wow, I love explaining my projects, it never ever results in me realising things don’t work how they need to! So. Add that to the list of things for next time.

the list of things for next time

1. Clickable map markers with info panels (stop avoiding JavaScript)
2. Users need to be able to upload images of their group (linking to images is easy; how hard can storing images in databases really be?? (don’t answer that please))
3. updateCoordinates (you div)

final thoughts

I enjoyed using Laravel for both front and back end, and getting a feel for how flexible the framework is. The Laravel documentation really is excellent, and it was fun to dig around in it and build on my existing knowledge base. Blade is super user-friendly, especially for the relatively simple pages I’m making. It was only when I started messing about with DOM manipulation that I really, really wanted to be doing the front end in React instead.

I’m also just generally proud of this first project after ‘graduating’ from my software course. Some things felt comfy, some things felt like a stretch, and I only spent one day in absolute misery (CORS errors and Vite updates, woe, pain, why).

If you want to have a look at the full repository for this creativity map project, you’ll find it here.