#5: Front-End Web Development

I started developing the first website that promotes our application during the Hackathon. I first had to design the website and then code the website out using whatever technologies that can allow me to code the site.

The first prototype of the website looked like this (was coded out during the Hackathon):

old web design

I was only planning to code the front-end part out, since I only started grinding the website on the second night (the time before that was spent on designing the UI/UX). To do this, I made use of front-end languages: HTML5, CSS3, and a little JavaScript to optimise and clean up some of the code. The website was mainly static.

After the Hackathon, I spent time designing the website on the third sprint and developing the website on the fourth sprint. During this time, I tried to learn a little AngularJS and NodeJS to code out certain features (such as a search bar feature that connects to Firebase).

The new designs looked like this:

new website design

I started off this project as an AngularJS project. Doing so made me realised that AngularJS was overly complex for a small-scale project like this one was, and had pretty slow performance issues with what I already coded. I scraped that project, and decided that plain JavaScript and jQuery would probably be easier, and decided to leave using new frameworks to next releases.

I coded the front-end portion of the website using HTML, CSS and JavaScript, and then went on to do the back-end portion (will be explained in my next post).

Personal Notes

I could've used a different framework than Angular (like React, which would probably be better), so a learning point I took away was to actually do more research on different frameworks before choosing one that suits my application better.

Wan Ning