Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/lauraric/public_html/wp-includes/plugin.php on line 601

Warning: Parameter 1 to wp_default_styles() expected to be a reference, value given in /home/lauraric/public_html/wp-includes/plugin.php on line 601
Havok Bike Park | Web design & development | Laura Richer

Havok Bike Park

Angular 2

This project, for a local bike park, was the perfect opportunity to try out some new skills and develop my current skillset. I have done a bit of work in Angular 2 before and this project was just right to learn how to build an Angular2 app from scratch and integrate it with REST APIs.

The site needed to be editable by the client so I implemented WordPress as the backend and built the front and back end entirely seperatly, merging the 2 together using REST APIs.

Angular 2 frontend

Being quite a simple site, Angular 2 seemed like the perfect framework to build this project. Building it as a SPA meant the site would be super fast and seamless. It also had the advantage of allowing me to expand my knowledge of Angular 2, which I had previously only used a small amount. Completing this project in Angular 2 has helped me understand the fundamentals of Angular right through to more complex processes.

WordPress integration

This might be a bit controversial to some backend devs but I love how the backend of WordPress works, its easy to customise from a development point of view but adding things and creating the exact functionality you need. Its easy from a user point of view and a nice UI than a lot of other bespoke CMS solutions Ive worked with.

 

It was a no brainer to integrate WordPress with the frontend app, however this is not the conventional way to work with WordPress (PHP/jQuery). Using the WP REST API plugin, I was able to create JSON endpoints to integrate with the Angular 2 frontend using HTTP requests.

Facebook Graph API

The guys at Havok tend to heavily rely on social media for publicising events and media. To make life easier for them, so they dont have to add new events and media to both Facebook and the website, I integrated the Facebook Graph API.

 

This pulls in the required information from Facebook and allows me to use the data within the Angular 2 frontend and display the data as needed. The guys can add everything they want to the Facebook page and it will automatically display on the website.

 

This is used for the Events, media pages and media block that displays at the bottom of every page.