Pan-Lang

Inspiration

Kevin currently volunteers at the Mckinley Foundation Food Pantry at the Garden Hills Academy. He noticed that there were communication barriers between the pantry coordinator and the non-English speaking people. The coordinator needed a translator to ask general questions, like the number of adults or children in the family. Additionally, the food pantry is currently in a non-contact operation because of the COVID-19 pandemic, so the coordinator must take an order for the patrons receiving food on other needs such as diapers, selection of meat, feminine products, etc. and tell the other volunteers to gather these items. Our team decided to tackle this problem by creating a webapp and helping the coordinator with direct translations of the "other needs" items for multiple languages, while also keeping track of the stock of the food items.

What it does

Pan-Lang is a webapp that is able to check in patrons receiving food from a food bank to record for the local food bank. While checking in, Pan-Lang is able to provide translations for food items that the patron can request, and keep track of the stock of those items. Pan-Lang is also able to detail which patron's order has been fulfilled. To account for coordinators not wanting to use our application because of technological hurdles, we also created a paper version better than the current version to include the technologically uninclined.

How we built it

We started with MongoDB as our database to keep track of the patrons, order item translations, and stock. Our frontend is built with React so that any device able to access the internet is able to interact with our application. The frontend communicates with an API we built using Node.js and Express to make requests to post, update, and get data from MongoDB. If our frontend is posting a stock item, we also send the stock item to the Google Translate API and get back translations in Chinese, French, and Spanish. On update and get requests, our API connects with MongoDB to store or change the data. Our API is hosted through Heroku. Throughout our entire frontend development, we kept inclusivity in mind by thinking of how our user interface would interact with either the coordinator or patron that did not know how to use the app.

Challenges we ran into

The backend developers were completely new to creating an API and hosting it. Both of them, Kevin and Katie, did not know Node.js, Express, or Heroku at all, and setting up the project for a "Hello World" application was already quite laborious. As well, this was our first project with MongoDB, so understanding the data structures was a hurdle for the whole team. In the frontend side, working with Socket.io and connecting to the API was a difficulty because of both the novelty of building our own API and the organization of Socket.io. One of our frontend developers has had no experience with React before, so switching from HTML/CSS/JS development to the React framework was a large transition. Finally, 3 of our members have never fully worked with Git and branches, so coordinating pull requests and reviewing code was complicated at first.

Accomplishments that we're proud of

As a team, we’re proud of the fact that we were able to put together a functioning, full-stack web application even though most of us had very little prior knowledge of web development, API, and database management. We are also excited that this application has the ability to help and impact those in our local community. Finally, we are very proud of our workflow and how organized our tasks were as well as the project organization through Git.

What we learned

We learned how to organize a database through MongoDB, and discovered how to host an API through Heroku. We learned how to build an API with RESTful operations, and how to connect operations on the frontend to the database through this API. Importantly, we learned how to manage our code through Git, branching, and merging. Our frontend learned React and dove deeper into its functionalities.

What's next for Pan-Lang

Currently, our application only has one database for the Mckinley Foundation Food Pantry. We would like to expand this so that other food pantries would be able to use this application. As well, we would be able to support more languages than just the three that we have right now. Many of the database operations also need to be optimized so the webapp doesn't slow down.

Dancing Bread

Built With

Submitted to

PYGHACK 2020
- Winner Second Prize

Created by

I worked on the backend for the stock endpoints for the API. I gained experience in using and navigating MongoDB. This was my first time using Node.js and Express, as well as MongoDB. I, along with Katie, created the API that the frontend communicates with. I gained the ability to create a RESTful API. I also developed the Socket.io section to create a semi-realtime database connection with Mongo to keep track of patrons' orders, which was an alternative to the RESTful API.

Kevin Zhou
I worked on the backend for the people endpoints. I developed part of the API that the frontend communicates with, as well as maintaining/manipulating the patron database and adding a feature to allow users to download a CSV file with patron information gathered from the database. Similarly to Kevin, I also had no prior experience in web development. I learned how to make HTTP requests, write to and read data from MongoDB using queries, utilize JavaScript and JSON objects to represent data, and use and setup Javascript libraries like Google's Translate API.

Kathryn Sanders
I worked primarily on the frontend with React and helped plan the backend. I've been pretty into React recently so this was a great opportunity to develop those skills even more, especially working with both a REST API and Socket.io!

Renzo Ledesma
I worked on the front end for the UI/website. I developed the prototype for the web app and made graphic design choices for ensuring the best possible user experience. While I have some prior web development experience in HTML4 and CSS, my main challenges for the project were learning HTML5, Javascript and React from scratch. In the end, I learned how to develop web apps with React and manage data from our project's backend as it became available.

Evan Matthews
CS + Music student at UIUC