Hackathon Experience — SwiftUI Jam

Last week, I had the fortune of a lifetime to participate in SwiftUI Jam- a one of a kind Hackathon where the main centric theme was building Apps using SwiftUI.

SwiftUI Jam — 19th-21st February

I almost immediately was awestruck by SwiftUI , the day it was introduced at WWDC 2019. SwiftUI is basically a declarative framework and provides an innovative way in order to build user interfaces for any Apple Platform.

I was glad to team up with Kevin Peng, Kornel Miszczak, and Neil Jain and our team was called Commanders. Best Thing about this Hackathon was that we built a state of the art product and our team had members from 3 different timezones(IST,CET,EST).

FRIDAY- 19th February

On the first day of the Hackathon, we set up a video call meeting where we discussed our App Ideas and everyone came up with amazing ideas. At last, we finalised on a Vaccine Slot Booking App Idea wherein the users can book COVID-19 vaccines from the comfort of their homes at their nearest Hospitals. We wanted to be highlight the fact that the general masses are now getting vaccinated we wanted to help more to this process. So we created BookMyVaccine.

The main features of our App would be-

1. Booking Vaccines

Users can look for their nearest hospitals, book the available time slots and select the type of vaccines they want and all this can be done with just a few clicks from this App.

2. Widgets

We have incorporated Widgets too with the help of WidgetKit and we display the total number of people getting vaccinated in a specific country with the help of the widgets as we wanted to be optimistic of the fact that we are slowly defeating COVID-19.

3. QR Code

Once the user is finished with booking his/her slot, we provide them with a QR code that is generately automatically with the help of their username.

4. Dark Mode And Light Mode

We have implemented this app in both Dark and Light Mode and users can choose either of the two according to their convenience.

We decided that Kornel would help us design our Custom API and Database, Neil would help us with widgets, and meanwhile Me and Kevin would take care of the UI/UX of the App.

We finally decided to make the Use Case Diagram and the Wireframes for our project.

Use Case Diagram

Wireframe

SATURDAY- 20th February

We started working on our tasks and kept reviewing and suggesting each other’s work to make sure things were going as we planned.

Some early prototypes for our project

Widgets created using WidgetKit introduced at WWDC 2020

SUNDAY- 21st February

We were finally ready with our Widgets, API’s and were about 80% into the final project.

For our API, We started working on the client and server side by side and successfully implemented our bookings API with the help of Node.JS . We have hosted our API on Heroku(https://swiftuijam.herokuapp.com).

A jist of our API design-

1. GET to check available timeslot.
2. POST to create appointment, send back a hash that can be made into a QR code.
3. GET to show time, location, vaccine info and hash after appointment is booked

How to uniquely identify each hospital - MapKit will find hospitals near you - MapKit will provide the coordinates of the hospital - When requesting to backend, send the coordinates, so backend will hash it and check records in the database - If two hospitals ends up with same hash, send 400 Bad Request.

PROBLEMS WE FACED

We had some issues in order to implement the QR code logic, and we didnt want to provide the QR code to the users who have not booked , so that was a bummer for us, but we overcame that problem shortly.

WHAT’S NEXT

1. Voice Over — We could surely implement a VoiceOver feature for the Differently Abled so that they can also easily access the app.
2. Scalability — Right now, our app only has a handful of data of few hospitals and time slots, we could surely add more hospitals of different cities and their time slots too.
3. OAuth which allows users to login functionality by using their Apple, Facebook, or Twitter account

TECHNOLOGY USED

• SwiftUI
• WidgetKit
• Node.JS
• MapKit
• Combine
• MongoDB

FINAL REVIEW

After making sure that things were in place and fixing some minor bugs, we finally went in with our project.

Here’s the link to our final demo — App Demo.

For more insight into our Project check out our Github Repository-Github Link

For the custom API of our project — Github Link

WHAT I LEARNED FROM THIS HACKATHON

This hackathon was a dream come true. It has surely developed my communication skills as I got to meet with new people and build a state of the Art Project. It also has enhanced my coding skills and project coordination skills as our team came up with a beautiful project given we belong to 3 different timezones(IST,CET,EST and IST and EST had a difference of about 10 hrs) .

Once again Thank You So Much for the amazing experience SwiftUIJam and my amazing team members Kevin Peng, Kornel Miszczak, and Neil Jain.