We quickly built this single page web app so that we could test the need for it in the marketplace... check out its features below.
Easily create goals and allocate goal leaders
Add tasks per goal and allocate to team members
In-app chat about projects
Countdown to goal
Team can view their tasks via their account
Tracks overdue tasks
... and more!
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.
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.
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.
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.
- Account profile
- Goals overview
- Goal view
- Task view with comments
- My Team
- My Clients
4. Building the single page app
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!
I love Angular - the front-end development framework. It’s the perfect tool for a job like this.
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.
Google’s Firebase stored all the data. I used the AngularFire library to connect and query the Firebase NoSQL database.
Firebase storage took care of uploaded images after Sharp had compressed them.
Firebase’s authentication tools were responsible for the logging in and out of users. Again, the AngularFire library made this a breeze.
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.
MomentJS converted date objects into Unix timestamps.