This is a submission for the The AWS Amplify Fullstack TypeScript Challenge

What I Built

Ripe enables users to pay everyday merchants with crypto. Payment using QR code is ubiquitous in many parts of the world. (In the US, think Venmo.) Ripe leverages this existing payment infrastructure by connecting crypto on top of it.

I built the frontend to capture QR code using a phone's camera. It parses the QR code to extract merchant information such as name. (Right now it only supports GCash QR code in the Philippines, but more are coming.) It then asks the user the amount to send. The information is submitted to a data backend and triggers a serverless function to process the payment.

Demo

https://pay.ripe.money/

Journey

Even though we're only at the beginning, we have ambitious plans for this project long term. It will be very sophisticated and will require the infrastructure to fully build out a financial services company, so choosing AWS gives us that long-term option.

However, we also want to iterate quickly to get user feedback and improve the user experience, so we didn't want to spend too much time managing infrastructure. I had used Amplify gen1 before so I knew it had what we needed while also can provide integration down the line with other AWS services. When I saw Amplify gen2 and how it improved the developer experience further, it was a no brainer.

When I first started building this, Amplify Hosting gen2 didn't support custom domain yet. I knew the feature existed in gen1, so it's only a matter of time before it's available in gen2. Sure enough, before I even finished the frontend the feature was released. So now the site is reachable at https://pay.ripe.money/

Typescript support is also really useful, as I can export the correct typing to the frontend (Nextjs typescript) automatically from the schema in the data backend. The consistency is ensured automatically.

Connected Components and/or Feature Full

Of the four features (data, authentication, serverless functions, and file storage), we used all of them, although authentication and file storage are used only with the development team (see below).

Payment information submitted by the user is sent to the data backend (AppSync and DynamoDB), which triggers a serverless function (Lambda) to process the transaction.

For the development team, they can authenticate and authorize themselves (Cognito) to access some hidden features. One of which is for capturing a photo of QR code that the app fails to parse. This is uploaded to file storage (S3) for later analysis.

<!-- Thanks for participating! →