CS3216 at NUS

CS3216 is one of the National University of Singapore, School of Computing’s (SoC) flagship modules. Officially known as Software Product Engineering for Digital Markets, this module gathers some forty of the best and brightest from across Computing, Business and the Faculty of Social Sciences to work in teams of four to bring to market three full fledged web applications in the short space of 13 weeks. It is intense, tiring and demanding, yet extremely rewarding at the same time. Some of the alumni of this module have went on to found or work for famous startups in Singapore and abroad.

I took this module in AY16/17 Semester 1, from August to December 2016. The module has a blogging component, where each of us write about our experience with the module every week. You can find these as posts under the CS3216 tag on my blog.

Assignment 1: Facebook Application Would You_?

The assignment: Build an application on game incorporating Facebook API (Facebook login, sharing, timeline posts, open graph API and more) in four weeks.

Our app: Bring popular party game Kiss, Shag, Marry to Facebook, pitting players against not only famous celebrities, but also your own friends on Facebook.

The stack: Traditional server-side rendered application. Django on the backend, PostgreSQL for database. Bootstrap with a bit of jQuery on the frontend.

I was the project lead for this project, contributing about 80-90% of the code and handling almost all technical aspects of the project, from server admin, database design and backend coding to frontend coding, Facebook integration and interactive design.

The main challenge of this project was picking up our framework of choice, Django, while juggling both the front and backend of the project. Switching between Python, JavaScript and HTML + CSS was difficult enough, but the hardest part was thinking at different levels of abstraction simultaneously, while keeping them separate to ensure loose coupling between different components.

In addition, our application demanded a somewhat unique data model that was difficult to handle using a traditional relational database. In the end I denormalized several columns, trading data integrity at the database level for schema complexity.

This was also the first time I built a game, and ensuring the game was actually fun to play required several rounds of playtesting. Although the game looked simple on the surface, the interaction was fairly complex. Using responsive design principles, I also had managed to make the game mobile friendly.

Assignment 2: Application Critique Paper + Pencil by 53

The assignment: Critique any app that was released in the last three years on the basis of its user interface, marketing and monetization strategy, and technology to gain insights for our projects. The presentation is done in 20 slides with 20 seconds per slide.

We chose Paper and Pencil by 53 because we found it to be a rare example of hardware and software that fit their chosen platform perfectly. We dissect what makes Paper’s user interface enjoyable to use, how 53 created a small but active community around their app. Our team also looked at their hardware, the Pencil, how it complements their software and how it compares to the Apple Pencil, which was introduced two years after the Pencil.

City Layouts by Luis Dilger

Assignment 3: Mobile Web Application PinPoint

The assignment: Build a progress web app on mobile platforms using the latest HTML5 API and a cleanly separate client and REST server architecture.

Our app: Use augmented reality and 3D map to allow people to find each other more easily in the urban landscape.

The stack: Ruby on Rails with MySQL databse for the backend API, Vue 2.0 on the frontend. Three.js for rendering augmented reality markers and Open Street Map Buildings library for 3D buildings map.

For this assignment I was frontend lead. I selected Vue 2 as the frontend framework of choice, taking on the role of integrating two very large libraries - Three.js with the ThreeVR script, and OpenStreetMap Buildings (OSMB) - into our project. In addition, I created much of the user interface for the AR part of the app, and worked with the backend team to synchronize state between the client and the server.

The main challenge I faced for this project was designing an effective UI for AR. We took inspiration from more traditional mapping software like Google Maps as well as role-playing video games like Skyrim, where the game used quest markers to help guide players around their three dimensional maps.

Other challenges include dealing with bugs in external libraries. OSMB is a large library with few maintainers, which means there are a number of bugs hidden in the library. We encountered some of this during the building of our application. For this Chrome’s remote debugging capabilities were used to great effect, enabling me to debug the app while it is running in the environment of the phone.

In addition, because we were working with cutting edge technology in our app, some of the APIs are not mature and are not universally compatible. We hit major roadblocks with the WebRTC getUserMedia API and the device orientation API, which resulted in us switching to our hybrid 3D map and AR strategy rather than our original plan for an AR only app.

Final Project A*genda

The assignment: Make. Epic. Shit.

Our app: Bringing event planning into the 21st century by building an easy-to-use agenda builder for event organizers and attendees.

The stack: Django and Django REST Framework with PostgreSQL for the backend API, Angualar 2.0 for the frontend. Twilio and Mailgun were used for notification.

Working with local event tech startup Jublia, our task was to construct a prototype agenda building application for both event organizers and attendees. Many non-tech events today, even ones with budgets in the millions rely on suboptimal tools like Microsoft Excel to produce their event agenda. We set out to build something better, something that event attendee can plan out sessions they’re interested in advance, carry in their pockets, and receive updates to the agenda in real time.

For this project I took on the role of backend engineer initially, then frontend engineer as the project neared completion.

For the backend I used Django and Django REST Framework, which allowed me to build the API in a short two weeks. I also used Apiary to document the API, enabling the frontend developers to build the frontend against the API without the API being ready. The backend API comes with a full suite of tests which enabled the API to be developed without having to wait for the consumers, and allowed for the code to be refactored and updated throughout the project with full confidence that the code is free of bugs.

Two weeks before the final project presentation at NUS, I switched to working on the frontend and picked up TypeScript and Angular 2. Our frontend design was inspired by Google Calendar and Trello, and featured an easy to use drag and drop interface for planning out sessions in an event, and to send notifications to event attendees whenever the agenda is updated.

Event attendees can bookmark sessions they’d like to attend in advance so each agenda is customized, and get notified when sessions change and before their sessions start.

On the whole I’m proud of my work in the project and what we managed to produce in the short six weeks. At STePS, the School of Computing Term Project Showcase, we presented our project, and despite being the only team to work on a B2B app out of the twn CS3216 teams, our app was still well received by industry professionals and guests.