Hatfield City Improvement District Website

For the University of Pretoria JCP Community Project, I was part of a group of three individuals who worked on the Hatfield City Improvement District (Hatfield Precinct) website. Their previous site was not done up to standard and they wanted a new look reflective of their vision. We were awarded with a prize for best website.

I was in charge of front-end design and development, where I used Laravel’s Blade templating language. I also worked on some of the back-end, creating a Facebook event fetcher provider which interacts with the Facebook API to collect events from the surrounding Hatfield area. Additionally, I did the JavaScript for front-end effects like parallax, slideshows and helped out with various areas, like troubleshooting and getting the site onto the server.

The project took a few months, but I am quite happy with our results.

The Project

The aim of the project was to create a site that better reflects Hatfield CID and is a useful resource. It’s essentially a directory that shows all of the business and upcoming events in the Hatfield area.

We worked closely with Hatfield CID to make sure that everything we did was up to standard and easy for them to use.

Modern design

We wanted to make a site that is attractive inviting to its users (many of which are university students). The purpose is to find out what’s happening in Hatfield, and nobody is going to actively visit a site that doesn’t look the part.

Content management system with image upload

We wanted to make a system that is simple and easy to use for their administration, so we custom designed a back-panel that was intuitive and very quick to learn.

Advertisement system

An important part of the website was to not be a cost, and rather an asset. They wanted businesses to advertise on the site and provide some revenue for Hatfield CID. So we created an advertisement system where businesses can pay to advertise for a set period of time on the site along with a transaction approval system for enabling the advertisement once funds were transferred.

Business registration

To reduce administration, we made it possible for individuals to add and manage their own business. This means that any new business can add their site to the directory, giving everyone an equal opportunity to visit the site.

An administrative approval system

To prevent spam and unwanted content on the site, the administrative dashboard features approval notifications which appear when new content is added to or edited on the site. The content has to be approved before it can be displayed.

Additionally, the administrator can edit and remove all content on the site when necessary.

Automated Facebook event integration

To make life a bit easier for the administrators, and to provide a lot more reason for users to return to the site, I developed a Facebook event fetcher.

Unfortunately, Facebook doesn’t provide a nice API for getting events, so we had to get all of the businesses in the surrounding area, then get the events of those businesses. It also provides events that have already passed for some reason, so we had to work around that, too.

Every twelve hours a CRON job runs the PHP script to fetch the information from Facebook, compare it to the data on the site and add it to the database.

This feature turned out really well and brings a lot more value to the site.

Instant Search

Instant search is available on each of the directory pages to let users find what they are looking for easily. I made it instant, because I personally find nothing worse than taking the effort to search, wait for the page to load – because of an incredibly slow server – and then I don’t find anything useful.

The server also isn’t particularly powerful, so we shifted the effort onto the client side.

Google Maps integration

We used Google Maps a lot throughout the site for locating businesses and events, and for the general overview map page where we show pins where all of the businesses and events are.