Web Developer Case Study

1. Final Outcome

A goal project-management web app developed for the purposes of testing the marketplace. The prototype allowed the disabled person to create and track goals. And carers to watch, track and update the tasks allocated to them.

Built using Angular, the front-end development framework, and deployed to Netlify. Netlify is a super-fast global content delivery network. Images and data stored and retrieved from Google’s Firebase storage and NoSQL database. Follows a serverless computing method. Serverless removes the worry of running a complex server.

2. Background

I was lucky enough to get involved with a great project to build a prototype web app for the disabled. The web app focused on helping disabled people to achieve their goals. The prototype was for market-testing purposes. It would be for demoing face-to-face and via Skype to UK charities who care for the disabled.

The personal goals of disabled people are often not achieved. To achieve a goal the disabled person relies on their supporting team. The team is usually made up of family, carers and social workers. Goals usually fail when someone in the above team does not perform. There are a multitude of reasons why a team member might not perform. Reasons for non-performance can include: forgetfulness, overloaded with work, stress, miscommunication and more.

Often there is no transparency in where the non-performance has occurred. For example, conversations happen, emails sent, meetings held without actions noted. Communication and progress is not logged in a central place.

It’s a subject that is close to home, as my brother has cerebral palsy. And I have seen firsthand how his goals are not achieved. From simple maintenance of his apartment through to organising a holiday. All things that able-bodied people take for granted.

When I had the opportunity to use my coding skills to build a product that could help solve the above, I leapt!

3. Core functionality

The web app had the following functionality.

Login access through email and password

All users of the system had their own logins. Each user had different views depending on their status, e.g. client, carer or admin.

For the disabled person

Create and view goals

A user-interface to allow the disabled person to create goals and then view the goal. Each goal included all vital data plus an image.

Create tasks

A user-interface to allow the disabled person to create tasks for each goal.

Create and log task comments

Functionality that allows the adding and listing of comments per task.

Track progress

Simple visual chart to show progress for each task and also total progress for each goal.

For the carer

Track and update tasks

A user-interface to allow the carer to see all their tasks for all their clients.

View clients and all their goals

Top level view of all the clients goals.

Screens

• Signup
• Login
• Dashboard
• Account profile
• Goals overview
• Goal view
• Task view with comments
• My Team
• My Clients

4. Building the single page app

Wireframes

From the brief we created lo-fidelity wireframes. Usually, we would use Adobe XD for this job. But this time we used Adobe Illustrator to create a basic UI. The job did not demand a complex layout due to the target audience. In fact during the research, feedback concluded that it needed simplifying further!

Front end javascript framework

I love Angular - the front-end development framework. It’s the perfect tool for a job like this.

**Styling **

The Angular Material UI Component library provided all base components. This was great for big date pickers, sliders, buttons and cards. These were then styled with Sass - component by component.

Google Cloud Functions

Sharp - I used Sharp to resize and compress all images. This ensured that storage usage was minimal.

Custom function - A Google cloud function calculated total goal progress. This reduced the number of calls to the backend, thereby reducing cost.

Data

Google’s Firebase stored all the data. I used the AngularFire library to connect and query the Firebase NoSQL database.

Storing Files

Firebase storage took care of uploaded images after Sharp had compressed them.

Authentication

Firebase’s authentication tools were responsible for the logging in and out of users. Again, the AngularFire library made this a breeze.

Hosting

Netlify hosted the app. I used continuous deployment. This means that Netlify connected with my GitHub repo. Any local changes pushed to my GitHub repo would then trigger a rebuild and deploy on Netlify.

Netlify is a great hosting environment. So simple to setup projects and deploy globally. Their content delivery network is super-fast. I could have also used Firebases’s hosting.

Other libraries

MomentJS converted date objects into Unix timestamps.