What does it take to code out a platform like SMUMods? For this edition of “Behind-The-Scenes”, join us in uncovering our development processes.
Our frontend process usually consist of a couple of steps:
To begin building a new feature, we first have to brainstorm to gather the requirements necessary. This is the most important part of our entire process. During this stage, the entire team will have to come together to think of the following questions:
What is our goal for this project?
How will our users (SMU students) interact with this feature?
Once we have answered the questions and drafted out the requirements, we then move on to the next stage of the development process.
We create our prototype using a web-based design tool known as Figma which is then presented to the team for evaluation. It demonstrates the basic idea of how the feature will look like, and what are the interactions/functionalities it comprises of.
During the development stage, we then transform the requirements from the previous stages into actual code. This includes the process of developing user-facing features, building reusable code for future uses, and optimizing them for efficiency/scalability.
Aside from development, we tend to deploy the feature into the staging environment for testing. This is to ensure that the feature works according to the specified requirements, and that the feature works flawlessly with other existing features on our site.
Subsequently, we will then submit a pull request (PR) on Gitlab, where other front-end developers will help to look through the code and see if there are any other issues.
Most of the time, we will help each other to refactor to code such that it is more maintainable and efficient. (left image: before, right image: after)
Once the code has been reviewed by one other developer and there are no site-breaking issues, the feature will be deployed to production where it will be live in the actual site.
The development process does not end with the rolling out of the new feature - unforeseen bugs can happen, and things could break. As such, we should constantly monitor the features to ensure that it still functions properly.
While it may just be a small feature, the overall process of building this feature was enjoyable and rewarding. We’ve learned and developed good coding practices that will help us to save time and write better code in the future.
(P.S. - If you like what we’re doing here, and want to support us - do donate the price of a cup of coffee so we can keep doing what we’re doing (and more). We pay for our servers out of our pockets at the moment. Every dollar counts! https://ko-fi.com/smumods. Thank you!)