Authors

Inspiration

The challenges that healthcare workers face today are unprecedented. Through several interviews with front-line professionals in our personal networks, we found a common theme; Healthcare workers do not have time to take care of themselves while they are on the frontlines of the coronavirus pandemic! They spoke about wanting relief from their daily regiment, and a chance to not have to think about the ongoing global crisis. In tandem, the team read about several local and enterprise corporations that are offering free or discounted products and services to healthcare and emergency workers; however there was no single source where said workers could go to easily find them. Enter Scouter.

What it does

Scouter is a platform that aggregates free and discounted offers and services targeted at healthcare workers and first responders.The app which is available on web, iOS, and Android features a simple and elegant interface that allows healthcare workers to easily find local deals. It also provides a platform for the public to quickly enter free offers and discount programs catered to frontline professionals. Scouter has both a map and list view and allows users to conveniently browse and enter deals using a stylish but simple interface.

How we built it

Scouter’s backend is built on AWS infrastructure. To create this infrastructure, including the DynamoDB data store, lambdas that interact with the datastore, and API Gateway resources that trigger the lambdas, we developed Cloudformation templates specifying these resources. The DynamoDB table that we created stores the discounts, which are created and accessed by the frontend applications via API Gateway and Lambda functions. One Lambda function we created retrieves items from the database, and another adds items to the database. API Gateway defines the GET and POST endpoints that trigger these Lambda functions respectively upon being called from the frontend application.

Scouter’s UI is built using React, Typescript, Material and Capacitor. We decided on this stack because our team is familiar with React and we thought this would allow us to hit the ground running. The UI is heavily dependent on many Google API’s to hydrate our app with the necessary data. The app is designed to be “mobile first”, meaning all components are designed to behave natively on any kind of device. Capacitor is a wrapper for our app that allows us to deploy a single code base to the web, iOS, and Android. Using Capacitor, we’ve the ability to create a PWA. We leverage the Capacitor APIs to gain access to the native functionality on mobile devices, such as push notifications, motion detection (using the device’s accelerometer), run background tasks, and much more.

Challenges we ran into

Our team has experience building traditional web services, but had no previous experience developing fully serverless web apis with API Gateway. Building these APIs presented a learning opportunity, but also a challenge in figuring out how to deploy and manage this infrastructure. Another challenge we encountered was to determine the data model for our backend. Both the frontend developers and backend developers needed to come to a consensus on this, and we needed a model that was flexible to handle all sorts of possible discount types. For example, we originally considered modeling a discount very formally, with a formalized field for the item being discounted, another field for type of discount (e.g. percentage or buy one get one, etc.), and several other fields to model the variations of these. However, after iterating on this for some time, we realized we could always come up with special cases that would break our model, and in fact we didn’t need, at least in this first iteration of our application, to have such a complicated model. So, we settled on putting all of this information in a free form string, as that would be what the healthcare provider would see anyway.

Our team ran into a few challenges while building out the UI. To start, we thought it would be a good idea to build our app using React Native. No one on the team had experience with it so we thought it would be a fun learning opportunity. About half a day in, we realized we were spending more time setting up local environments than writing actual code and decided to pivot and use React & Capacitor for a mobile friendly experience. Creating the assets for a Capacitor app was much trickier than one would expect. Getting the proper dimensions right for over 15 images was cumbersome. Connecting to our API also proved to be a slight challenge, as we had a Cross-Origin Resource Sharing (CORS) issue we had to overcome.

In addition, on the frontend, a design library, Material UI, was used to create different components and it was a new tool for some members on the team. Learning how to integrate a new library into the frontend for a clean user interface was a bit challenging since the usage is not traditional CSS. Taking advantage of Material UIs object oriented styling pattern made for cleaner code and more consistent CSS. Learning how to take advantage of it was a hurdle initially.

Accomplishments we are proud of

Despite the fact that our teams’ engineers are not mobile developers, our designer is not a logo designer, and none of us had prior marketing experience, we all banded together and created a product we were proud of. We feel Scouter has the potential to make a great impact on the lives of our healthcare and emergency professionals. Through discount programs and offers, Scouter may also help out local businesses who are also suffering during the COVID-19 crisis by way of free advertising.

Although many new technologies were introduced in the front end stack, we were able to help each other out and learn a lot while also developing a functioning application. The frontend and backend were hooked seamlessly together which required constant communication among engineers over expected data payloads. Since all of the team is 100% remote and are practicing social distancing, we stayed in close communication over chat and video calls to keep visions aligned and expectations clear. Creating a full app end-to-end without ever working together in person is a powerful testament to this new digital world we live in.

What we learned

The engineering team learned a lot from this experience. We learned about some very useful AWS services, including API Gateway, Dynamo, and Lambda on the backend. We also learned powerful frontend frameworks such as React Typescript, React hooks, Material UI, Capacitor on the frontend in addition to many of the available features of the Google Maps API. Given that none of us had much previous experience building mobile applications, we learned how to cross build mobile apps for both Android and iOS. Lastly, and perhaps most importantly, we learned the various difficulties that healthcare professionals are currently facing with this crisis, and what small ways we can help from the tech field, including by building an app like Scouter.

What's next for Scouter

PersonalizationScouter will have personalization features such as allowing users to create and modify their account profile. There they can favorite deals and discounts by category or geographic location and have the ability to opt for push notifications based on their favorited criteria.

Automatically add dealsScouter will scrape the web for freebies and deals, automatically adding it to the application.

MarketingA small team of volunteers will search for and curate deals with local businesses that wish to contribute deals and programs for Scouter in exchange for free advertising.

Incentive ProgramScouter will have an incentive program to entice users to add and modify deals and freebies to Scouter. An option would be, integration with a preexisting loyalty company such as Belly.

Similar DealsScouter will populate similar deals for end users, based on the deal or program they select.

Partner with Google, Yelp, etc.Scouter can partner with the likes of Google, Yelp, Facebook, GrubHub, Seamless, etc, giving them access to our crowd-sourced data via the API, so they can ingest deal content and display it in their respective user interfaces.

Try It out

Hackathons

Technologies

amazon-web-services, capacitor, dynamodb, google-maps, javascript, lambda, material-ui, node.js, react

Devpost Software Identifier

255296