Our team regularly plays at a badminton club which has a system of buying admissions, and we thought an app for the club host that simplifies the payment interaction would be beneficial.

At a certain community centre in Ottawa, there are badminton drop-in sessions that occur once a week. The entrance fee is ~$2.50, which can be paid by cash or card. Additionally, participants can purchase a laminated card, good for 11 plays (10 + 1 bonus), for ~$25.00.

We personally do not like to a large wallet around, with all the gift/loyalty/banking cards that have accumulated throughout the years, and thought that perhaps transferring the functionality of the laminated cards to phones of participants would be very liberating to our pockets.

What it does

An "admin" mobile app is responsible for using its NFC reader to read the unique codes of the NFC chips of participants' phones. Then, the mobile app will query a backend server for an account associated with the unique ID of the NFC chip that was scanned. If an account exists, another request will be put in to try and decrement the number of entries by 1. If the number of entries should become non-positive, then a prompt to remind the admin and the participant to add credits to that account will appear. If a new NFC tag is scanned, then a prompt will be provided to create a new account for that NFC tag, which will require the NFC tag code, email, and number of entries.

How We built it

First we tried using some NFC reader/writer code we copied from the internet in Android Studio, in Java. The project couldn't be built because the code was too old and we did not want to resolve the changes required to update to the latest API level. So we swapped to react-native, and thankfully, it had a very simple-to-use NFC reader npm module, that we quickly were able to get to function. With the scanning of unique NFC codes completed, we quickly started to create calls to the backend API. Finally, we stumbled a bit when it came to creating a lovely interface, so we just a UI good enough for a proof-of-concept.

Challenges We ran into

At first we used Android Studio to build our app, but realized react-native had an easier way to detect NFC, causing us to switch over to it. Unfortunately none of us were familiar with react-native, and this caused a lot of confusion and bugs. Creating a working UI from react-native was the most difficult task, along with figuring out how express http requests worked.

Accomplishments that We're proud of

HTTP Request Validator

What We learned

React-Native, Express, Firebase (is worse than psql)

Built With

Share this project: