Pinata
Published in

Pinata

How to Build Progressive Web Apps as NFTs

Using Pinata, Progressier, OpenAI, and Netlify

Getting Started

Let’s go ahead and sign up for a free Pinata account. You’ll be able to upload your app and your metadata about the app to Pinata which will be useful later. At the end, as a bonus, if you upgrade to a paid account, we’ll walk through how you can add a simple script to deploy updates to your app and keep them hosted on a custom domain.

  • NPM
  • A good text editor
npx create-react-app email-rejections
cd email-rejections

Building Our Server(less) Backend

How are we going to build an app that generates new App Store rejections in an email inbox dedicated exclusively to that masochistic pursuit? We’re going to use AI, of course. OpenAI’s GPT-3 is now generally available, and they have a decent free tier that you can experiment with. You can sign up here.

netlify login
[build]
functions = "./functions"
netlify functions:create --name email-rejections
netlify dev
http://localhost:8888/.netlify/functions/YOUR_FUNCTION_NAME
curl http://localhost:8888/.netlify/functions/email-rejections

Integrating OpenAI’s GPT-3

In order to use GPT-3 to give us AI-generated App Store rejections, we will first need an API key. Log into your account and go to the API Keys page. Once you’ve generated a key, you’ll want to keep it somewhere safe. We can store this as an environment variable on Netlify. The beauty of this is that Netlify gives us access to these variable during development as well.

netlify init
netlify deploy
npm i axios
Write an email rejection from the App Store that gives a reason for the app's rejection.
curl --location --request GET 'http://localhost:8888/.netlify/functions/email-rejections'
npm run build && cd build && netlify deploy

Building The UI

The whole point of this blog post was to teach you how to build a web app that feels like it’s a native app, host it on IPFS, and bypass the problems that a walled garden like the Apple App Store presents. Did I get carried away with the joke of an app that displays AI-generated App Store rejections? Yes. Do I regret it? No.

  1. Inbox With Count
  2. Individual Emails in List
  3. Email Contents

Making It Progressive (And Feel Native)

Before we go any further, it’s important to understand what a progressive web app is (pwa). Progressive web apps, as the name confusingly tries to suggest, adds functionality progressively depending on the user’s device capabilities. For example, if you have a device that support web notifications, those will work, but they won’t work on a device that doesn’t support such notifications. You can read more about PWAs here.

  1. A home screen image
"homepage": "./",
npm run build

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store