Flickerbook

https://flickerbook.co.uk is my biggest web project ever, as I started it back in 2017 with very minimal knowledge of web development. It was written and rewritten many times over the years with more and more features being added.

How it works

In essence there are 3 major steps that are necessary for Flickerbook to work:

  • First: payment details have to be provided.
  • Second: deductions details have to be provided.
  • Third working hours have to be provided.

Payment details consist of information like hourly and overtime rates, also employment information can be submitted as well, such as employer name, job position or shift type.

Deductions details consist of information like tax, national insurance, pension payments.

Once payments and deductions are set, start and finish times have to be provided using the table demonstrated in the picture below.

Providing work hours.

Once the payments, deductions and working hours are provided a payslip can be generated using all the information. An example of one weeks payslip is demonstrated below:

One weeks payslip.

I also use this data to provide insights into earnings like average weekly pay or to create charts.

Problems Flickerbook helped to solve

The initial idea behind Flickerbook was to help me track my working hours while I was working in the warehouse, as I would regularly do overtimes and quite often would not be payed properly for it, and needed something to help me easily spot discrepancies in pay.

Another issue I had was that I was working every second weekend and there were a lot of occasions when I would need to know on the spot if the weekend in the future is a working weekend for me or not, so with Flickerbook I was able to create my own shift calendar and tackle this issue easily.

Flickerbook to this day helps me track my annual leave, so there was no need for me to go to my managers and ask how many holidays I have left, as I’m always aware of the number of holidays I have used.

Annual leave information.

Flickerbook also enabled me to compare my earning to other jobs, which otherwise would be difficult. For example my brother in law was working in constructions, and he would be paid for a day’s work, which was significantly more then what I was earning in the warehouse, but he would not get paid for annual leave or overtimes, and his income would also be dependant on projects, which occasionally can leave you without any income. By gathering data for how many days I have worked and how much I got paid, I’m able to determine how much I earn per working day. For example today (16/08/2023) my “Gross Pay For Day In” is 149.88 £ for this ongoing tax year.

Daily averages example.

Flickerbook provides me with data and statistics in one place otherwise unachievable trough other apps, such as statistics of total days worked since my first employment in 2010:

My total days worked statistics for 13 years.

or my hourly rate comparison to the national minimum wage:

My hourly rate comparison to national minimum wage.

or a back pay calculator:

One year back pay on 5% pay rise.

And there is more to this web app, but I just picked some of the examples to demonstrate. In summary this web app helps me to:

  • Track working hours.
  • Calculate earnings.
  • Spot discrepancies in pay.
  • Manage my work calendar.
  • Enable me to track holidays.
  • Allows me to calculate back pay.
  • Enables me to compare my earnings to other jobs.
  • Provides charts and other statistics about my work related data.

What I learned while developing Flickerbook

I remember that at the very beginning most of the coding was done with JavaScript: even all the calculations, and I only used PHP at the back end to fetch the data from database and send it to front end. This approach made the JavaScript file grow tremendously, and I realised it is not wise to send raw data to front end and do maths with JavaScript on user’s device, instead I moved all of the calculations to back end and would only send results to front end afterwards. And this is just one example of how over time you can pick up a more efficient approach. I have now refreshed my SQL skill, and I can see that some of the maths done with PHP could have easily been queried against database (for example I calculated averages with PHP when I could have used an SQL AVG() function instead).

So developing this web app helped me not only learn some JavaScript, PHP and SQL but also help to understand the separation between front and back end, which I did not possess at the start of this project.

It also improved my HTML5, CSS, and jQuery skills, introduced me to Bootstrap, Ajax, JSON, ChartJS, CanvasJS, third party API’s like reCAPTCHA or Stripe.

Since I used a lot of for loops, arrays, and objects so it also helped me become comfortable with them, as most of the communications between back and front end is done via AJAX where I send a JSON string filled with arrays, that contains objects and other arrays.

In summary I improved on these skills:

  • JavaScript
  • PHP
  • SQL
  • JSON
  • Boostrap
  • jQuery
  • HTML5
  • ChartJS / CanvasJS
  • reCAPTCHA