StageMaster / JFS-Tech

Let's take ourselves back to the end of 2021. I was in Year 11 at JFS School and we were in need of a system to organise our "PropStore".

When speaking to our AV Technician, we both agreed that something was needed, and it didn't look like there were any systems which the school would willingly pay for that suited our needs, and so, I went off planning a new project: "JFS Tech".

At this time in my life, I had not yet been introduced to Next.JS/React, but had decent knowledge of HTML, JavaScript, and CSS - So, I decided to use this as an opportunity to learn PHP. At the time, I thought this was a brilliant idea, but looking back, I would have done it differently.

PropStore (by JFS Tech) (2021)

I started off by creating a basic system which allowed users to add, view, and delete items from a database. This was a great start, but I soon realised that I was going to need to learn a lot more about PHP to get this to work the way I wanted it to. And so, still not knowing about Next.JS/React, I decided to continue with PHP, but, re-creating my project under a new name (from "PropStore Systems" -> "JFS Tech").

JFS Tech (2022)

This new project had come with a new design, new way of doing things, and a new mentality: It was not just about logging items to the database, but also about requesting items, and ensuring that the website had everything that I wanted, not just what was easy and possible. This was a great learning experience, it was my first timg using PHP, and my first large project. I learnt that I needed to plan my projects, and design components and pages before implementing them so I knew what they should look like. At this point, I had created:

• A working authentication system
• Inventory System:
  • Creating items
  • Viewing items
  • Deleting items
  • Editing items
  • Requesting items

The Problem

The problem with this project was that it was slow, not very user-friendly, maintainable, and it was not very secure. I had to do something about this, and so I started researching new technologies and frameworks that I could use to improve my project. It started with exploring PHP frameworks, but I soon realised that I wanted to learn something new, and so I started looking into JavaScript frameworks... and that's when I found Next.JS.

JFS Tech / StageMaster (2023)

It was the 1st of January 2023 and I was at home doing nothing. I had been researching Next.JS for a few weeks now, and I had decided that I wanted to use it for my project. Some context about me that I always learn best by experimenting and creating, and so, I created a new Next.JS project and started to build my new JFS Tech website from scratch. At this point, I hadn't understood the concept of components, and was therefore copying and pasting code all over the place.

After a few weeks I had managed to create:

• User Management (Using next-auth and a MongoDB database)
• Inventory System:
  • Creating items
  • Viewing items
  • Deleting items
  • Editing items
  • Requesting items

Finally we arrive at the summer of 2023, and I had a working system which hadn't been tested fully, but was lightly used within JFS Tech. I had learnt a lot about Next.JS, but this project didnt use components and was not very maintainable. I felt that it was necessary to re-create the project to allow for expansion and better development, and this is where the current StageMaster codebase comes from (although the project was not called StageMaster at this point).

New Libraries / Utilities

It was when starting this project where I found new libraries and utilities which I hadn't come across before, and I started to use them in my project. These included:

• shadcn/ui (UI Library using TailwindCSS)
• clsx (Utility for constructing class names)
• react-hook-form (Form validation library)
• next-auth (Authentication library)
  • I had already used this but re-implemented it in a more secure and maintanable way.
• date-fns (Date utility library)

I also started to use TypeScript in my project, and I found it to be a great addition to my project. It allowed me to catch errors before they happened, and allowed me to understand my code better.

As well as this, Next.JS App Router was released which required me to migrate the project to using server and client components.

Starting the Project

When starting the project, I knew that I wanted to change the name, so I came up with "StageWorks", designed the branding (similar to StageMaster now) and began creating my project with this new brand name... but soon I realised that there was no need to change to a new name, and that JFS Tech would work as it:

1. I already owned jfstech.uk
2. I had already created a logo and branding for it
3. This project was probably only going to be used by JFS School

Which is why I reverted to "JFS Tech" and replaced all the "StageWorks" branding with "JFS Tech" branding. After that, I started creating components, pages, and the backend for the project. I knew that I wanted to create an API that was documented better and available internally and externally. I also wanted to create a system that was easy to maintain and expand, and so I started to create components and pages in a way that allowed for this.

Skip to September 2023 and we were back to school! This meant that myself and friend in the year above were directing our musical: "West End: The Medley" (Musicals Medley). At this point, I hadn't finished creating the project and didn't have a stable version of the application to use! Whilst this wasn't a major issue, it meant that we weren't able to organise our PropStore as well as we could have. The show pulled me away from the project for a few months, until the end of 2023 when I was emailed by 1: A potential investory and 2: A potential user of the system. This was the push I needed to get the project finished and released... but... it meant that I had to move away from using "JFS" as it could be used by other schools and organisations.

Rebranding to StageMaster

I approached by business teacher to ask for suggestions and this is where StageMaster was born. I had to rebrand the project, and so I started by creating a new logo and branding for the project. I soon realised that the upside to using components and a well-structured project was that I was able to change the branding of the project in a few hours, and so I did. I then continued to work on building the project, and that brings us to the present day... Where unfortunately, I am still working on the project, but it is almost ready for release!

Thank you for reading about my journey with this project, and I hope that you are able to use StageMaster in the future!