This project was done as part of a requirement for a module I took in SMU, Web Application and Development II (WAD II). It is the school’s introductory module to webpage and frontend design, and it was also my first touch point with a frontend framework which was VueJS in this case.

The team came up with the following problem statement.

“There are a limited number of basketball courts, and players will either have to share the courts or join a pickup game. However, there are currently no reliable avenues to facilitate this. It is therefore a common sight to see players heading down to multiple basketball courts to check the availability of games and courts.”

“To organise this fragmented network of basketball games in Singapore to help users better visualise the availability of courts/games and reduce wasted time.”

Our resources can be found in the Github source code’s README, or be accessed in the following links

• Video demo
• Figma overview
• Deployed application (may not be working properly): Use “ts@gmail.com” and “Password” to log in

The requirements for this project were fairly straightforward.

• Identify any specific problem / pain point
• Make use of data from at least one API within the application
• Make use of a frontend framework (such as VueJS)
• Make use of a CSS framework (such as Bootstrap)
• Application must be responsive, i.e., mobile-friendly

For this project, we used the following tech stack.

• VueJS : Primary frontend framework
• TailwindCSS : Primary CSS framework
• ChartJS : Displaying activity charts
• Firebase : Database with free plan, beginner-friendly and fast and safe hosting
• Google Maps API : Retrieving court locations in Singapore
• UI Avatars : Creating default avatars
• balldontlie API : Retrieving NBA players data
• NodeJS : Backend server

By entering an area, or clicking on ‘Courts Near Me’, users will be able to easily visualize and select a court on the user interface. This is made possible using Google Maps API.

import { computed, onMounted, onUnmounted, ref } from 'vue'
import { Loader } from '@googlemaps/js-api-loader'

const GOOGLE_MAPS_API_KEY = '<YOUR_API_KEY_HERE>'
export default {
  name: "CourtMiniMap",
  props: ['courtObj'],
  setup(props) {
      const currPos = computed(() => ({
        lat: props.courtObj.location.lat,
        lng: props.courtObj.location.lng,
      }))
      const otherPos = ref(null)
      const loader = new Loader({apiKey: GOOGLE_MAPS_API_KEY})
      const mapDiv = ref(null)
      let map = ref(null)
      let clickListener = null
      onMounted( async () => {
        await loader.load()
        map.value = new google.maps.Map(mapDiv.value, {
          center: currPos.value,
          zoom: 15,
        })
        let contentString = `<p>${props.courtObj.name} <br/><br/> ${props.courtObj.vicinity}<p>`
        const infoWindow = new google.maps.InfoWindow({
          content: contentString
        })  
        const marker = new google.maps.Marker({
          position: currPos.value,
          map: map.value,
          icon: '',
        })
        marker.addListener('click', () => {
          infoWindow.open({
            anchor: marker,
            map,
            shouldFocus: true,
          })
        })
      })
      onUnmounted( async () => {
        if (clickListener) clickListener.remove()
      })
      return { currPos, otherPos, mapDiv }
  },
}

Users will be able to visualize the current traffic of people who have checked in at a specific basketball court, and thereafter decide if they wish to create, join or leave a team as they see fit. Users are also able to separately bookmark a court should they foresee themself visiting the court again in the future.

Frequent ballers and regulars have the option to form a community to facilitate organizing and scheduling of pickup games. There is also a message board which acts as a announcement broadcast for members within a group.

This was my first full-stack development project done in SMU, utilising a frontend framework such as Vue, and also me and my team’s first time developing a responsive web application that is both web and mobile friendly.

In order for all team members to be aligned, the importance of a single source of truth (with respect to design and documentation) cannot be stressed upon more heavily. My team and I were inexperienced when it came to collaborative coding projects, and our first (and most major) mistake was to start coding ASAP without finalizing the design and requirements, which led to many hours of debugging, fixing bugs, and wasted work done.

Having said that, overall, this was a pretty fun and interesting project, from ideating all the way till the first release and demo day.