Red Squirrel Studio

The Idea

During my education leading up to the end of University, I had worked multiple shift based jobs and had used a variety of HR solutions. I'd found that in all three companies, there was never a simple solution to booking overtime and holiday with 2 of the 3 just providing a paper rota in the workplace that would show available hours. Whilst this was fine for full time workers, most part time shift workers would not be able to apply for the overtime they wanted as they would not be in to grab it. This has become more of an issue with the Covid-19 pandemic where most people are starting to work from home. Therefore, I came up with the idea of making a simple to use mobile web application employees could use to manage their working hours.

Do others have the same issue?

Before setting out to create the application, I first put out a survey to research other people's opinions on the matter. I found that over 50% of work places don't advertise their overtime hours or do not advertise them online meaning there could be half of required hours not being filled. This means that businesses cannot run with the required number of staff in place and employees cannot get access to as much overtime as they would like.

Branding the Application

When designing the brand for the application I wanted to convey both professionalism and a relaxed atmosphere. I went for a cold but bright colour scheme of purples and blues with Raleway as the main font face which I think looks modern but still business like. I then created a simple logo that gets the point of the application across with a small clock graphic and the name of the app in Open sans a popular sans-serif font.

The tools

For this project, I wanted to use different frameworks to what I'm used to so that I could broaden my skillset. I decided to use Express.js, a framework for Node.js and React.js which I had only used to build native applications with before. Using this combination would throw me into the deep end of using solely JavaScript in a full stack project as is the case for a lot of developers nowadays and using them both improved my JavaScript skills as they require use of classes and objects much more than I'm used to.

Using what I'd learned

I was pleasantly surprised when I started writing the React front end application as it was very similar to the apps I had built using React Native. For example, when building the authentication handler I adapted some code from one of my native applications which would grab the user and token from a redux store and swap out two sets of views depending on whether they were present or not.

Working with MySQL in Node

I decided with this project to use MySQL as the database for the backend because of two reasons:

I didn't want to overload myself with new technologies while building the app.
The way the app works suits a relational database more than a non relational one because of the different related attributes.

However, the library for interacting with MySQL within Express is quite verbose and would result in masses of code for simple actions so as a side task I wanted to build something similar to Laravel's Eloquent within this library.

I've decided that I do want to continue building this aspect of the app and that I will end up publishing it to NPM as a library for others to make use of as well as myself when I create other Node applications. The class I build includes functions such as All, find, where, with and delete which take in the table as an argument rather than using models. Each of these functions execute an SQL query and return results in a promise meaning they can be ran asynchronously. This made for a cleaner code base within the controllers handling the application's logic.

Backend Structure

The application uses routes, controllers and views with sub routers for different sections of the application. These routes then create new instances of controller classes and call the required function. The application doesn't use models but rather directly interacts with the database but in the future I would like to explore ways to implement models into node and potentially merge it with the library I'm developing.

Building the admin panel

To build out the admin panel, I used Handlebars as the templating language and Bulma CSS as the styling framework. Using the two I could easily display all of the application's data and build simple forms for administrators to manage the data. Handlebars is quite similar to Laravel Blade but lacking some features that I needed to implement myself by creating handlers. For example, I created a route checker that would check to see if a link was active.

Using Handlebars was a fantastic choice as it provides various methods for generating views such as:

Partials allowing you to seperate pages into page parts.
For each and if statements to loop out or conditionally show data.
Handlebar notation to render data onto the page.

Again it is quite a similar work flow to working with blade so I felt at home building these templates.

Flash Notifications

I wanted to create notifications that show up after creating, updating or deleting data so built a handlebars partial that would accommodate this. This code would check within temporary session data for notifications set in controllers. If so, it would show them in a relevant colour.

The same thing can be used in validation where I wrote functions to check that data given to store in the database was valid. If the function returns an array of errors, I can flash the errors to the admin panel to let the administrator know what they'd done wrong.

Auth Flow

For the application's authentication I used JWT auth tokens. Node.js has a JWT library which I could use to generate and verify them but other than that I built the auth system from the ground up. The way it works is when someone logs in, a new JWT refresh token is generated and store in a database table with an access token. Within the hash of the token the id for the user is stored. Once the access token is supplied to the user, it is added to axios requests as an authorization header which can be decoded to get the user Id in middleware between controllers.

Using React

When using React for the front end, I carried over a few techniques from older applications such as using a global functions file for repeated tasks such as building form data. For this project I also learned that SASS can be used quite easily with React simply by importing the base SASS file without need to compile it into CSS. React is quite good for making smaller web apps like this and I think I may build more in the future as I prefer Vue when working with either a full Nuxt application or as individual components in a framework like Laravel.

Furthertime