» Try it!
Inspiration
The inspiration for this project came up when we recently started signing up for credit cards. During each of our research processes, we all noticed the over-complicated reward schemes from each credit card distributor. While some credit cards offer great cashback in specific categories, such as groceries or restaurants, they usually also come up short in other categories such as gas, travel or general purchases.
In 2019, the average Canadian household spent over $93,000 (StatsCanada). With even the tiniest increase in cashback of just 1%, that equates to almost one thousand dollars of money that could have been spent elsewhere ... every year! We wanted to design a web app that could allow us to always choose the best credit card in our wallets when making purchases. This way, we can be sure that we never miss out on a single cent!
What it does
After adding your credit cards to your account, Discard will sift through its database of Canadian credit cards to tell you which card to use depending on your situation!
Discard uses your location to automatically determine the category of your purchase.
At a restaurant? Discard will figure out which of your cards has the greatest cashback for restaurants!
Don't want to use your location? You can also click on the quick-category buttons to immediately find which card best suits your purchase!
If you already know what store you’re shopping at, you can also use the search bar to find store-specific cashback rewards.
- Shopping online? When searching for an online store, Discard will still give you credit card advice in addition to any extra cashback rewards from Rakuten!
How we built it
We built Discard using a variety of tools. Our software framework consisted of Google Firebase as our database solution and the Google Places API to accurately predict the category of users’ purchases. Based on our digitally-sketched UI concepts, we used Bootstrap 5 to execute our ideas faithfully.
Using our proprietary query algorithm, Discard searches our self-curated list of Canadian Credit Cards to help users quickly add their credit cards.
Finally, using BeautifulSoup4, we regularly scrape Rakuten.ca for extra cashback opportunities when users shop online.
Challenges we ran into
- Compiling the credit card database. (why does a bank need to offer 20 different credit cards??)
- For many of us, this was the first web app we built. One major challenge we faced mainly revolved around our lack of experience with HTML/js, which was somewhat mended with the help of lots of coffee and StackOverflow :)
- One particular difficulty we experienced was the Rakuten search bar. This was a good learning experience that helped us familiarize ourselves with web app development.
Accomplishments that we're proud of
- Mockup renditions
- UI Renditions of said mockups using Bootstrap5
Overall, this was the first web app project the majority of us undertook. We each feel extremely satisfied with the degree of completion of this project. Although there were some features that we did not have time to implement (see What’s next for Discard
), we were still able to fulfill the core features that make this a functional project that we could each see ourselves using once we head to our university lives.
What we learned
- Web UI design with Bootstrap 5
- Web scraping with BeautifulSoup
- Integrating Javascript with HTML
What's next for Discard
- Native Mobile App
- Contactless payment setup allowing users to automatically pay using their best credit card depending on their location
- Suggest better credit card offers to users
- Track coupon codes
- Indicate cards that have excessive annual fees
- More payment categories in the credit card database
Built With
- ajax
- beautiful-soup
- beautifulsoup4
- bootstrap
- bootstrap5
- css
- firebase
- firebase-authentication
- firebase-realtime-database
- font-awesome
- google-maps
- google-places
- javascript
- places
- pwa
- python
Log in or sign up for Devpost to join the conversation.