MusePay

MusePay: Simple and secure spending and lending within social groups and families.

A social hub for friends and family to monitor finance, a simple and secure platform for lending and spending, and a non-destructive companion to one’s buying experience. Spending other people's money has never been easier and more secure.

How it Works

Sending Muse Hashes

Create an account on our platform
Connect your bank/debit card as a funding source
Begin sharing Muse Hashes! Set merchant locks (or not) and spending limits, and have a unique hash generated (keep it a secret between you and your friend!) that acts as a key to a MusePay Virtual Credit Card.

Using Muse Hashes

Install our Google Chrome Extension
Copy your hash to your clipboard
When you are ready to pay, simply right-click, and press Pay With Muse Hash.

Inspiration

Driven by the want to create a finance-related project from our collective interest in fintech, the idea came about while musing over (get it) the technologies we know how to use and ones that we want to learn and would be cool to use.

Tech Stack & Development Process

We began brainstorming ideas and creating diagrams using Figma. Using Figma's FigJam application, we were able to collaborate and quickly see each other's ideas and bounce them off of each other.

Once we came up with an idea, FigJam was again our software of choice to create a general flowchart and list of technologies we needed to use and connect together.
We then used Figma to design our UI and the components that we wanted to be made.
The frontend was built entirely off of React, CSS, and Bootstrap, written with Typescript.
Our user login/authentication system is powered by Google's Firebase platform.
We stored our users' data using SQL on CockroachDB Serverless. Their platform was very easy for us to learn to use (as complete SQL novices) and it was quick for us to deploy and utilize, as well as debug. The performance of the database also fit our needs well.
Our application's server-side backend was driven by NodeJS.
We chose Express as our API framework of choice because of our general familiarity and its simplicity, as well as decent performance.
Deciding on what financial platforms we would build our project on was a big challenge. We considered many different options, each with its own benefits. Some platforms, such as Plaid, provided a simple and convenient way to get a user's banking data, but it didn't have options for things such as virtual credit cards. We decided instead to opt for Synapse. Synapse had a lot of benefits that was perfect for our use case and our possible future use cases: Virtual Cards, Credit/Loans, Banking solutions, and Crypto solutions. We currently only use Synapse for its VCCs and banking solutions, but in the future we plan on using it for credit and loans, as well as cryptocurrency.
The final part of our project is the Chrome extension, which builds upon the Chrome Web API to provide features that are less intrusive but still powerful.

Features

Create merchant locked and spend restricted codes that are tied to individual virtual credit cards
Link your bank account/debit card as a funding source
Create a private group with your friends and family to more easily share hashes and share spending
See all your spending in easy to understand visualizations
Spend hashes in 2 clicks with the Chrome Extension

Challenges we ran into

Bitcamp was an incredible experience for our team and for some of us our first-ever in-person hackathon. We had to deal with fatigue from working for so long, surviving on only a couple hours (or less) of sleep. In terms of the development process, it was very rough. When creating our authentication/login system, we used the Auth0 service first, but we ran into issues with cross-domain sessions and managing a react app and API on a single Heroku instance. This led to us creating an authorization system on Firebase instead.

When working with Syanpse, we ran into issues with their sandbox environment, documentation that was not as detailed as it needed to be, and an API wrapper library that only covered half of the API. We had to figure out RSA PKCS1 encryption for credit card information and to pull the API requests from a Postman collection that they had, but even in that collection some of the requests were not usable directly and required a lot of debugging.

Another challenge we faced was CORS, or cross-origin resource sharing. Most of the time, you can only access APIs and other web resources from the same domain as the request origin, but because we had to deploy our API separately from our main web application, we had to figure out how to allow CORS to these other domains.

The overall most challenging part was figuring out how to structure and connect all parts of our multi-faceted application together and keep it all organized. We had to create data structures for our databases and create class structures that would be most efficient and organized. Classes like our Database manager and Synapse manager were very complex with a ton of challenges faced in during their creation, but when we were able to get it all integrated properly, everything fell together perfectly.

What we learned

Nobody in our team has used SQL before, let alone a SQL database provider like CockroachDB before. We were able to fully learn how to use and deploy it very quickly, and now feel confident in utilizing this technology in all of our future projects.

What's next for MusePay

Credit and Cryptocurrency are two big services that Synapse offers that we want to take advantage of. With their Credit Hub we would be able to create Pay in Installments Muses, Subscription Muses, Muses that can build credit, and Cryptocurrency based Muses.

View our FigJam Document Here
View our Figma Document Here

Built With

Submitted to

Bitcamp 2022

Created by

I worked on Muse's backend and Express API, dealing with authentication and security.

Adam L
Developer
I worked completely on the backend/API side of the project. I worked on structuring the database and structures, the connections to Synapse, planning, and working on the SQL/CockroachDB.

James Xu
UIUC ‘27
• UI/UX Design, asset creation via Figma (icons by Ionic)
• Original idea of utilizing one-time payment hashes and VCCs to bridge private transactions on the public web.
• Frontend tweaking w/ React
• Conceptualized and developed the checkout-integrated Chrome extension; worked with Google's message passing, tab querying APIs and others.

Andy Guo
umd ‘26
I worked Mainly on Muse's frontend, writing most components in accordance to our initial design. Later in the hackathon, I transitioned to helping out with the backend, namely handling errors and simplifying the ability to communicate with cockroach DB.

Matthew Nanas
for funnies