FOOTY TIPPING

As technology is rapidly improving it was time to update the Footy Tipping Website.
However due to having a strong user base this projects completion strategy was very unique.

The user base have a strong desire to interact with the site, they want the experience to be fast & simple. Achieving these objectives at first seemed straight forward. However due to the users prior learning curve to interact with the platform, changing the entire UI & UX reduced the users ability to have a fast and simple approach.

Question: How can we upgrade the platforms structure while improving the users ability to interact fast & simply?

The answer was quite straight forward,
We rebuilt the entire systems architect. This included upgrading the back end infrastructure to enhance CRUD performance. And rebuilding the front end focusing on reusable components & platform consistency.

Tasks

1. Research Architecture
2. Set up code base foundations
3. Align team & set project roadmap
4. Support Team
5. Train Junior Dev

1. Research Architecture

This was a green fields project, which meant I could choose anything architecture to complete the project. The problem with this is that this decision can sometimes become overwhelming. Therefore I had to take a Principles First Approach

1. What would give the team autonomy moving forward without relying on their senior developers to hold their hand.

   1. To improve the teams ability to be autonomous we must seek to use NPM Packagesthat are very well documented & tested by many developers. Packages such as React, Vite, React Beautiful Drag & Drop,React Hook Form,YUP & Reduxare an example of this. This allows each developer to debug their code individually & if further help is required anyone else on the team can jump in to help.

2. What code patterns would ensure the code base is consistent across every developer.

   1. On this project every component had the same folder & naming structure. This is very important for everyone to follow to reduce bugs & improve readability.
   2. Doubling down on this we wrote the each component in the same order from importing to exporting. That way if anyone in the future looked at the code they would know where to find the specific function in every file.
   3. We relied on hooks & Redux to move logic away from UI Components. Improving the re-usability of the code base, rendering time & client side data.

3. How could the static content be updated simply by a non-coder in any language.

   1. The project scope was for English only, however to improve the future usability of the platform I wanted to ensure the site could be multilingual. So I developed a function that took in the keys of a JSON file as strings types that you could use as a static variable in each file. This reduces load time for repetitive words & enables the team to add in a language toggle in the future to toggle between JSON files effortlessly.
   2. These static strings used markdown to render the text ensuring all content was styled consistently.
   3. Then I wrote a function to enable dynamic content to be passed into a string if required
   4. By taking the time to do this it enables any non-coder to updated the platforms static content in the future seamlessly without affecting the any other file in the code base

4. What processes could be implement to generate consistent data types between the front end and the back end

   1. Using software such as Typescript is a must on new projects. We use it to describe to a component what type of data it should be expecting per prop. When the data types are generated systematically from the back end schema this guarantees the data type being retrieved from the API are correct & the front end will know a head of time how to handle null or undefined data correctly. Ensuring the code base will not crash due to a lack of data.

2. Set up code base foundations

Before the project can start the foundations must be laid perfectly as the remaining code will be stacked on top of this work. During this phase everything from the initial code base layout to the deployment pipelines are tested thoroughly.
Once complete I walk the team through the code base structure, explaining why I have built the foundation the way I have. At this point I ask the for their thoughts, sometimes there are new techniques that improve the code foundations.
It's crucial that everyone at this point has a thorough understanding of code patterns, processes & expectations. This will create the consistent code base moving forward

3. Align team & set project roadmap

When managing a team I like break up the project tasks based on individual team member strengths. I then give them the opportunity to be accountable for that specific section of the code base.

1. ⁠This increases overall focus as the team isn't switching tasks.
2. They will experience taking a feature from start to deployment, learning the entire development life cycle smoothly
3. We all practice task forecasting & being accountable for our work. Learning when to ask for help to ensure tasks are compete on time & blocking scope creep, ensuring tasks are completed consistently.

4. Team Support

I learned a simple framework by Leila Hormozi once which helps me to focus on how best I can help the team.

1. Have I told the team what to do & set expectations?
2. Have I shown the team how to do the task to expectations?
3. Have I explained why the task & expectations are important to the the project?

In the past I have found myself getting caught up in blaming the team for their performance & using this framework ensures I take full accountability in delivering support. If a team then isn't following instructions there is a clear breakdown in trust or process & this can then be addressed without emotion.

5. Train Junior Developer

We required more resources to complete the project & training up a junior developer was the chosen solution by Seventh Beam to help. This gave me a great the opportunity to focus on how to bring them up to speed quickly, so they too could start delivering value.

Due to our Front End Architecture I was able to give the junior developer a list of online Youtube tutorial that got their skill level up about 80%. Now their skill set foundations we up to date, I spent time using the built tech stack to demonstrate our code patterns & join the knowledge gaps they still had.

Hats off to all the effort Sam put in!
Within 3 months Sam had gone from a Junior to Senior developer in this tech stack!

Seventh Beam

Firstly words are not enough to describe how amazing the Seventh Beam team are! From culture to business leadership, you honestly couldn't ask to be apart of a better team.

Their ability to navigate tough managerial decisions during COVID taught me a lot about sacrifice, long term strategic thinking & employee relations. I look forward to my next contract with Seventh Beam as they grow into the future