4. Front-end Development

Once the UI was ready, it was simply a matter of converting design to code. Since I preferred Vue.js to React.js (I know there’s a never-ending debate about this, but I just prefer Vue.js for its coder-friendliness), I used Vue CLI 3 to quickly create the Vue project with webpack support.

Pre-requisite knowledge

Prior to SMUMods, I have been prepping myself by learning vanilla Javascript, HTML and CSS to understand and gain full control of how elements look and behave and this was a crucial step. Having learnt from Team Tree House, I naturally started off with a mobile-first approach to UI design, and I used the same method when coding as well. Why mobile-first? By designing for the smaller screen, I could ensure that all of the essential information can fit and also, not depend on mouse events such as hover. I also assumed that most SMU students would be navigating our UI with their mobile phone, thus the added emphasis on mobile-first design.

SCSS

One thing I’ve learnt when developing the UI was the use of SCSS. My CSS was better organised and predictable, without nesting or writing a string of selectors i.e. “div:first-child .container p img”. Instead, everything will be organised and nested like this:

.container { > span { ... } }

Security

Security is another key concern. Which page should be public and which should be guarded against? By adopting the pattern where all pages are private unless otherwise specified, I used Vue router’s before navigation guard to check if the user has logged in and whether the page is public. This ensures that any new page will be private by default and I have to explicitly add a public tag if needed. I feel that this approach is much better because there is only a handful of pages that can be publicly accessed and it is always better to take precautions, especially when this repo might have more contributors in the future.

GraphQL

As an avid fan of Firebase, I was pampered with realtime database updates without writing much code. However, since Firebase was not ideal for my team, my coding partner Gabriel Chuan exposed his API via GraphQL. One thing I loved about GraphQL was the ability to choose the attributes you need from a result instead of fetching the entire object. Moreover, GraphQL is able to auto-update the UI based on the result if you grab the appropriate changes. GraphQL became more complicated for me when the result returned was a fragment, which require an Introspection Fragment Matcher to match whether the result is of one type or another (one of our result could be either Professor or Module). Although there was a couple of sleepless nights due to my unfamiliarity with GraphQL or Apollo or both, the documentation was helpful enough to wrap my head around. If you would like to know more about the back-end stack, head over to Gabriel’s blog about SMUMods to find out more!

5. Final thoughts

It has been a real journey from the start of 2019 when I started working on this project. I went on an exchange to Switzerland from February 2019 to June 2019, all while working on this project remotely. To ensure that Gabriel and I complete this project, we filed this under SMU IIE’s Student Entrepreneurship Internship programme, forcing us to meet a real deadline.

We decided to launch SMUMods a week before the start of the bidding period (1 July 2019), but we had to postpone since there were still many issues. We finally launched SMUMods on July 1st 2019. Weeks prior to our launch, Gabriel and I went on several sleepless nights to learn and apply our knowledge to the fullest.

After looking back and seeing how far Gabriel and I have come, we couldn’t have asked for a better internship. I will continue to update this post as we continue our development and as of July 8 2019, we have hit 1.3k users!

Looking ahead, we plan to release a couple of features and once they are out, I will release the next blog post in this SMUMods series!