Zenith Transit

Problems to be solved

Many times during last semester lost my student card (which is also my bus pass) unexpectedly and nowadays people rarely carry cash, so it will be an awkward situation that I should ask the bus driver for forgiveness. Additionally, when I was on travel I sometimes also forgot my transit card and purchasing a new transit card is not only costly but also environmentally unfriendly. However, most people nowadays will have a phone or tablet on them and if we can use it as the bus pass it will be much easier and more convenient.

What it does

The app can show a QR code that can be scanned when the client boards the vehicle. Users can load passes or balance to the app. Users will also be awarded points for riding public transit. The app also records the riding history of the user and can be reviewed easily. We also built a dashboard platform for the transit operator or the city government to review user behaviour and improve public transit quality. A GPT-powered AI data analyzer is also implemented on the dashboard so the operator or government can get advice for handling data.

The QR-Code is static; this means that the QR-Code won't be updated over time. Thus, if the user does not want to use the app as the transit pass for privacy issues, they could still use the physical card: they can print out the QR-Code and scan it when getting into the vehicle.

How we built it

This system has 4 parts: a user app, a vehicle terminal, a dashboard for the operator, and a backend server.

User App

I used Ionic React to create the User Interface which I tried to give a simplistic and easy-to-use design. I used several Ionic components like buttons, cards, lists, grids and icons in the process.

Vehicle Terminal

For better compatibility and easy-to-build, the terminal is a web-based page built using Ionic and React. It uses a js package that can stream video from the camera, when the button is pressed, the library will encode the image as base64 and send it to the backend for validation.

Dashboard

The dashboard is also implemented using React and Ionic. It sends a request to the server to get statistics charts and the GPT data interpreter’s response.

Backend

The backend is implemented in Python using the Fastapi framework, and it uses Redis Cloud as a SQL-less database. When the image of the QR code is received, OpenCV is used to decode the image. For the data visualization part, we used Python and its several libraries like Seaborn and Pandas. The GPT data interpreter is implemented using OpenAI’s official API.

Challenges we ran into

During the end execution, some parts were functioning in sync since we initially didn’t test them, thus it was rather difficult to pinpoint the exact trouble-making component. Also, both of us had different Ionic React models which caused a bit of delay. During the filming process, it was difficult to show the numerous features in such a small amount of time. We are very new to SQL-less databases, especially Redis and Redis Cloud.

Accomplishments that we're proud of

We implemented several different languages, packages and APIs with very little prior knowledge. We also made sure this application is accessible to all since we used audio queues for people who don’t understand English and we used data visualization for people who like to interpret charts and GPT-induced summaries for people who prefer to read the details. We also finished the project in an extremely short time with physical fatigue and only 2 members.

What we learned

Ashar learned to implement Python's exhaustive library for data visualization and also learned to implement several different Ionic react features like Grid and State, while also adjusting to code in a new environment like Colab. Wenqi learned how to lead a team-based project: including the tech side (tools like GitHub, Google Colab, etc.) and non-tech side (such as how to lead the team and how to help teammates write code). Wenqi also learned how to use Redis Cloud as the database and how to use OpenAI API.

Author Contribution

Wenqi

Wenqi proposed the idea, led the project, and helped Ashar in the development. He also implemented most parts of the backend and the bus terminal.

Ashar

Ashar did the Python data visualization and created the user app interface using Ionic React, he also proposed the domain name.

Acknowledgment

We want to thank OpenAI for providing the GPT API. Additionally, ChatGPT was used to brainstorm and aid small parts of the code. Thanks for advice about ui design

https://github.com/weathon/face-bus