QRGen

• 

  QRGen Screenshot

Inspiration

I wondered how Airtable can be utilized for PoS (Point of Sales) apps. Most PoS terminals allow the customers to pay via smartphones, so this custom block is all about that. This custom block can act as an enabler for Airtable, to handle QR Code based mobile payments, and can handle similar sized pieces of information, that can fit in a QR Code.

What it does

QRGen is a custom Airtable block that displays the selected table cell contents as a QR Code. When an empty cell is selected, the NULL QR Code is displayed. If the cell contents change, QR Code too will update itself in real-time. If no cell is selected, it will display a message requesting the user to select a table cell. If the cell contents are too large to fit in a QR Code, it will say so, via displaying a message. If more than one cells are selected, it will prompt the user to select only one cell. If the fields or records are deleted, the block will never crash, and will gracefully update its status.

How I built it

I started off with the "Hello World" block, already available on Airtable examples and heavily modified it. I added a third-party QR Code reader library (freely available on GitHub under ISC license - links are given in my block's source code).

Challenges I ran into

There were some issues when trying to integrate a QR Code library programmed in vanilla JavaScript, so I had to search for a React.js based QR Code library.

Accomplishments that I'm proud of

I gained some really valuable insights into React.js development and was able to win the challenges mentioned above.

What I learned

How hard React tries to enforce a modular architecture when compared with vanilla JavaScript.

What's next for QRGen

I have already released QRGen to Airtable and hope to add further improvements based on the feedback.

Built With

• airtable
• javascript
• qr-code
• react