Inspiration

We took inspiration from the GUI provided by WalletWallet to see what their API is capable of and attempted to make it more user friendly and in-line with the Romax branding.

What it does

Our application generates bespoke wallet passes based on information provided by the client. This is compatible with Apple and Google Wallet.

How we built it

We built this using Next.JS with Typescript leveraging the WalletWallet API to generate signed pkpass files ready for use avoiding the need for the appropriate developer accounts on both apple and google's ecosystems.

Challenges we ran into

Unique QR code generation

  • Generating a QR Code on the editor that can be scanned from a mobile device proved more difficult than expected as the pkpass file is too large to be contained in a QR Code. We created an API endpoint which took a list of parameters in a url which would return the file allowing it to be scanned on a mobile device. (With the right network setup)

Managing fatigue

  • As this was our first hackathon we struggled managing sleep and work .

Accomplishments that we're proud of

  • Live preview

    • Our live preview feature was hard to implement require a bit of research to learn how to autoupdate fields when a change is detected
  • Pass Generation

    • Our backend successfully receives pkpass'es from the WalletWallet API with the custom data provided.

What we learned

We have learned quite a lot about how to manage workloads under time pressure and the hackathon experience has been invaluable. We all had previous experience with Next.JS but we was glad to have the opportunity to further these skills.

What's next for ROMAX FIsCH

We experimented with a few ideas of automatically populating customer data through their websites. We had two paths for this: AI & Traditional web scraping. The AI approach was much more effective at extracting the information from the webpage however is less cost effective and requires a powerful model unlike the local models that were available to us. Traditional web scraping did not yield accurate enough results from the limited amount of tinkering we did with it.

We believe a combination of these approaches would be the key to automating the process.

We would also like to implement a design assistant popup to advise the user when designing if they are running into accessibility issues.

Built With

  • applewallet
  • googlewallet
  • next.js
  • typescript
  • walletwallet
Share this project:

Updates