Snapback Web Application

Project Files


A project for the Web-based Systems course

Web-Based Systems taught me the basics of web-based systems (including relevant technologies and programming languages) not only in the classroom, but through a semester-long group project intended to educate us in the design and creation of web applications. The aforementioned web application had to fulfill the following list of requirements:

  1. Client-side Component
    • Majority of your application's functionality must be accessible through a single-page interface.
    • Your client side must be implemented using HTML, CSS and JavaScript technologies.
    • You are allowed to use any open source libraries in your implementation.
    • Your application must run in Google Chrome and Mozilla Firefox on desktop, and at least one mobile browser.
  2. Mobile support Component
    • Your application must be usable on mobile devices.
    • You can choose one of the following mobile strategies: mobile friendly or mobile first.
  3. Server-side Component
    • Most of the "business logic" should be performed on the server.
    • You should think of the client side as the GUI frontend for the server component.
    • In order to achieve this requirement, your implementation will have to rely on heavy use of JavaScript, combined with asynchronous communication with the server via Ajax or WebSockets technologies.
    • The server-side must be implemented using Node.js.
  4. Multiple Users Requirement
    • Your application must support multiple simultaneous users.
    • Your application should implement at least a very basic user authentication.
  5. Persistence Requirement
    • Your application needs to demonstrate persistence capabilites.
  6. User Interaction Requirement
    • Users must be able to interact with other users of the system.
In order to build a web app that meets all the requirements, we decided to do a combination of a learning management system (e.g. Desire2Learn) and a classroom interaction tool (e.g. Tophat). The result is a web app focusing both on a modern, streamlined access to course materials and a welcoming environment for students to pose questions.

Each team member was assigned a specific section of the web application to develop. We held weekly meetings to monitor each team member's progress. I was in charge of the Login and Registration pages as well as most of the backend tasks such as the database operations and setting up and designing the Node server.

Our web application used a lot of the technologies we learned in class, as well as technologies that we searched for that fit our needs. For the framework, we utilized Node.js and Express. For the frontend, we implemented it using JQuery, Bootstrap, connect-flash and EJS. For the bidirectional data transfer, we used a WebSockets library called socket.io. For our authentication, we implemented it using Passport.js. Finally, for our NoSQL database, we used MongoDB and Mongoose.

A live version is available here.


Recreation Centre App

Project Files


A project for the Human-Computer Interactions Course

At the start of the course, our team decided to develop a recreation centre app. We chose this project because we wanted to explore the idea of making a mobile application that improves upon the services that the website of the University of Calgary Recreation Centre provides. The project consisted of four parts. These parts include user research, ideation and creation of lo-fi prototypes, formulation of a hi-fi prototype and conducting of heuristic evaluations, and presentation and demonstration.

The first part was user research where we gathered data from our potential users for our recreation centre app. We used some the IDEO methods for collecting this data. The methods we used were Fly on the Wall, surveys and questionnaires, and the synthesis of character profiles. We observed people's interactions while in the recreation facilities and identified our target users using Fly on the Wall. The surveys and questionnaires allowed us to interview and ask questions from our user base. This included questions such as which facilities do they usually use and what features do they look for in a recreation centre app. Finally, after collecting all these information, we utilized character profiles to help us build our app that would work well with our target audience.

Next, the second section of the project involved ideation and making of the low fidelity prototypes. We brainstormed ideas and had an affinity diagram session where we refined those ideas. We also created a storyboard and a video prototype to help visualize our app. The final design was tested by using a task-centered system walkthrough where we tried to simulate different tasks using the design we created.

The third part of the project was to create the high fidelity prototype. We used Android Studio and GitHub as tools to build the prototype. The app features a calendar and a new menu system. The calendar enables the user to manage bookings and also grabs information from the user's Google calendar. The new menu system allows the user to access the menu conveniently with either hand. After building the app, we conducted a heuristic evaluation to analyze its usability. This ensured that our application met the standards of usability of our users.

Finally, the last section of the project was to present our findings and demonstrate our high fidelity prototype. In the presentation, we showcased our findings we obtained throughout the project. Based on the heuristic evaluation, we delivered recommendations on how to improve the usability of the recreation centre app.

Your Life Counter

Project Files


An Android Application developed for the Software Engineering Course

First of all, we chose what application we would like to create based on a customer group. Then, to fulfill our requirements gathering, we asked them for their expected features for the app. From here, we decided to do the agile methodology for the project. We chose this because of the flexibility it provided in our development process. Customer involvement was also a desirable feature of the methodology as it gave us feedback on the look, feel and capabilites of the app. After our requirements gathering, our customers gave us five functional requirements for the app. These are:

These requirements, with the exception of the last one, were then implemented to the app. In order to do this, we first started on formulating a story map, low fidelity protptyping, storyboarding and use case scenarios to base our app onto. Our planning consisted of the Poker Effort Estimation method so that we could distribute the workload of the project in terms of tasks to the group member who can do it efficiently. We executed our tests using the Test-Driven Development Approach. And finally, in order to document our app, we used Structural and Behavioral modelling. These included UML diagrams which represented our app and sequence diagrams that described important use case scenarios. GitLab was the platform used for version control. Once we finished these steps, we - along with other groups - presented our android application in a semester-end presentation session. It was an enriching project because I was able to learn how the software development process works.

SnakeTRON

Project Files


A game developed as an assignment for the Computing Machinery II course

We used ARM Assembly and the Raspberry Pi Model B to create this game. We used the JTAG interface for flashing and debugging the program. The program itself relies on an SNES controller; however, the driver for this peripheral was made from scratch. On the course of the game development, we learned how to use the GPIO pins of the Raspberry Pi, how the interrupt works and how hardware and software "talk" to each other at the low level. Furthermore, we learned more about source control. In the end, the resulting program is a TRON inspired Snake game with decent graphics and engaging gameplay.

Medical Clinic Database Management System

Project Files


This project was created for the Database Management Systems course

This project was announced early in the semester. We started with proposal creation. From our proposal, we created an ER diagram to represent the database the user would manage. This ER diagram underwent many revisions throughout our planning stage. Along with the ER diagram, we made a Hierarchical Input Process Output (HIPO) model and Data Flow Diagrams (DPD). With everything ready, we went ahead and started coding the Database Management System (DBMS). Our languages of choice were mySQL, PHP and JavaScript. We used mySQL Workbench, WAMP/MAMP and BitBucket as our tools to make the project. My main role in the project was handling PHP and mySQL. At the conclusion of the project, we composed a Medical Clinic DBMS that implements these features:

Hackathon 2016

Project Files


A Hitachi-sponsored hackathon that lasted for two days

The hackathon's theme was "First World Problems". Later on in the first day was when we thought about which first world problem we should tackle. After an hour of brainstorming and discussion, we settled on the problem of many gamers: "How do I play with players that has a similar play style and skill level as me?" That is the basis of our app that we call the Friend Finder App. Now that we knew where we were heading, we set out to learn developing apps for the Android platform. Take note that this is our first hackathon and we have not made a single Android app before. We also tried doing version control, such as Git, but we moved on to do doing file transfers because we could not get Git working and we were running out of time. Our Day 1 ended with a working skeleton for our app. The next day we decided to start early. We kept learning about new things about the Android platform. As I worked on the framework and the interface, my groupmates were working on the data structure, test database and visuals. At the end of the day, the app was 75% complete. Finally, early on Day 3, we finished up our app by improving the visuals, polishing the rough edges and preparing for our presentation. polishing the rough edges and preparing for our presentation.

Flappy Turtle

Project Files


A Flappy Bird clone coded in Python

It is my first experience coding a game. Here, I learned the different basic data structures such as arrays, lists and dictionaries. I utilized the aforementioned structures to finish the game.