Progressive web app on Symfony and Angular

31.10.2018

Training Realm offers unique fitness training routines. They asked us for an application for their users. Till now, training routines were posted as static pages and users had to calculate training days and remember results by themselves. The aim of the app was to make it easy for everyone to plan training days and progress automatically without having to remember about routines yourself.

Requirements gathering

We started the project with requirements gathering phase. This is the phase where we learn about clients plans and expectation. The better we know clients needs, the better we help in designing and implementation of the solutions. Quite often we can also help identify requirements which client did not take into account preventing surprises and unnecessary costs later on.

The Training Realm team already knew their users really well and had a really good understanding of what they wanted to build. Thanks to this, the phase of requirements gathering was really quick. One point that took a bit more time was an investigation into options of collecting payments and resulting tax implications. We did help them choose a payment's provider who also helps with processing taxes when you collect payments from all over the world. Fastspring.com was chosen because of their well-documented API and fast support.

Training Realm-1

UX/design

After the requirements gathering phase, our design team created UX mockups outlining all the various screens and interactions.

Typically, we create UX mockups of all major screens and discuss them with the client. The focus is always put on the end user perspective. Depending on the types of users and their objectives and the websites or apps goals this process can be fairly simple or really complex. It can, for example, inlude test runs on a group of users to identify any potential unintuitive elements or blockers. For trainingrealm.com the main screens are the home screen and the training screen. This is where users spend the vast majority of their time and thus - this is where we put the most effort.

When the wireframes are ready, turning them into actual designs is a great experience, both for us and the clients. Trainingrealm.com already runs a big fleed of websites. We had to make sure we stay within the schemes and colours of the brand, although we did modernize and extend it a little.

Training Realm-01

Implementation

Symfony & Angular

After the design phase, it was “the build time”. We choose Symfony for the backend because of its speed and ease of implementation. Plus we love PHP so a framework based on PHP was a natural choice.

Trainingrealm.com requires a really slick frontend experience. To achieve it and keep the code manageable, we chose Angular for the frontend framework.

Progressive Web Application

Because the majority of users visit the app on mobile devices, responsive web design was critical and we meticulously tested the app on various devices and screen widths.

Also, to improve the experience of regular users we turned trainingrealm.com into a Progressive Web App (PWA). Users can save its icon on the home screen of their phones and tablets and use it just like a regular app. Visits from home screen icons amount to 30% of all visits.

Continuous Integration

As usual, to make the build and testing easy, we used version control we set up continuous integration with the help of Jenkins and docker. Whenever a developer commits new code, an updated version of the application is staged on a testing server and automated tests verify whether everything works correctly. This is also great for clients who can see the progress of the work day by day and could easily help us bringing their input into the project.

Hosting

The application is hosted on Amazon Web Services. It can quickly scale up and down depending on the number of users using it. Thanks to our continuous integration setup, new features can be deployed to it quickly and reliably without impacting the users.

Because apps users come from all over the world, our monitoring mechanisms ensure that the service runs smoothly 24/7.

As many web apps, to separate the core functinality from the marketing pages, the main trainingrealm.com was built separately to app.trainingrealm.com where the website is located. For the landingpage builder we used Droopler - a Drupal distribution which we often use to build corporate websites.

Results

The application was an MVP and proved to be a great success. Thousands of users create accounts on the service every month. New features and phases for the project are already being planned.

The client is thrilled and we are proud :)

Training Realm-02