Starting over in a new chat felt like leaving a good conversation mid-sentence.

This friction point revealed something profound: We have the Model Context Protocol (MCP) connecting AI to tools. But we’ve only solved half the problem. What if we could build on MCP’s success to create something bigger — a Universal Context Protocol (UCP) that connects ALL our tools through shared context?

MCP’s Success Shows the Way

MCP proved something important: tools can communicate through standardized protocols. It elegantly solved AI-to-tool communication:

• Claude → (MCP) → Your Database

• Claude → (MCP) → Your Files

• Claude → (MCP) → Your APIs

But our tools still can’t talk to each other:

• Figma ❌ Cursor

• Claude Desktop ❌ Claude Code

• Your IDE ❌ Your Design Tools

We’ve built bridges to AI, but not between our tools. It’s like having phones that can only call the operator, not each other.

Introducing UCP: Universal Context Protocol

What if we leveraged MCP’s architecture to create UCP — a protocol specifically designed for tool-to-tool context sharing?

MCP (Model Context Protocol):
Tool ←→ AI Model

UCP (Universal Context Protocol):
Tool ←→ Shared Context ←→ Tool
         ↑
    AI (via MCP)

UCP wouldn’t replace MCP — it would complement it. MCP handles AI connections. UCP handles everything else.

How UCP Would Work

Note: This example is simplified to demonstrate the concept. Real implementation would require sophisticated protocols, but the principle is clear:

# Project context accessible via UCP
project: RealtimeCollaboration
ucp_id: "rtc-2024-03"

# Tools register with UCP
registered_tools:
  - name: "Claude Desktop"
    mcp_enabled: true
    publishes: ["decisions", "explorations"]
    subscribes: ["code_changes", "design_updates"]
    
  - name: "Figma"
    mcp_enabled: false
    publishes: ["design_tokens", "components"]
    subscribes: ["code_constraints", "decisions"]
    
  - name: "Cursor"
    mcp_enabled: true
    publishes: ["code_patterns", "implementations"]
    subscribes: ["design_tokens", "architecture"]
# Live context flow via UCP
context_streams:
  design_decisions:
    source: "Figma"
    data: {colors: "#FF6B6B", animations: "200ms ease"}
    subscribers: ["Cursor", "Claude Desktop", "Claude Code"]
    
  architecture_choices:
    source: "Claude Desktop"
    data: {pattern: "WebSocket", reason: "existing infrastructure"}
    subscribers: ["Cursor", "Figma", "Documentation"]
    
  implementation_status:
    source: "Cursor"
    data: {feature: "cursor_tracking", status: "complete"}
    subscribers: ["Claude Code", "Project Manager"]

UCP + MCP: The Complete Picture

The beauty is how they work together:

1. MCP connects AI to individual tools (proven, working today)

2. UCP connects tools to each other through shared context (the missing piece)

3. AI becomes smarter because it can see the full context via both protocols

Your workflow becomes:

• Open any tool → UCP provides full project context

• Need AI help → MCP connects to AI with rich context

• Switch tools → Context flows seamlessly via UCP

• Collaborate → Everyone shares the same living context

What UCP Enables

True Continuity: Start in Claude Desktop, continue in Claude Code — same conversation, because UCP maintains the thread.

Real-time Sync: Change a design token in Figma, your IDE instantly knows via UCP. No manual updates, no disconnected systems.

Tool Intelligence: Every tool understands what every other tool is doing. Your IDE knows what you designed. Your design tool knows your code constraints.

Project Memory: Your project’s context lives independently, accessible via UCP. It’s yours, not trapped in any tool.

Why This Completes the AI OS

An operating system needs:

1. Resource Management: UCP manages context as a shared resource

2. Inter-Process Communication: UCP is literally IPC for the AI age

3. Standard Protocols: MCP for AI, UCP for everything else

4. Security Layer: UCP can handle permissions and access control

We don’t need to replace traditional operating systems. We need to add the context layer they’re missing — and UCP can be that layer.

Breaking Free from Tool Prisons

Today’s “project” features fail because they’re silos:

• Claude Projects → Locked in Claude

• Claude Code’s .md → Stuck in Claude Code

• Cursor’s context → Trapped in Cursor

With UCP:

• Project context lives independently

• Tools connect through UCP to access it

• Context flows freely between everything

• You own your project’s memory

• MCP still handles AI connections

The Path Forward

This isn’t starting from scratch — it’s building on what works:

1. Leverage MCP’s design principles for UCP

2. Define context schemas that any tool can use

3. Build UCP adapters for popular tools

4. Create bridges between UCP and MCP

5. Open source everything to drive adoption

The best part? Tools that already support MCP are halfway there. They know how to speak protocol — they just need to speak to each other.

The Last Mile to the AI OS

We have MCP connecting tools to AI. We just need UCP connecting tools to each other. Together, they form the nervous system of an AI Operating System.

Imagine opening any tool and having it instantly understand your entire project context. Imagine AI that can see not just what you’re asking, but everything you’ve done across all your tools. Imagine never losing context again.

That’s not science fiction — it’s one protocol away. We built bridges to AI. Now let’s build bridges between everything else.

The question is: who will be first to realize that UCP is the missing piece that makes everything connected?

Would you use a protocol that let all your tools share context? What would you build if context could flow freely between everything?

Before the era of Generative AI (GenAI), I embarked on a journey to build an iOS mobile app called Handstand Quest. Developed with a modest investment of about 5 hours per week, this project stretched over four years in a traditional approach to product development, where the product evolved through stages from concept to launch.

However, my perspective on product development underwent a radical shift with the advent of ChatGPT, specifically the GPT-4 model. Leveraging this advanced AI model, I was able to create the full Plan Quest product in just one month. This wasn’t just rapid development; it was a complete overhaul of the traditional development cycle. For me, building has always been the most effective form of articulation, and with GPT-4, I could do it at speeds I never imagined possible.

The whole world is obsessing over building AI products. I think the whole world should obsess about building their product with AI!

Investing in a ChatGPT subscription was a game-changer, granting me access to the GPT-4 model’s capabilities. While I experimented with various AI tools, including Microsoft Copilot, Google Gemini, and GitHub Copilot, none offered the same level of efficiency and effectiveness as interacting directly with ChatGPT. It transformed my approach to coding, allowing me to modify, change, write, and create at an unprecedented pace. The product itself became the prototype, evolving in real-time based on the direct application of AI-driven insights and developments.

For those juggling multiple projects, ChatGPT’s ability to facilitate context switching is invaluable. It serves as a quick refresher on areas you haven’t touched for a while, seamlessly integrating into the development workflow.

This experience taught me an invaluable lesson about the power of AI in accelerating product development. The traditional barriers between ideation, prototyping, and product development blur when you can iterate at such speed. If you’re interested in a deeper dive into how AI can streamline the coding process, check out this detailed walkthrough I wrote for one of the features I was building.

For fellow entrepreneurs navigating the complexities of startup development, embracing AI tools like ChatGPT can transform your product development process. When your product becomes the prototype, you’re not just building; you’re iterating, learning, and refining at a pace that traditional methodologies cannot match.

I wanted to incorporate payments into my existing NextJS + Firebase app (https://plans.quest), primarily so that users could upgrade from a “Free” to a “Pro” subscription.

The first and only choice that came to mind is Stripe, given its reputation and brand strength.

I signed up for a Stripe account and logged in.

Pricing Plans

I was inspired by some pricing tables available on the web, for example, TypeForm. I realized later that this table UI was not built through Stripe…

Anyways, I started in Stripe by exploring the Pricing Table.

I found the UI to be simple and it really helped me structure my thinking about what a pricing plan would look like for my app. I was able to put together a pricing plan very quickly.

You basically add products, and per product you define prices and other settings like logo, features, etc…

Tip: It was a bit tricky to figure out how to give users the choice to select between monthly or yearly plans, but then figured it was automatic as you add both the monthly and yearly prices to a product.

To save you time: I recommend you first start in “Test Mode” in the Stripe UI, so you have the option to copy the products over into the “Live” mode.

It was also nice to see the ability to add a “Contact Us” option that would point to a custom link.

Warning (for later): I really hoped I could disable or remove the “Subscribe” button on my free “Starter” product, but there was no way to do that. This limitation alone creates an inconvenient and confusing experience for my users, so I guess the way forward is to either remove the “Free” tier, live with the weird experience, or skip using Pricing tables altogether.

Integrating The Pricing Plan

My next natural step was to try integrating the pricing plan into both my app and its marketing website.

NextJS App Integration

My app is built on NextJS, React, Vercel and Firebase. I introduced a menu item for the user to “View Plans”.

On clicking “View Plans”, that same pricing table would show in a dialog. So far, easy.

import React, { useState, useEffect } from 'react';
import { Dialog, DialogTitle, DialogContent } from '@mui/material';

const StripePricingTable = () => {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://js.stripe.com/v3/pricing-table.js";
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return React.createElement("stripe-pricing-table", {
    "pricing-table-id": process.env.NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID,
    "publishable-key": process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,
  });
};

const StripePlansDialog = ({ open, onClose }) => {
  return (
    <Dialog open={open} onClose={onClose} fullWidth maxWidth="lg">
      <DialogTitle>View Plans</DialogTitle>
      <DialogContent>
          <StripePricingTable />
        }
      </DialogContent>
    </Dialog>
  );
};

export default StripePlansDialog;

Marketing Site Integration

For my marketing site, I use Hugo, a free framework that gives me the power of full source control and is totally free. The hosting is also free on Firebase Hosting.

Integrating the pricing table was very straightforward, just a matter of including the <stripe-pricing-table> web component copied from Stripe.

<div id="pricing" class="w-full min-h-screen flex flex-col justify-center items-center bg-secondary-800">
    <div class="self-center text-center w-full xl:w-1/2 px-4 mb-8">
        <h2 class="font-bold tracking-widest text-gray-200 text-4xl mb-4">{{ $reg.Title }}</h2>
        <div class="font-light text-gray-400 text-xl">
            {{ $reg.Content }}
        </div>
    </div>

    <div class="w-full rounded mt-8">
        <div class="mb-5 bg-white"> 
            <br>
        </div>
        <script async src="https://js.stripe.com/v3/pricing-table.js"></script>
        <stripe-pricing-table class="mt-8" pricing-table-id="prctbl_1OSQRJGUlyEIrGMQsRYJgv7e"
        publishable-key="pk_live_51H…">
        </stripe-pricing-table>
    </div>
    
    
    <div class="flex flex-row w-full justify-center pt-6">
        <a class="px-10 py-2 text-gray-200 bg-primary-700 rounded-full shadow-md text-lg hover:bg-secondary-800 hover:border-red" href="https://my.plans.quest/" target="_blank">Get Started-it is free</a>
    </div>
</div>

Warning (for later): Ok, so now that the pricing table is integrated on my marketing website, what happens when a user makes a purchase, and how do I tie that with my backend to know who is the user that made the purchase?

Stripe Webhooks

When certain events occur in Stripe, such as successful payments, subscription changes, or failed transactions, Stripe can send webhook events in the form of HTTP POST requests to a specified endpoint URL on your server.

This is what we’ll rely on to have our app “register” a subscription purchase. Basically:

• When a purchase is successful, I want to track that in my app so the user gets access to the “pro” features

• When a user cancels a subscription, I want to revoke access to the “pro” features in my app

I have the option to create my endpoint (the Stripe webhook) as a NextJS API, Firebase Function, or rely on the Stripe Firebase extension. In this article, I’ll focus on the NextJS approach.

NextJS Stripe Webhook

Implementing Stripe webhooks in a Next.js 14 application to handle purchase completion, subscription changes, and cancellations involves a few steps.

We’ll basically set up API routes to handle webhook events and then update our Firestore database based on those events.

Let’s install both Stripe and Firebase admin libraries, along with the “micro” library to handle reading the raw request from Stripe and verifying its signature for security purposes. We’re working with payments here, so doing things securely is critical.

npm install stripe firebase-admin micro

Now, to the real deal, the Stripe Webhook API. Create a new file /pages/api/stripe/webhook.ts. Let’s start by just doing signature verification and logging the Stripe event type and its data.

import { NextApiRequest, NextApiResponse } from 'next';
import Stripe from 'stripe';
import { buffer } from 'micro';


const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, { apiVersion: '2023-10-16' });


export const config = {
   api: {
       bodyParser: false,
   },
};


const webhookHandler = async (req: NextApiRequest, res: NextApiResponse) => {
   console.log('Received Stripe webhook');


   if (req.method === 'POST') {
       console.log('Processing POST request for Stripe webhook');


       const reqBuffer = await buffer(req);
       const sig = req.headers['stripe-signature'];


       let event;
       try {
           event = stripe.webhooks.constructEvent(
               reqBuffer.toString(),
               sig,
               process.env.STRIPE_WEBHOOK_SECRET
           );
       } catch (err) {
           console.error(`Webhook Error: ${err.message}`);
           res.status(400).send(`Webhook Error: ${err.message}`);
           return;
       }


       // Log the event type and metadata
       console.log(`Received Stripe event: ${event.type}`);


       if (event.data && event.data.object) {
           console.log('Event data:', event.data.object);
       }


       res.status(200).json({ received: true });
   } else {
       res.setHeader('Allow', 'POST');
       res.status(405).end('Method Not Allowed');
   }
};


export default webhookHandler;

Linking Stripe to The Local Webhook

Now that we have the webhook endpoint created in NextJS, let’s make sure our Stripe Pricing Plan in “test mode” is linked to our local NextJS endpoint we’ve just created.

To ensure that Stripe can communicate with our local Stripe webhook endpoint during development, we can use Stripe’s Command Line Interface (CLI). The Stripe CLI allows us to forward events from our Stripe account to our local development environment.

On the command line, let’s install Stripe CLI. On Mac (use installation method based on your OS):

brew install stripe/stripe-cli/stripe

Grab the Test API key from Stripe.

Back to the command line:

stripe login - api-key <your copied secret>

Then forward Stripe webhook request locally:

stripe listen - forward-to http://localhost:3000/api/stripe/webhook

You should see something like this in the Webhooks section in Stripe’s Developers dashboard.

Making a Purchase

Now, make sure your NextJS server is up and running, and let’s go to the Stripe pricing table in “Test Mode”, make a purchase, and see what happens in our NextJS logs.

Click subscribe on the “Pro” plan or whatever you have setup in your pricing table.

Use the 4242424242424242 test credit card number, any 3 digits for CVC, and any future expiry date. On clicking subscribe, payment should be successful.

Looking at the logs, here are the events emitted:

1. charge.succeeded: Occurs when a charge is successfully created.

2. payment_method.attached: A payment method (like a credit card) is attached to a customer.

3. customer.created: A new customer is created in Stripe.

4. customer.updated: The customer’s information is updated.

5. customer.subscription.created: A new subscription is created for the customer.

6. customer.subscription.updated: The subscription is updated, which can happen for various reasons, like a change in plan.

7. payment_intent.succeeded: The payment intent (for capturing payment) succeeds.

8. payment_intent.created: A new payment intent is created.

9. invoice.created: An invoice is generated for the subscription.

10. invoice.finalized: The invoice is finalized and ready for payment.

11. invoice.updated: The invoice is updated.

12. invoice.paid: The invoice is paid.

13. invoice.payment_succeeded: The payment for the invoice succeeds.

14. checkout.session.completed: The checkout session is completed, typically indicating the whole process of subscribing is done.

Our most interesting events are customer.subscription.created and checkout.session.completed.

Changing a Subscription

If you go back to the pricing table and click subscribe, this time it will tell you that you’ve already made a purchase. I think I turned on a Stripe setting to enable this behavior. It will then send you a link over email to manage your subscription.

Let’s update the plan. Let’s say I go from a “Pro” product to a “Free” product.

When that happens, here are the events that get triggered (for informational purposes).

• customer.updated

• customer.subscription.updated

• invoice.created

• invoice.finalized

• invoice.paid

• invoice.payment_succeeded

• invoiceitem.created

Most relevant event here is customer.subscription.updated.

Canceling a Subscription

Same steps as “changing plan”, but instead we “Cancel Plan”.

On cancellation (pre-confirmation), here are the events that get triggered.

• customer.subscription.updated

After confirming, we also get that same customer.subscription.updated event!

Linking Stripe User to Firebase User

Ok great. So how do I know which user made the purchase and accordingly flag that in my system?

Looking at the logs, I’ve noticed the user email is included in most of the event objects. Using the email as an identifier could work both in the Web App and from the marketing website, given that an email is provided when a user makes a purchase.

However, since Stripe does not enforce uniqueness of an email address per customer, I’m playing it safe like a typical developer, and as a result, will rely on the User ID from Firebase to link between the user in Firebase and the customer in Stripe. So how do I go about doing that?

Luckily, the <stripe-pricing-table> web component supports setting the client-reference-id property. When the property is set, the pricing table passes it to the Checkout Session’s client_reference_id attribute to help us reconcile the Checkout Session with our internal system.

Side Note: Ok, so I’m deciding to drop the idea of using the “Pricing Table” for purchases on the Marketing website. It’s just not practical (no way to pass user id ). It would have been nice to let me just put it there for informational purposes without any buttons, but that’s not possible either.

I’ll focus on the integration of the pricing table in my web app. I’ll go ahead and funnel in the Google Firebase user id to the pricing table.

import React, { useState, useEffect } from 'react';
import { Dialog, DialogTitle, DialogContent } from '@mui/material';


import logger from "@/lib/logger";


const StripePricingTable = ({ user }) => {
 useEffect(() => {
   const script = document.createElement("script");
   script.src = "https://js.stripe.com/v3/pricing-table.js";
   script.async = true;
   document.body.appendChild(script);


   return () => {
     document.body.removeChild(script);
   };
 }, []);


 logger.debug("StripePricingTable user.uid: ", user.uid);


 return React.createElement("stripe-pricing-table", {
   "pricing-table-id": process.env.NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID,
   "publishable-key": process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,
   "client-reference-id": user.uid,
 });
};


const StripePlansDialog = ({ open, onClose, user }) => {
 return (
   <Dialog open={open} onClose={onClose} fullWidth maxWidth="lg">
     <DialogTitle>View Plans</DialogTitle>
     <DialogContent>
       <StripePricingTable user={user} />
     </DialogContent>
   </Dialog>
 );
};


export default StripePlansDialog;

Alright, so now that I am passing the user Id to the pricing table, when a user makes a purchase, I can see the value of the user Id getting logged in the checkout.session.completed event. Below is what the event object looks like with a good amount of the properties trimmed out since they are not very relevant. The property that matters to us is “client_reference_id”.

Event data: {
  id: 'cs_test_...',
  amount_total: 8499,
  cancel_url: 'https://stripe.com',
  client_reference_id: 'ClHemjvo...',
  created: 1704244228,
  customer: 'cus_PIuqCn...',
  customer_creation: 'always',
  customer_details: {
    address: {
      city: null,
      country: 'US',
      line1: null,
      line2: null,
      postal_code: '12121',
      state: null
    },
    email: 'whatever@gmail.com',
    name: 'Whatever',
    phone: null,\
  },
  customer_email: 'whatever@gmail.com',
  locale: 'en',
  mode: 'subscription',
  payment_method_types: [ 'card' ],
  payment_status: 'paid',
  status: 'complete',
  subscription: 'sub_1OUJ0RGUlyEIrGMQb3J27Dh0',
}

Ok, so I can access the Firebase User Id when the user completes the “Checkout Session”.

For context: when you integrate Stripe into your website or application, a Checkout Session is created to handle the details of the payment process, from presenting payment options to finalizing the transaction.

Let’s get to our Stripe Webhook we’ve implemented in NextJS. It’s currently logging events. Let’s add to it the logic to pick the user Firebase Id from the checkout.session.completed event and log it.

Let’s define a new method called “processStripeEventData” and call it from our webhook, right after we log the event.

await processStripeEventData(event);

Let’s set a structure for processing events, where on the checkout.session.completed, we link Firebase User Id to Stripe customer Id, and for the 3 subscription events (created, updated, deleted), we “take note” of the user subscription change.

const checkoutCompleteEvent = "checkout.session.completed";
const subscriptionEvents = [
   "customer.subscription.created",
   "customer.subscription.updated",
   "customer.subscription.deleted"
];


async function processStripeEventData(stripeEvent) {
   try {
       // Example of logging
       console.log("Processing stripe event", { id: stripeEvent.id, type: stripeEvent.type });


       // If the event is a checkout complete event, map account to customer
       if (stripeEvent.type === checkoutCompleteEvent) {
           await recordCustomerAccountMappings(stripeEvent);
       }


       // If the event is subscription related, update the account subscription
       if (subscriptionEvents.includes(stripeEvent.type)) {
           await recordAccountSubscriptionChange(stripeEvent);
       }


   } catch (err) {
       // Handle errors, possibly logging them to your database
       console.error("Error processing Stripe event:", err);


       // Here you would record the error in your database
   }
}


async function recordCustomerAccountMappings(stripeEvent) {
   console.log("Mapping customer accounts", { id: stripeEvent.id, type: stripeEvent.type });


   const { customer, client_reference_id } = stripeEvent.data.object;
   if (customer && client_reference_id) {
       console.log("Mapping customer to account", { customer, client_reference_id });


       // Here you would update your database with the customer and account mapping
   }
}


async function recordAccountSubscriptionChange(stripeEvent) {
   console.log("Recording subscription change", { id: stripeEvent.id, type: stripeEvent.type });
}

After making a test purchase, I could see the following in the logs, and this confirms that I was able to find the “link” between the Stripe Customer Id and Firebase User Id.

Mapping customer to account {
  customer: 'cus_PJAfq…',
  client_reference_id: 'k1Vare…'
}

Data Model

Now that I can tap into the information that I need from Stripe events, it’s good to think a little bit about how I want to store the data in Firestore.

In my app, I currently store user accounts in the “users” collection. If I take the simplest approach possible, I could add a new “stripeId” property to the user document, and another “subscription” property to represent the subscription that the user has.

There is one catch here though. I’ve noticed the customer.subscription.created event happens before the checkout.session.completed event. So I need to keep the subscription information somewhere before I “find” the link between the Stripe customer and the Firebase user. Wait, but that information is stored in Stripe anyways, so I still have a way to talk to Stripe to look it up.

Firestore Database Setup

In order to be able to talk to Firestore from NextJS, we need to make sure first we have the right configuration.

Install Firebase Admin SDK

npm install firebase-admin

Generate a Firebase Service Account Key: Go to the Firebase Console. Select your project. Go to Project settings (gear icon near the top-left corner) > Service accounts. Click on “Generate new private key” and confirm. This will download a JSON file with your service account credentials.

Go to Firestore in Firebase console, and copy the database url from the browser address bar (format should be https://console.firebase.google.com/u/0/project/<project_Id>/firestore)

Create the lib/firebaseAdmin.ts to initialize Firebase on the server side

import admin from 'firebase-admin';


if (!admin.apps.length) {
 admin.initializeApp({
   credential: admin.credential.cert({
     projectId: process.env.FIREBASE_PROJECT_ID,
     clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
     privateKey: process.env.FIREBASE_PRIVATE_KEY.replace(/\\n/g, '\n'),
   }),
   databaseURL: process.env.FIREBASE_DATABASE_URL,
 });
}


export default admin;

Make sure the environment variables are defined in your .env.local file.

Updating Firestore Database

Ok, now that we’ve set up Firebase integration on the backend, let’s listen to the Stripe events and make the database updates accordingly.

In the webhook.ts file, let’s reference the Firestore db object.

import admin from '@/lib/firebaseAdmin';

const db = admin.firestore();

Now, let’s update the recordCustomerAccountMappings function to write the stripeCustomerId property to the user document.

async function recordCustomerAccountMappings(stripeEvent) {
   console.log("Mapping customer accounts", { id: stripeEvent.id, type: stripeEvent.type });


   const { customer: stripeCustomerId, client_reference_id: userId } = stripeEvent.data.object;
   if (stripeCustomerId && userId) {
       console.log("Mapping customer to account", { stripeCustomerId, userId });


       const userRef = db.collection('users').doc(userId);


       try {
           await userRef.update({
               stripeId: stripeCustomerId
           });
          
           console.log("Mapped Stripe customer to user account", { userId, stripeCustomerId });
       } catch (err) {
           console.error("Error mapping Stripe customer to user account:", err);
           // Handle any errors here
       }
   }
}

Given the fact that customer.subscription.created event happens before the checkout.session.completed event, when I map the two, I should go look for customer subscription data in Stripe and make sure I have that updated in the User document.

Let’s reference Stripe from webhook.ts

import Stripe from 'stripe';


const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, { apiVersion: '2023-10-16' });

Let’s add a new method to be called from recordCustomerAccountMappings that pulls the Stripe customer existing subscriptions and maps it to what we want to know about at the end of the day: what active subscription does the user have!

async function updateUserSubscriptionPlan(userRef, stripeCustomerId) {
   try {
       // Fetch the latest subscription for the user from Stripe
       const subscriptions = await stripe.subscriptions.list({
           customer: stripeCustomerId,
           status: 'active',
           limit: 1
       });


       const userSubscription = subscriptions.data[0];


       console.log("Fetched user subscription data", { userSubscription });


       if (userSubscription) {
           const planProductId = userSubscription.items.data[0].plan.product;


           console.log("Fetched user subscription plan ID", { planProductId });


           // Determine the plan type ("free" or "pro")
           const planType = (planProductId === 'prod_PI38VLrT5MjysO') ? 'pro' : 'free';


           // Update the user document with the subscription plan
           await userRef.update({ subscriptionPlan: planType });
           console.log("Updated user subscription data", { subscriptionPlan: planType });
       } else {
           // If there is no subscription, set the plan to "free"
           await userRef.update({ subscriptionPlan: 'free' });
           console.log("Updated user subscription data", { subscriptionPlan: 'free' });
       }


   } catch (err) {
       console.error("Error in updateUserSubscriptionPlan:", err);
       // Handle any errors here
   }
}

Replace ‘prod_PI38VLrT5MjysO’ with your product’s plan id (In Test mode).

Next, let’s update the recordAccountSubscriptionChange function to pick up the subscription state changes.

async function recordAccountSubscriptionChange(stripeEvent) {
   console.log("Recording subscription change", { id: stripeEvent.id, type: stripeEvent.type });


   const { customer: stripeCustomerId, id: subscriptionId, status, plan } = stripeEvent.data.object;
   console.log("Subscription change data", { stripeCustomerId, subscriptionId, status, plan });


   try {
       const usersRef = db.collection('users');
       const querySnapshot = await usersRef.where('stripeId', '==', stripeCustomerId).get();


       if (querySnapshot.empty) {
           throw new Error(`User not found for Stripe customer ID ${stripeCustomerId}`);
       }


       const userRef = querySnapshot.docs[0].ref;


       // Call updateUserSubscriptionPlan to handle the subscription update
       await updateUserSubscriptionPlan(userRef, stripeCustomerId);


       console.log("Handled user subscription update", { stripeCustomerId });


   } catch (err) {
       console.error("Error in recordAccountSubscriptionChange:", err);
       // Handle any errors here
   }
}

At this point, in theory, we should have all the changes we need to “sync” with Stripe on all the user payments and subscription changes.

Let’s test and make sure all the user actions map to the Firestore DB in the way we desire them to.

I just completed a purchase for a “Pro” subscription, and the User document has the stripeId updated but the subscriptionPlan is “pro”. Awesome!

I’ll then test out changing the plan from “Pro” to “Free” and then back from “Free” to “Pro”. Amazing, it works!

However, when I “cancel” the subscription, it is still considered “pro”. This is because on cancellation, the subscription will get scheduled to be canceled at the end of the billing period.

In order to simulate an actual cancellation, I’ll go ahead and delete the customer from Stripe (Go to customers, select the user and delete). Now that it is done, the user’s subscription plan is “free”, which is exactly what I’d expect.

The “stripeId” field is still set on the User object. That’s fine, but I want to make sure that if the same Firebase user comes back and makes a purchase, a new customer id is generated and updated in the User’s document. And it’s just what I expected, awesome!

Check User Subscription Status

When a user has purchased the “pro” plan, the property subscriptionPlan in the users/{userId} doc in Firestore will be set to “pro”.

The first thing I want to change in my app is the user menu. It currently shows a “View Plan” that when clicked will show the pricing table. If the user has already purchased the “pro” plan, I want to hide that option and show a “Manage Plan” menu item, that when clicked takes the user directly to the Stripe Customer Portal.

To make the access to the “pro” status reusable in my app, I will define a React hook under lib/hooks/useSubscriptionStatus to return a boolean whether the user has the pro plan or not.

import { useState, useEffect } from 'react';
import { getFirestore, doc, onSnapshot } from 'firebase/firestore';


const useSubscriptionStatus = (userId: string) => {
 const [hasProPlan, setHasProPlan] = useState(false);
 const firestore = getFirestore();


 useEffect(() => {
   if (!userId) return; // Ensure there is a userId before proceeding


   // Reference to the specific user document
   const userRef = doc(firestore, 'users', userId);


   // Listen for changes in real-time
   const unsubscribe = onSnapshot(userRef, (documentSnapshot) => {
     if (documentSnapshot.exists()) {
       // Check the 'subscriptionPlan' field to determine if the user has a 'pro' plan
       const userData = documentSnapshot.data();
       const subscriptionPlan = userData.subscriptionPlan;
       setHasProPlan(subscriptionPlan === 'pro');
     } else {
       // Handle the case where the document does not exist
       setHasProPlan(false);
     }
   });


   // Cleanup listener on unmount
   return () => unsubscribe();
 }, [userId, firestore]);


 return hasProPlan;
};


export default useSubscriptionStatus;

When the user clicks on “Manage Plan”, I want to route them to the Stripe Customer Portal. According to Stripe documentation, we can use a prefilled_email URL parameter in the query string of our login link URL to streamline the login experience.

Example login link:

https://billing.stripe.com/p/login/test_4gw6oJchs69w47e7ss?prefilled_email=jenny%40example.com

In my React component, I reference the React hook and within the component I retrieve the boolean that tells whether the user has a Pro plan.

import useSubscriptionStatus from '@/lib/hooks/useSubscriptionStatus';

const hasProPlan = useSubscriptionStatus(user?.uid);

Then accordingly, I display “Manage Plan” or “View Plans”.

{hasProPlan ? (
 <StyledMenuItem onClick={handleManagePlan}>
   <ListItemIcon>
     <SettingsIcon fontSize="small" />
   </ListItemIcon>
   Manage Plan
 </StyledMenuItem>
) : (
 <StyledMenuItem onClick={handleViewPlans}>
   <ListItemIcon>
     <ViewListIcon fontSize="small" />
   </ListItemIcon>
   View Plans
 </StyledMenuItem>
)}

And here is the logic for managing the plan. I got the portal url from Stripe and stored it as an environment variable given that there are separate links for Test vs Live modes..

const handleManagePlan = () => {
 // Get the base URL from the environment variable
 const portalBaseUrl = process.env.NEXT_PUBLIC_STRIPE_CUSTOMER_PORTAL_BASE_URL;


 if (!portalBaseUrl) {
   console.error("Stripe Customer Portal URL is not set.");
   // Handle the error appropriately
   return;
 }


 // Construct the URL
 const portalUrl = user?.email
   ? `${portalBaseUrl}?prefilled_email=${encodeURIComponent(user.email)}`
   : portalBaseUrl;


 // Open the URL in a new window/tab
 window.open(portalUrl, '_blank');
};

Launching to Production

Environment Variables & NextJS Vercel Deployment

Since I am using Vercel, which by the way, is the best platform I’ve ever seen for simplified CI/CD, going to production will be as simple as merging my code into the main branch and adding the new environment variables.

For a refresher, below is the list of environment variables that need to be defined.

Firebase

Go to the Firebase Console, select your project, go to Project settings (gear icon near the top-left corner) > Service accounts, and if you have not already done so, click on “Generate new private key” and confirm. This will download a JSON file with your service account credentials. Take those values from the JSON file and set them for the following environment variables.

• FIREBASE_PROJECT_ID

• FIREBASE_CLIENT_EMAIL

• FIREBASE_PRIVATE_KEY

For the FIREBASE_DATABASE_URL environment variable, go to Firestore in Firebase console, and copy the database url from the browser address bar (format should be https://console.firebase.google.com/u/0/project/<project_Id>/firestore).

Stripe

• NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID: get it from pricing table code snippet at /pricing-tables in Stripe dashboard.

• NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: get it from pricing table code snippet at /pricing-tables in Stripe dashboard.

• NEXT_PUBLIC_STRIPE_CUSTOMER_PORTAL_BASE_URL: From settings/billing/portal in Stripe dashboard.

• STRIPE_WEBHOOK_SECRET: from /webhooks in Stripe dashboard.

Stripe Webhook Staging & Production Endpoints Setup

After deployment of all our changes to the staging environment, let’s point the Stripe Hosted Endpoint for webhooks in the Stripe Dashboard to the NextJS API endpoint in the staging environment.

Point to the endpoint and make sure to select the relevant events we are listening to. After adding the endpoint, copy the secret into the staging environment STRIPE_WEBHOOK_SECRET environment variable.

One interesting thing is that you will need to re-deploy in staging after adding a new environment variable, and when you re-deploy in Vercel in staging, a new subdomain url is generated. Instead of adding a new endpoint in Stripe, just go and update the current endpoint.

Now, let’s go to the staging environment and make sure everything works as expected.

You should start seeing events funneling in. But for some reason, my NextJS endpoint hosted on the Vercel staging environment was returning an HTTP 401 (Unauthorized) response.

Looking at the Function logs in Vercel, there really wasn’t much being logged, not even the ‘Received Stripe webhook’ I logged at the very start of the webhook handler.

Wondering if this is some Vercel staging crap I am dealing with, I decided to add the production endpoint in Stripe for the webhook (make sure you are not in Test mode), pull the STRIPE_WEBHOOK_SECRET and add the environment variable for production, then merge to the main branch to kick deployment to production.

Testing in production, I got a 400 Bad Request, but at least it’s some useful error message I could do something about.

Webhook Error: No signatures found matching the expected signature for payload. Are you passing the raw request body you received from Stripe?

Learn more about webhook signing and explore webhook integration examples for various frameworks at https://github.com/stripe/stripe-node#webhook-signing

I started thinking, maybe the Production deployment didn’t pick up the STRIPE_WEBHOOK_SECRET environment variable that I’ve set. So I just validated it was set correctly and redeployed.

And yes, a good kind of magic started happening.

One last catch, I realized hard coding caused a broken purchase experience in production.

// Determine the plan type ("free" or "pro")
const planType = (planProductId === 'prod_PI38VLrT5MjysO') ? 'pro' : 'free';

So I made sure the PRO Plan Product ID is also an environment variable.

const planType = (planProductId === process.env.NEXT_PUBLIC_STRIPE_PRO_PLAN_PRODUCT_ID) ? 'pro' : 'free';

Conclusion

The key takeaway from this experience is the importance of starting in “Test Mode” in Stripe, which allows for a smoother transition to “Live” mode. Additionally, the limitations encountered, such as the inability to modify certain aspects of the pricing table, impacted the effectiveness of my app’s payment user experience.

For developers embarking on a similar path, my advice is to pay close attention to the details of integration, especially when it comes to linking Stripe’s payment functionalities with your app’s user management system. The use of Stripe webhooks is crucial for tracking subscription statuses and reflecting these changes in your app. Also, consider not using the Pricing table to have more flexibility in your payment UI.

Finally, I have some recommendations to the Stripe team:

1. Since you allow the user to pass the “client-reference-id” to the pricing table, consider storing that into the Customer object in Stripe and automatically detecting the plan that the user has subscribed to when rendering the pricing table.

2. Currently, you only allow one product to have a custom link. In my case, I had free, pro and pioneer plans. I only wanted the user to make a “purchase” on the “pro” plan, to contact me on the “pioneer” plan and to either “Donate” on the “free” plan or just not have a button there at all.

3. On my marketing website, I thought it would be a good idea to include the pricing table. However, I later realized that exposing the “Subscribe” buttons on the marketing website from the pricing table would have the user purchase without being logged in. That’s fine if we could rely on emails to link accounts, but it turns out Stripe does not enforce unique emails. For new Stripe accounts, it would be nice to enforce unique emails by default, and then let your customers change that if needed.

4. Since I already put the effort into building the pricing table, it would have been really nice if I were able to expose it on the marketing website in “Info” mode, where there are either no buttons, or full ability to customize the link in all the buttons.

5. Seeing all the Stripe Webhook events was overwhelming. I didn’t know which ones I should really care about. It would be nice to have “contextual” documentation based on the structure of the pricing plan, from which you would recommend the most relevant events to listen to. In my case, there were only 4 events.

6. I created the pricing table in production mode first, then had to re-create everything in Test mode. Although there is an option to copy a product from Test mode to Live mode, there is no option to copy the Pricing table. It would be nice to be able to copy from Test to Live and Live to Test both products and pricing tables.

7. There are so many secrets and IDs to pick from different parts of the UI and plug them into environment variables. It would be nice if that process is streamlined a bit more.

Some random bugs I’ve experienced:

1. The “Continue” button was disabled in the pricing table because some field was missing. It was not visible in the UI why the “Continue” button was disabled, so I thought it’s an issue in the pricing table itself.

2. In the webhook endpoint description, you cannot type “ “ (space key) in the keyboard! I literally thought my keyboard space key was not working.

In closing, I hope these suggestions serve as constructive feedback for the Stripe team. My experience integrating Stripe’s pricing table has been both challenging and rewarding, and I believe these enhancements could further streamline the process for developers like myself. I look forward to seeing how Stripe evolves and adapts to these suggestions, and I am excited about the prospect of even more seamless integrations in the future.

1. /api/generateExerciseData, which calls OpenAI API with gpt-3.5-turbo to generate exercise descriptions, categories, subcategories, intensities, and tips.

2. /api/generateWorkout, which calls OpenAI API with gpt-4 to generate workouts based on user prompts.

While these endpoints work seamlessly in my local environment, they encounter issues in the Vercel production environment due to the ten-second Serverless Function Execution Timeout.

I could upgrade from the Hobby plan to the Pro plan for $20/month to increase the timeout to 60 seconds, but the GPT-4 endpoint may take up to two minutes to run. Additionally, I’m reluctant to spend $240/year just for this single feature.

Furthermore, I have an existing mobile app that I would like to integrate with those capabilities at some point in the future.

Considering the requirements above, I have decided to migrate my API endpoints from Vercel Serverless Functions to Firebase Cloud Functions.

In this article, I will guide you through overcoming Vercel’s Serverless Function Execution Timeout limitation by replacing them with cost-effective Firebase Cloud Functions.

Creating Firebase Cloud Functions

Initialization

Install Firebase CLI and initialize Cloud Functions in your project:

npm install -g firebase-tools
firebase login
firebase init functions

The firebase init functions command initializes Firebase Cloud Functions in your project. This command configures and files to create and deploy serverless functions using Firebase.

Note: I ran it on my existing Next.js code repository, but I recommend starting a new repository for the Firebase functions.

Edit: I did end up deciding to move the functions to their own repostiroy to fully separate Vercel from Firebase, especially deployments and configs.

When you run firebase init functions, the Firebase CLI guides you through an interactive setup process:

1. It asks you to select the Firebase project you want to associate with your functions.

2. It prompts you to choose your preferred language for writing functions (JavaScript or TypeScript). I chose TypeScript.

3. It creates a functions folder in your project’s root directory, which will contain all the necessary files and configurations for your Cloud Functions.

4. It generates a package.json file and a node_modules folder inside the functions directory, including the required dependencies for your functions.

5. If you choose TypeScript, it also sets up a tsconfig.json file to configure TypeScript compilation.

After running firebase init functions, you can start developing your Firebase Cloud Functions by adding your code to the index.js (or index.ts for TypeScript) file inside the functions folder. Once you have written your functions, you can deploy them using the firebase deploy — only functions command.

Creating the Functions

Next, create the new functions inside the functions directory (created during initialization). For example, in functions/index.ts:

import * as functions from "firebase-functions";


exports.generateExerciseData = functions.https.onRequest(async (req, res) => {
 res.send("Generates exercise data by calling OpenAI with gpt-3.5-turbo");
});


exports.generateWorkout = functions.https.onRequest(async (req, res) => {
 res.send("Generates workouts by calling OpenAI with gpt-4");
});

For my own functions, I copied and pasted the code and the imports from my existing Next.js APIs. I got several errors from Firebase ESLint rules, and fixing them got so annoying and counterproductive, so I just ended up disabling the rules by setting strict to false in the tsconfig.json file in the functions folder.

Testing the Functions Locally

We can use the Firebase Emulator Suite to test the Firebase Cloud Functions locally. Here’s how to set it up and run your functions locally:

Navigate to your project’s root directory and set up the emulators:

firebase init emulators

When prompted, select “Functions” and follow the prompts to set up the Functions Emulator. Start the Firebase Emulator Suite:

firebase emulators:start

This will start the emulators, including the Functions Emulator.

Call your function locally using a tool like curl or Postman. Use the URL provided in the emulator output (e.g., http://localhost:5001/<your-project-id>/us-central1/<function-name>).

Functions Emulator Troubleshooting

On running the firebase emulators:start command, I got an error:

functions: Failed to load function definition from source: FirebaseError: There was an error reading functions/package.json:

functions/lib/index.js does not exist, can’t deploy Cloud Functions

The Firebase Functions emulator cannot find the required index.js file in the functions/lib directory. I missed building the TypeScript functions before starting the emulator. You can run the build command in the functions directory with this code:

cd functions
npm run build

This will transpile the TypeScript code to JavaScript and output it in the functions/lib directory. Once the build process is complete, start the Firebase emulators again:

firebase emulators:start

I saw this warning, so I updated the package.json to point to Node 18 rather than 16.

functions: Your requested “node” version “16” doesn’t match your global version “18”. Using node@18 from host.

Now, the Functions emulator started without issues.

I ran the following curl command to test one of the functions:

curl -X POST -H "Content-Type: application/json" -d '{"userPrompt": "I want something basic that can help me get comfortable upside down with some wall assistance.", "exerciseList": "do your magic"}' http://127.0.0.1:5001/handstand-quest/us-central1/generateWorkout

I got this response.

{"error":"Request failed with status code 401"}

The error “Request failed with status code 401” indicates the request is unauthorized.

Firebase vs Next.js Environment Variables

When I copied the code earlier, this is how I pulled the API key from OpenAI as an environment variable.

const configuration = new Configuration({
 apiKey: process.env.NEXT_PUBLIC_OPENAI_API_KEY,
});

Firebase functions have a different way of handling environment variables than Next.js. I had to use Firebase’s environment configuration to set environment variables for the Firebase functions.

To set the environment variable for the Firebase project, I ran the following command in the terminal:

firebase functions:config:set openai.api_key="your_openai_api_key"

I got this output, but I did not deploy it yet since I am still testing locally.

✔ Functions config updated.

Please deploy your functions for the change to take effect by running firebase deploy — only functions

In the Firebase function, I accessed this environment variable using functions.config() like this:

const apiKey = functions.config().openai.api_key;

I rebuilt the Firebase functions code and started the emulator again, and now I saw this error:

Failed to load function definition from source: FirebaseError: Failed to load function definition from source: Failed to generate manifest from function source: TypeError: Cannot read properties of undefined (reading ‘api_key’)

Deploying the Functions

I thought maybe I should deploy and check if Firebase “local” emulator would now pick up the environment variable.

firebase deploy - only functions

On deployment, I received the following errors.

/Users/alib/Code/GitHub/hq-exercise-catalog/functions/lib/index.js

4:1 error Parsing error: The keyword ‘const’ is reserved

/Users/alib/Code/GitHub/hq-exercise-catalog/functions/src/index.ts

1:1 error Parsing error: The keyword ‘import’ is reserved

✖ 2 problems (2 errors, 0 warnings)

The ESLint configuration was not recognizing the ES6 syntax. I updated the ESLint configuration to support ES6 syntax by following these steps to fix this.

First, ensure you have the following packages installed:

npm install - save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

Create or update the .eslintrc.js file in the root of your project with the following content:

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  rules: {
    // Add any custom rules here
  },
};

This configuration sets up ESLint to use the TypeScript parser and apply the recommended rules for TypeScript. After making these changes, the ESLint configuration should recognize the ES6 syntax and not throw errors related to the const and import keywords.

However, I was still getting the following error on the .eslintrc.js file:

‘module’ is not defined.

It appears the module keyword is causing an issue with the ESLint configuration. To fix this, I replaced the .js file with a .eslintrc.json file with the following content:

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "rules": {
    // Add any custom rules here
  }
}

On deployment, I got an even larger list of errors (summarized below):

/Users/alib/Code/GitHub/hq-exercise-catalog/functions/lib/index.js

2:23 error ‘exports’ is not defined no-undef

5:18 error Require statement not part of import statement @typescript-eslint/no-var-requires

5:18 error ‘require’ is not defined no-undef

29:44 error ‘setTimeout’ is not defined no-undef

131:5 error ‘console’ is not defined no-undef

✖ 12 problems (12 errors, 0 warnings)

Can you imagine how much time was wasted because of ESLint? Anyways, I updated the config once more:

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "env": {
    "node": true
  },
  "rules": {
    "@typescript-eslint/no-var-requires": "off",
    "no-console": "off"
  }
}

OK, it seems happy with the deployment now. Well, at least the ESLinting part. To sum up the deployment logs, there was this lingering issue in it:

Could not load the function, shutting down.

Please visit https://cloud.google.com/functions/docs/troubleshooting for in-depth troubleshooting documentation.

Function failed on loading user code. This is likely due to a bug in the user code. Error message: Provided module can’t be loaded.

Did you list all required modules in the package.json dependencies?

Detailed stack trace: Error: Cannot find module ‘openai’

Oops, I forgot to update the packages.json file. I am wondering how the npm run build passed! Anyways, I added the dependency, did npm install and npm run build, then deployed again. Finally, it succeeded.

Function URL (generateExerciseData(us-central1)): https://us-central1-handstand-quest.cloudfunctions.net/generateExerciseData

Function URL (generateWorkout(us-central1)): https://us-central1-handstand-quest.cloudfunctions.net/generateWorkout

✔ Deploy complete!

Project console: https://console.firebase.google.com/project/handstand-quest/overview

Now, I want to get back to the local environment testing to ensure things work as expected. I started the emulator and then re-ran the curl command.

I still got the same error in the emulator.

Failed to load function definition from source: FirebaseError: Failed to load function definition from source: Failed to generate manifest from function source: TypeError: Cannot read properties of undefined (reading ‘api_key’)

This is when I realized that “deployment” is not related to the local environment. Common sense, but sometimes, I don’t have that.

Local Firebase Env Variables

It turns out the environment variables need to be fed to the emulator via a config file.

Fetch the current environment configuration and save it as a JSON file:

firebase functions:config:get > .runtimeconfig.json

This command will create a .runtimeconfig.json file in your functions directory. Add this file to your .gitignore to prevent sensitive data from being committed to your repository.

Finally, it’s all working when the emulator starts. I reran my curl command from the terminal:

curl -X POST -H "Content-Type: application/json" -d '{"userPrompt": "I want something basic that can help me get comfortable upside down with some wall assistance.", "exerciseList": "do your magic"}' http://127.0.0.1:5001/handstand-quest/us-central1/generateWorkout

It’s working the way I expect!

Replacing Next.js APIs with Firebase Functions

Now that we’ve set up the Firebase functions and tested them locally for functionality, it’s time to update the Next.js application to call the Firebase Cloud Function instead of the Vercel API endpoint.

The Firebase Cloud Function URL will have the following format:

https://<region>-<project-id>.cloudfunctions.net/<function-name>

In my case, for one of my functions, this looks like this:

https://us-central1-handstand-quest.cloudfunctions.net/generateWorkout

Now, in my Next.js code, I’ll simply replace the relative path of /api/generateWorkout with the full path https://us-central1-handstand-quest.cloudfunctions.net/generateWorkout. After that, I’ll do the same for the other function — a very, very simple change.

const fetchGpt4Data = async (userPrompt, exerciseList) => {
       const API_URL = "/api/generateWorkout";


       const requestOptions = {
           method: "POST",
           headers: {
               "Content-Type": "application/json",
           },
           body: JSON.stringify({
               userPrompt,
               exerciseList,
           }),
       };

Firebase Functions in Production

Before testing the behavior of the functions within the Next.js web app, it’s probably wise to test this endpoint directly from the terminal first.

curl -X POST -H "Content-Type: application/json" -d '{"userPrompt": "I want something basic that can help me get comfortable upside down with some wall assistance.", "exerciseList": "do your magic"}' https://us-central1-handstand-quest.cloudfunctions.net/generateWorkout

Unfortunately, I received this error:

B-Pro:~ alib$ curl -X POST -H “Content-Type: application/json” -d ‘{“userPrompt”: “I want something basic that can help me get comfortable upside down with some wall assistance.”, “exerciseList”: “do your magic”}’ https://us-central1-handstand-quest.cloudfunctions.net/generateWorkout

<title>403 Forbidden</title>

<h2>Your client does not have permission to get URL <code>/generateWorkout</code> from this server.</h2>

I noticed (with help from Stack Overflow) a “private” setting in the package.json in the functions folder, so I set it to false and redeployed. Didn’t work!

When I tested the function in the Firebase Cloud Function console, it worked as expected.

https://console.cloud.google.com/functions/details/us-central1/generateWorkout?env=gen1&tab=testing&authuser=0&project=handstand-quest

I found steps from the same Stack Overflow thread that worked!

• Go to the Google Cloud Console (Not Firebase Console) -> Search For Cloud Functions to see the list of functions

• Click the checkbox next to the function you want to grant access to.

• Click Permissions at the top of the screen. The Permissions panel opens.

• Click “Add principal”

• In the “New principals” field, type “allUsers”

• Select the role “Cloud Functions” > “Cloud Functions Invoker”

• Select a role dropdown menu

• Click Save.

Wisely, Google shows a message to prevent you from making this decision to make your cloud functions insecure.

Although insecure, I proceed with this option until I guard my web app with login/signup capabilities.

With this change, the curl request to the public endpoint works as expected. Now that I have the endpoint running, I will test call it from the app.

Vercel Deployment

Let’s test the change in the staging environment.

Since I initialized the Firebase functions folder in the Next.js project that gets deployed to Vercel; I need to tell Vercel to ignore this new folder. This is the error I currently get on deployment to Vercel.

Type error: Cannot find module firebase-functions or its corresponding type declarations.

To tell Vercel to ignore a folder, we can add a .vercelignore file to the root of our project and add the folder or files we want to ignore.

I added the following line to the .vercelignore file and pushed the change to the git branch, so Vercel could automatically handle the deployment to the staging environment.

functions

Side note: If I deployed the Firebase functions to their own codebase, I wouldn’t have had to deal with this. Luckily, it’s a simple change to ignore the functions folder.

When testing in the staging environment, I got this error:

Access to fetch at ‘https://us-central1-handstand-quest.cloudfunctions.net/generateWorkout' from origin ‘https://hq-exercise-catalog-bl7zti3ol-alibad.vercel.app' has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

Fixing CORS Issues

I ran the Next.js local environment and went ahead and did some testing. I got the standard CORS error from localhost. It made me appreciate what Next.js/Vercel is doing behind the scenes.

Access to fetch at ‘https://us-central1-handstand-quest.cloudfunctions.net/generateWorkout' from origin ‘http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

Side note: This reminded me… It’s really expensive to build secure software, and by design, it slows companies down and has a major impact on reducing the innovation rate. Still, it’s necessary and the responsible thing to do. Building a side project, I don’t need to be that responsible!

The error message is a CORS (Cross-Origin Resource Sharing) issue. This issue happens when you try to make a request from a different origin (in this case

http://localhost:3000

) to a server (https://us-central1-handstand-quest.cloudfunctions.net/generateWorkout) that doesn’t have the necessary headers to allow requests from different origins.

I added the CORS headers to the Cloud Functions to resolve this issue.

First, install the CORS npm package:

npm install cors

Wrap the login in each function with this:

corsHandler(req, res, async () => {
    // current function code
}

This will deploy the Cloud Functions with the updated CORS headers. With the above steps, the Cloud Functions should now allow requests from different origins.

Unfortunately, when I tried to call the Firebase Cloud Function from my Web App, I still got an error saying the CORS policy blocked that access. So, where is the CORS policy defined?

Let’s look at the requests and responses in the Network tab in the Google Chrome Developer Tools.

There is an initial preflight request, as shown below:

OPTIONS https://us-central1-handstand-quest.cloudfunctions.net/generateWorkout

The OPTIONS request has an HTTP 204 from the server, with the following properties in the response header.

access-control-allow-headers: content-type
access-control-allow-methods: GET,HEAD,PUT,PATCH,POST,DELETE
access-control-allow-origin: https://hq-exercise-catalog-bl7zti3ol-alibad.vercel.app

The OPTIONS request is then followed by the POST Request.

POST https://us-central1-handstand-quest.cloudfunctions.net/generateWorkout

The response for the POST request is an HTTP 408.

HTTP 408 status code, also known as “Request Timeout,” indicates the server did not receive a complete request from the client within the server’s allotted time limit.

This means Firebase is timing out too, and the resulting browser error is misleading!

The response also includes a Referrer Policy set to strict-origin-when-cross-origin.

strict-origin-when-cross-origin

Regarding the Referrer Policy set to strict-origin-when-cross-origin, this security feature controls how much referrer information should be included when a user navigates from one origin to another. It’s not directly related to the timeout issue or the CORS configuration, so I will ignore it.

Firebase functions timeout limit

So Firebase also happens to have that timeout. However, the difference is that Firebase lets you configure it without subscribing to a $20-per-month plan. By default, Firebase Cloud Functions have a timeout limit of 60 seconds. You can increase this limit to 540 seconds (nine minutes).

For the generateExerciseData function, the 60-second timeout is good enough since gpt-3.5-turbo is much faster than gpt-4, which is used in the generateWorkout function.

Increasing the timeout limit may result in higher resource usage and, thus, costs. However, I’m willing to try and see how that plays out. I highly doubt it’ll hit $20 every month. We’ll see how that goes with time when traffic patterns change. For now, I’m expecting it to cost less than $1 a month.

To change the amount of timeout in the generateWorkout Firebase function, let’s update the function definition in the index.ts file. I think I want it to wait up to three minutes.

exports.generateWorkout = functions
  .runWith({ timeoutSeconds: 180 })
  .https.onRequest((req, res) => {
    // Your existing generateWorkout function code
  });

I deployed the change to Firebase and finally got unblocked!

Streaming (Timing in)

To speed up the whole experience and make it easier to enjoy, streaming the GPT data and gradually reflecting that in the UI would be a good idea. This will reduce the time it takes to start seeing data, and it will avoid timeouts in the first place.

Upon reflection, it became clear that the current design approach was not optimal, which led to the need for a workaround to address the timeout issue. A more efficient approach would have been to deliver the data in smaller, more manageable chunks from the outset.

Time is a critical factor, and while transitioning from Next.js APIs to Firebase Functions, authentication and CORS issues caused a delay.

In my upcoming article, I will explore whether streaming is a more effective design strategy. It’ll all depend on how long it will take and whether unreasonable blockers come up.

It will be tricky, though, since my internal implementation gets GPT to return the exact JSON format, which would be hard to stream.

Conclusion

I hope this article gave you the idea and the details on how to update your Next.js application to use Firebase Cloud Functions instead of Vercel API endpoints.

By making this simple switch, you can save a significant amount in yearly costs without sacrificing the functionality of your application.

Although Vercel is an excellent platform, the ten-second timeout can be a hindrance. Nonetheless, I remain a big fan of Vercel and appreciate its numerous benefits.

In this article, we’re diving headfirst into the remarkable potential of OpenAI’s ChatGPT and exploring how effortlessly it can be leveraged in a NextJS and React app. I am hoping you’ll find valuable insights into the development process, including the time required to code various components and the simplicity of incorporating ChatGPT into modern web applications.

Interestingly enough, I managed to squeeze in this project during my 10-day trip to Portugal, juggling multiple commitments, such as:

1. Supporting my 12-year-old son as he joins Washington’s Soccer EPD team in the Iber Cup held in Portugal.

2. Tackling end-of-quarter work responsibilities, attending three meetings totaling four hours, and dedicating around six hours to focused work.

3. Spending quality time with my wife as we discover the enchanting city of Lisbon. Reuniting with my childhood friend, Abbass, after 12 long years. He traveled from Germany to spend two memorable days together with our families.

Despite the packed schedule, I was determined to harness the power of ChatGPT and bring a new feature to life before returning to the daily grind in Seattle, WA. So, join me as I share my experience of balancing work, family, and cutting-edge web development on this unforgettable Portuguese adventure.

Legend

• 💬 for working on this article and writing code with the help of ChatGPT.

• ⚽ for soccer-related activities.

• 🫶 for fun and quality time. You’ll notice I won’t be sharing out any details on this front, just to keep this article’s size manageable.

• 👔 updates related to spending time doing work for my employer.

Disclaimer: While I don’t identify myself as a web developer per se, my background as a Software Engineering Manager and a generalist has equipped me with a passion for learning new technologies — especially when they can be used to achieve beneficial outcomes for others. So, regardless of your expertise level, I hope you’ll find valuable takeaways from my experience as I dabble in the world of web development with ChatGPT, NextJS, and React. Happy reading!

Problem Statement

Over the past few years, I have dedicated 2–12 hours per week to develop a mobile app, Handstand Quest, aimed at helping individuals learn or improve their handstand skills. Four months ago, I decided to expand the project by creating a complementary web application using NextJS and React to enhance my React development expertise.

The existing web application, available at https://catalog.handstandquest.com, displays a catalog of exercises, allowing users to access individual exercise pages for detailed instructions and YouTube videos.

To improve the user experience and encourage engagement, I seek to implement a straightforward and efficient mechanism at the bottom of the exercise list for users to suggest new exercises with minimal effort. This feature aims to keep the catalog fresh, comprehensive, and tailored to the diverse interests and preferences of the user base.

As you reach the bottom of the exercise catalog, you’ll notice an empty space. In this area, I aim to introduce a user-friendly mechanism for suggesting new exercises.

To provide some context on the type of data that would need to be provided to suggest an exercise, let’s take a look at the current design of an exercise page within the application.

I would like to leverage GPT 4 to generate most of the code. I will not be listing all the code generated by ChatGPT. Instead, I will show the progression of the user interface and mention the specific prompts or tweaks to the code that I’ve had to make to get it to work the way I would expect.

Initial Prompt to ChatGPT

I started right away, telling ChatGPT what I want.

On my NextJS React TypeScript app, I would like to introduce a component that does the following:

- Asks the user, “Didn’t find an exercise you’re looking for?”. Place under that a button for the user to “Suggest an exercise”
- When the button is clicked, a very user friendly dialog opens up and it lets the user specify exercise information and submit or cancel. The dialog also has a close button in the top right corner.
- The exercise info consist of the following: Exercise name, Exercise category selected from a dropdown, Exercise subcategory, How To Instructions, One or more tips each having a title and a body, an image that could be uploaded or referenced via a link or looked up from a free online image library, a video that can be looked up from YouTube, and an intensity level that can range from 1 to 15.
- I would like to give the user an option, only after specifying a title, to fully generate the rest of the information by calling the GPTAPI.

At a high level, without the code, here are the steps that ChatGPT asked me to follow:

1. Install Material-UI and its dependencies, if you haven’t already.

2. Create a new file named ExerciseSuggestion.tsx and import the necessary dependencies.

3. Create the ExerciseSuggestion component with the following structure.

4. Add state variables and handlers for opening and closing the dialog, as well as handling form submission.

5. Implement the exercise input form inside the DialogContent component.

6. Add state variables and handlers for the form fields and GPT API call.

7. Implement the form field change handlers and bind them to the form fields.

8. Add the exercise category dropdown options and other form fields.

9. Create the handleTipsChange function for handling the addition and updates of tips.

10. Implement the tips input form and add the handleTipsChange function.

11. Implement the inputs for image and video.

Step 1: NPM Install

On running the NPM install on the command line, I got this error.

While resolving: undefined@undefined
Found: react@18.2.0
Could not resolve dependency: peer react@”¹⁶.8.0 || ^17.0.0" from @material-ui/core@4.12.4

I prompted ChatGPT that I got this error on npm install. It gave me options to downgrade React or upgrade to the latest Material-UI version. I chose the latter. Note that it also suggested that if I choose the latter, I need to update my import statements.

Running the new NPM install succeeded.

Steps 2, 3, 4 & 5: ExerciseSuggestion Component

To begin with, I asked it to rewrite this file based on the latest Material-UI version. I think it included steps 2–5 in the generated code.

It gave additional NPM components to install, which executed as expected on the command line. I then created a new file called ExerciseSuggestion.tsx and copied the code from ChatGPT.

It also included the following summary of what the file does:

In this example, I’ve created a basic ExerciseSuggestion component that displays a button and a modal dialog when clicked. The dialog contains input fields for the exercise name, category, subcategory, and how-to instructions. You can extend this component by adding more input fields for tips, image, video, and intensity level as required.

Note that this example assumes you have an array of categories passed as a prop. You can replace this with your own data or fetch it from an API as needed.

New Step: Plugging the Component

I told GPT to include the generated component in a parent component, that has categories in the following format:

exerciseCategories: {
 id: ExerciseCategory
 categoryName: string
}[]

I included the component as it suggested, while ignoring some of the other things it suggested like initializing the categories array.

<ExerciseSuggestion categories={exerciseCategories} />

It then recommended that I update the ExerciseSuggestion component to accept the categories prop and map the categories correctly inside the Select component.

So I plugged in the code as it suggested. The only other thing I had to change was the type of the id, from string to my own defined ExerciseCategory enum.

import { ExerciseCategory } from '../lib/exercises'


interface ExerciseSuggestionProps {
 categories: { id: ExerciseCategory; categoryName: string }[];
}

This is how the app looks like now.

When the “Suggest An Exercise” button is clicked, it opens this dialog.

At this point, I made my first git commit.

Introduce a button to suggest an exercise and open a dialog to fill in basic details

March 30th 💬🫶: It took me about an hour to complete the coding and documentation up to this point. Earlier, I had spent over 3 hours working with GPT to finish the “Was This Helpful” feature visible in the Exercise Details Page screenshot I shared previously. After making good progress, I decided to take a break and pack my bags for my upcoming trip to Portugal before returning to the task later.

Step 6: GPT API Call

It’s now around half an hour past midnight. My brother-in-law and I are enjoying a well-deserved break, engaging in casual conversation and sharing a few laughs, all while watching some of his favorite shows. Amidst this relaxing atmosphere, I have my laptop in front of me, working on the project. Juggling a full-time job, I’ve learned to seize moments like these to “paint with code” and make progress on my passion projects.

I’ll skip this step for now until I have all the other parts completed.

Step 7: Saving State in React

In this step, I’ll integrate more code into the ExerciseSuggestion component, allowing the form updates to be saved as React properties. This way, they can be accessed later for tasks such as storing data in the backend or sending an email notification with the collected information.

After plugging in the code, I encountered an error. I shared the error with ChatGPT, and in response, I received an updated code solution to address the issue.

I apologize for the confusion. It looks like the type of the event in the handleCategoryChange function is not compatible with the onChange event of the Material-UI Select component.

I proceeded to update the handleCategoryChange function with the new code, and thankfully, no errors occurred. Below is a screenshot showcasing the recent modifications.

Interestingly, this time, ChatGPT included the code to display the “Intensity Level” field — a numeric value — along with the appropriate UI component to modify and maintain it as a number.

Step 8: Add Exercise Category Problem

That has been already added in previously generated code, so skipping.

Steps 9 & 10: Add Tips

I plugged in the code for tips, which added the JSX for this component, along with the JavaScript to store state and handle adding new tips.

Now, it shows an “Add Tip” button in the form.

Upon clicking the “Add New Tip” button, the title and body fields for adding a tip are displayed, allowing you to add one or more tips. The positive aspect is that the tips fields were now automatically “connected” to React state variables.

Although the current user interface isn’t visually appealing, we plan to address that later.

Step 11: Image and Video

I revisited this step, and since the code appeared incomplete, I requested ChatGPT to provide the code for the image and video. However, I received the same response, so I decided to plug in the code anyway.

As a result, it merely added the text fields without URL validation. Ideally, I’d prefer a more user-friendly experience. I plan to address this issue later, but for now, I’ll git commit the progress made so far.

Save React state and add new fields for tips, intensity level, video and image

I pushed the git branch, and thanks to Vercel, I got a Slack notification that the deployment to the staging environment succeeded. I clicked on the “Visit” button in Slack to manually confirm all the new changes in the staging environment.

Refining The User Experience

Having completed the initial steps recommended by ChatGPT, it’s time for me to take a step back and evaluate the current user experience to determine my next course of action.

To stay focused on what’s essential, I revisit my original requirements. I’ve resolved to prioritize a solid user experience before diving into leveraging GPT for generating exercise content. While the excitement may have diminished slightly, I remain committed to achieving the desired outcome, as witnessing the final result will be rewarding in itself!

Category Field Title

I’ll start with the little things. Looking at the UI, when the user tries to pick a category, the field title shows with the field border striking through it.

I also see the same behavior in the tip body and title.

So I ask ChatGPT.

When the exercise category field is in focus mode, the border of the field is striking through the title.

ChatGPT gave me back the code to add a background color to the label (field title) and some padding, so it does not overlap with the border when the input is focused. Although it’s not what I was thinking exactly, I decided to give it a try and see what it looks like.

The code gave some errors, related to deprecated code and a div referencing a CSS file. It dawned on me that I haven’t needed a single css change so far!

March 31st 🫶: Anyways, I’m tired right now, and I am going to bed. I’ll come back to this as soon as life lets me.

March 31st 💬: Next morning, I have 30 minutes before Uber shows up for the ride to the airport. Let’s see if I can get this done.

One minute later with minor tweaks, I got the code running and I am actually happy with the results.

Tips Title and Body Fields

I need to do the same for the tip body and description. So I asked ChatGPT, and it gave me the code and told me that the code will apply the required styles to the title and body fields of tips, ensuring that the border does not strike through the label.

There was an error because it decided to introduce a change handler for each of the tip title and body, when in the past it had one change handler for both. I fed it the error and it gave me the two new functions to plug in. there was another error, which I fed back in and now it gave me the correct code.

Ok, so the field now renders nicely when it is focused.

However, it’s broken when the text fields have text in it.

Well, in this case, I feel like ChatGPT complicated my life a bit and made me a bit dumber. What I need to do is figure out whether I should continue down the path.

I’m choosing to just remove all the new code and get back to the original state, then just tell ChatGPT to add some vertical padding to the tip title and body.

Now, I am paying a bit more attention (learning mode) and I asked ChatGPT what the syntax is all about.

The sx prop is a shorthand property provided by Material-UI to apply styles to a component. It allows you to define style rules using an object syntax, where keys correspond to CSS properties, and values represent the styles to apply.

In this case, sx={{ mt: 2, mb: 1 }} is setting the top margin (mt) to 2 units and the bottom margin (mb) to 1 unit. Material-UI uses an 8px spacing unit by default, so 2 units will correspond to 16px (2 * 8px) and 1 unit will correspond to 8px (1 * 8px).

The sx prop can be used to apply various styles, such as padding, margin, color, and more, in a concise and convenient way.

So all I did was just add the sx property to each of the two fields (title and body). Now, I have a fix to the strikethrough issue!

Time for a git commit:

Fix issue where border of field strikes through its title for categories and tips title/body

March 31st 🫶: 10 minutes before Uber is here. Time to get in travel mode.

Tips Grouping

March 31st 💬 ⚽: Alright, I am back. It’s 1 pm and I’m at the airport. My flight departs at 6 pm. I’m that early as I had to drop my kid for an earlier flight with his soccer team. Actually, that’s the main reason I am traveling to Portugal. Washington EPD team is practicing with Academia Cristiano Ronaldo — Sporting Clube de Portugal, then participating in the Iber Cup, which is one of the largest Youth Football/ Soccer Tournaments on the planet.

The next quick win in the user experience I want to have is to be able to easily differentiate the list of tips. Right now, it’s confusing.

I want to place the title and body into a Tip box that represents the order of the tip in the tips array. For example, the first tip would have a box with title “Tip 1” and within it, there would be a “Title” field and a “body” field.

I just pasted the paragraph above into ChatGPT and incorporated the provided code, which involved importing a new component from React. Although the code triggered an error, fixing it was a straightforward task.

The updated user interface, as shown below, may not be perfect, but it’s a considerable improvement compared to its previous state. For the time being, I am satisfied with the progress.

I have a bug though. Whenever I type something in the body, it shows it in the title and limits it to one character. Weird.

I pass the exact paragraph as is to ChatGPT and I plug in the changes, problem solved! For some reason, I don’t know why, and for now, I don’t care. I want to move on to building something fun.

Wait, it was actually my error copy/pasting the same handler code parameters for both the title and the body, so it was updating the title when I was updating the body!

One last thing, I noticed there is no mechanism to remove a tip once it is added, so I’ve asked ChatGPT to add a close button in the top right corner of the tip box that would remove the tip box and the tip item from the array.

I plugged the code in and it added the X on the Title field. I kind of want it on the box itself above the title field. Once more, I’ve resolved that issue by talking with ChatGPT.

Exercise Image Experience

I’m trying to remember the name of some websites that offer free images, so I just asked ChatGPT.

- Unsplash (

https://unsplash.com/

): Offers high-resolution photos contributed by photographers from around the world. You can use these images for free with proper attribution.
- Pexels (

https://www.pexels.com/

): Offers a wide variety of free stock photos and videos, which can be used for personal and commercial projects without attribution.
- Pixabay (

https://pixabay.com/

): Provides a large collection of free images, illustrations, vector graphics, and videos under a Creative Commons Zero (CC0) license, which allows for use without attribution.
- Burst (

https://burst.shopify.com/

): Powered by Shopify, Burst offers free high-resolution images for entrepreneurs. These images can be used for personal and commercial projects.
- Freepik (

https://www.freepik.com/

): Offers free and premium vector graphics, illustrations, and photos. You can use free resources with proper attribution.

Given the above description, although I am very familiar with Unsplash, I had no idea it required attribution! For this reason, I decided to explore Pexels and Pixabay. Hopefully, they are at the same level of quality as Unspalsh.

March 31st 🫶: That said, I need to go give my wife a 5 minute massage, because we had a deal, to take turns massaging each other. Be right back.

March 31st 💬: Ok, I am back at 1:40 pm.

I’ll just go ahead and explore whether there is an easy way to let a user lookup an image from Pexels. Here is my prompt to GPT:

Enable the user to lookup images from Pexels and when the user selects an image, update the value of the Image TextField to the url of the selected image.

Here are the things GPT told me to do. Let’s see how long this will take.

- Get a Pexels API key by signing up for a free account at https://www.pexels.com/api/new/. Make sure to replace “YOUR_PEXELS_API_KEY” with your actual Pexels API key.
- Install Axios, a popular HTTP client for making API requests, if you haven’t already:
- Create a new state variable to store the search results and the selected image URL:
- Create a function to search for images using the Pexels API:
- Create a function to handle selecting an image from the search results:
- Create a UI to search for images and display the results. You can use Material-UI components like TextField, Button, and Grid for this. When a user clicks on an image, call the handleImageSelect function with the image URL.

In about a minute, I generated a Pexels API key. I then npm installed Axios with no issues. I easily plugged in steps 3 and 4 into the code. Steps 4 and 5 didn’t look like they would plugin well into my component, so I explicitly asked ChatGPT again to give me the code as part of the ExerciseSuggestion component.

Can you give me this code as part of the ExerciseSuggestion component

It generated the code for the component, but not all of it, so I had to carefully pick what I wanted to plug in.

• It seemed like it updated the dialog to have the top right close button that I initially requested, so I thought I might as well copy that part and see what it looks like. This produced some errors due to referencing new components from new libraries, so I just imported those.

• I copied the logic to search images. I made some minor variable and method name changes, along with including new components.

And there you have it — this is what the current UI looks like. Although it functions well, there’s still room for improvement in the overall user experience.

March 31st 💬 🫶: It’s currently 2 o’clock, so it took me around 20 minutes to complete. However, I had some distractions while talking to my wife, so I believe the outcome is still solid. I’m git-committing this change then going for a break.

Enable user to search images from Pexel

Improve Exercise Image Experience

March 31st 💬 🫶: I am back from the break, 4 hours later. I tried to sleep but couldn’t. My flight got delayed by an hour. I don’t care, I am coding with ChatGPT.

Observing the current experience, there a few things I’d like to explore:

1. It’s confusing to the user that if you search images, they will show up. It’s also not clear that when you click on an image, it will automatically populate the Url field. Also it’s confusing having both the Url and Search fields showing at the same time without additional cues.

2. Given that I won’t actually end up using the exact images for the exercise, copyrighting is not much of a big deal. So I’m thinking I want to fetch the images via a Google search instead for accuracy.

3. For the API tokens in the code, I want to make sure those are securely stored in environment variables rather than in the code.

I just dumped the first two bullets above unto ChatGPT to see what I would get.

I got some new code, and it replaced the image search capability with an ImageSearch component. So I asked it to generate the code for that component and plugged everything in. Things are a little better, but not yet what I was looking for.

I asked ChatGPT to replace the ToggleButton with a Chip, and now it looks as follows:

Fields Grouping in Tabs

The “Suggest Exercise” form has way too many fields at this point. ChatGPT generated the skeleton code for me based on this request. I took the skeleton code and plugged it into the file accordingly.

Here is the latest code for ExerciseSuggestion.

<all the code>

I want to add tabs at the top that would include different set of fields as follows:

- About, which includes Exercise name, category, subcategory and How to Instructions.
- Media, which includes the image url/search and the video url
- Tips, which includes the tips, defaulting to one entry in the tips array on initialization

I now have all the fields grouped. First tab looks good.

Second tab for the Media, not as much. Also, image search regressed. Not sure if that happened now or earlier with component refactoring. I’ll get to it later.

The tips dialog should have at least one item already pre-created by default.

I also want both the Media and the Tips tabs to retain the same width as the About tab.

Coding Without ChatGPT

March 31st 💬 🫶: I am now on the airplane, with no internet connection. To be honest, I feel some inner friction continuing, just given how much faster I could be going if I was working with ChatGPT.

I’ll push through just to fix those last issues I’ve discovered in the following order.

1. Fix the layout in the Media tab

2. Fix the issue with image search not working. I think this is due to the lack of internet connection, so skipping for now.

3. Have a default tip created

4. Fix the width of the dialog no matter which tab is selected

Those were such quick fixes, and I don’t think it would have been that much faster doing it via ChatGPT.

Intensity Level

I’d prefer a more consistent and user friendly experience for the intensity level. Currently, it’s a number field that can be changed with a spinner.

I’d like to use instead the existing “Intensity Level” component that shows up when you open an exercise details.

To do that, I replaced the <TextField> with <IntensityLevel> and plugged in the IntensityLevel an onChange event handler that lets it notify the parent component of the changed intensity level.

March 31st 🫶: I managed to get the above done before I was asked to stow away my laptop for takeoff. However, for the rest of the flight, I tried to get some sleep but unfortunately, I was unsuccessful.

Image Experience — Continued

April 2nd 💬 🫶: Alright, I am in Lisbon, Portugal right now, sitting on the balcony. Last night and this morning, we went out and explored the neighborhood. I will work for about an hour then go to a local market.

Looking at the current experience:

For the image url and search experience in the Media tab, I would like to make the following changes:

- Combine the “Image Url” text field and the “Search Images” text field into one Text Field with placeholder text “Search Google or type/paste an Image URL”.
- Show a search icon in the “Search Images” field
- Include a button on the right side of the text field that lets a user upload an image. When the image is selected, it is uploaded to Firebase storage, with a field name that matches the exercise name, with spaces replaced by underscore characters. The text field is updated with the new image url, and the image is previewed in the space below the text field.
- When there is text in the field, show a “clear” button. Add a separator between the clear button and the image upload button to its right.
- When the user enters a valid url, validate that the url points to an image. If it does, preview the image in the space below the text field. If it is a url that does not point to an image, show an error message. Otherwise, if it is not a Url, search Google (instead of Pexel) based on the text in the text field. The user should see a gallery of images corresponding to the search result. The user should be able to navigate the image pages. When the user selects an image, hide the image gallery, update the text field with the Url, and preview the image in the space below the text field.

I told ChatGPT to give me the code for the above given the current code I have for the ImageSearch.tsx component.

It generated the code with the following instructions:

This updated version of ImageSearch.tsx includes the combined TextField with the search icon, clear button, and image upload button. It also adds the image preview below the TextField for the selected image. Finally, it retains the original functionality of displaying search results in a Grid.

Make sure to replace the `searchImages` function with a call to the Google Custom Search API instead of the Pexels API. Also, replace `’Your_Exercise_Name’` with the actual exercise name in the `handleImageUpload` function.

After plugging in the code and fixing how Firebase storage is being imported and used, here is the updated UI I see.

Few things work:

• Search icon and clear button added.

• A preview image is added when you select and image from the gallery

• When the clear button is clicked, it clears the text, the preview image and the gallery

• File upload button is added and lets you selected a file to upload

Few things did not change or do not work as expected:

• After uploading a file, nothing happens. This is likely an error I need to resolve.

• Image search is still going through Pexels.

• No page navigation added in image search gallery

• The Image URL field is still there along with the URL/Search Chips

Part of this is not ChatGPT’s fault, since I only gave it the code of the ImageSearch component, while the Image URL and Chips actually live in the parent Component.

Merging Search Keyword and Url for Image

I provided the code for parent component and asked ChatGPT:

I want to remove the URL and Search Chips, and merge the Image URL field with the ImageSearch component as described earlier.

Selecting an image now updates the Image URL field.

My intention was to combine the Image URL field and the Search field into one. I’ll reiterate that to ChatGPT.

Combine the Image URL and Search fields into one. Name the new field “Image URL” and move the current field title as placeholder text “Search Google or type an Image URL”.

Also, apply the following requirements I mentioned earlier:

• When the user enters a valid url, validate that the url points to an image. If it does, preview the image in the space below the text field.

• If it is a url that does not point to an image, show an error message. Otherwise, if it is not a Url, search Google (instead of Pexel) based on the text in the text field. The user should see a gallery of images corresponding to the search result.

• The user should be able to navigate the image pages.

• When the user selects an image, hide the image gallery, update the text field with the Url, and preview the image in the space below the text field.

It generated code but not taking into consideration the latest changes I’ve applied to ImageSearch and its parent, so I’ve asked it to repeat with the latest code provided.

With the new generated code, I fixed a bug, and also passed the exerciseName from the parent to the ImageSearch component. Here is the value that ChatGPT added:

• Added validation for url and image url. Added Error Message for when Url is not a valid image

• Called Google APIs instead of Pexels with placeholders for API_KEY and SEARCH_ENGINE_ID

• Seemed to merge the two fields

Google Image Search via API

It pointed out how to get the API_KEY, which was easy to generate. I asked it how to get SEARCH_ENGINE_ID, and it gave me the link, which I followed to create the “engine” to search images. On creation, it gave me the ID which I copied and pasted into the placeholder in my code.

Now that I’ve done that, Google Search works!

However, It seems to have lost the behavior to hide the gallery when an image is selected.

Image Url Preview

Pasting a link in the search box magically previews the image, so there is at least also a win on that front.

Side Note: The above is a picture of Portugal’s Sporting Club taken at some point in time. I quickly recognized player number 8, Bruno Fernandes. He joined Manchester United in January 2020 and has since become an integral part of the team’s midfield. Before joining Manchester United, Fernandes had a successful career at Sporting Club, where he won the Primeira Liga and the Taça de Portugal in the 2018–19 season.

Url Image Validation

Another win is showing an error message when something looks like a URL but is not a valid image url.

Hide Gallery on Image Selection

I asked ChatGPT to hide the gallery when an image is selected. It introduced a showGallery state that I plugged into the code.

Improved Image Validation

When I select an image though, it says it’s invalid. I told ChatGPT that <copied url> is a valid image url but I am getting a validation error on it. I got the answer below and I updated the code accordingly using the original function name.

Apologies for the confusion earlier. It seems that the isImageUrl function is unable to validate the image URL you provided. To fix this issue, you can use a more robust approach to determine if the URL points to an image. You can do this by fetching the image and checking the content type of the response.

Here’s the updated validateImageUrl function using this approach.

Multiple Searches

Another bug I found was, when an image is selected, and I clear the search box and then try to search, the behavior of “searching” seems to be no longer active. I told that to ChatGPT and it gave me the fix described below. The fix didn’t create the desired behavior, so I looked at the code and made the appropriate fix. Following ChatGPT blindly in this case would have created more problems than solved.

You’re right. The issue occurs because the gallery is not shown again when you start searching after clearing the search box. To fix this, you can update the useEffect hook that triggers the search to also set showGallery to true when the searchText changes

Note: it turns out there was a bug with this code and an unnecessary state (showGallery) being used.

Debouncing

Another thing I do not like about the experience is the fact that the UI refreshes the list of images as you type, which creates a weird flickering effect. As a result, I told ChatGPT to only apply the search when the user pauses typing, and it gave me the debounce code, which I applied successfully.

Pagination

Next, I would like to be able to let the user move between pages of the image gallery.

I gave that to ChatGPT, and it gave me the code including installing the @mui/lab NPM package. Luckily, I knew better to tell ChatGPT that I want to use Pagination from @mui/material not @mui/labs.

I plugged in the code, and I hit the error where variable totalPages does not exist, and when I asked ChatGPT, I got what I wanted.

I now have pages for navigation. However, the max page number is so high, when I click on it, Google seems to ignore my search.

I’m thinking just choose a min between 1000 and total pages, and see if that practically does the job for what I am looking for. Even with that, Google is returning back to me an HTTP 400 when I try to access page 1000. Maybe I should just update the Pagination behavior to just navigate the next page rather than allow navigation to the max page. ChatGPT helped me get that done.

If I search for something, go to page 5, then search for something else, the page is not reset to 1. I fixed that myself by resetting currentPage back to 1 every time the searchText field changes.

Considering Infinite Scrolling

Another issue was the fact the UI jumps back to the top every time I change the page, so I thought I might as well replace pagination with infinite scrolling. I have ChatGPT’s help after all! Here is what it told me to do to transition to infinite scrolling:

To replace the Pagination logic with infinite scrolling, you can use the IntersectionObserver API to detect when the user has scrolled to the bottom of the search results. Here’s how you can modify the ImageSearch component to implement infinite scrolling:

- Remove the Pagination component and related state variables (i.e., currentPage and totalPages).
- Create a new state variable to track the loading state of the search results:
- Create a reference for the element that will trigger the loading of more results when it becomes visible:
- Create a function that will load more results and append them to the current search results:
- Update the searchImages function to return the fetched results instead of setting the state directly:
- Set up an IntersectionObserver in a useEffect hook to observe the loadMoreRef element and trigger the loadMore function when it becomes visible:
- Add a div element as a child of the Grid container with a ref to loadMoreRef. This element will trigger the loading of more results when it becomes visible:
- Optionally, display a loading spinner when more results are being loaded:

The code had a lot of issues, to begin with, it was pulling the same images for every page. I decided to just skip infinite scrolling and display 6 images at a time and show the pagination above the gallery.

April 2nd ~2pm 💬 : Few hours passed, my wife is starting to get frustrated with me stuck on a laptop while we’re on vacation! It’s time to go do some exploration in Lisbon!

Image Url State

April 2nd ~7:30 pm 💬 🫶: Back from another exploration going the other way in the neighborhood.

I’ve discovered that the image url set in the ImageSearch component is not propagating to the parent component, so I fixed that.

I also refactored the code by removing some unnecessary states like showGallery and selectedImage. I think I picked those up from ChatGPT without paying much attention that the code could be written without them.

Again, when the image field was cleared, the imageUrl in the parent was not being reset to empty. Those are some of the details you’re likely to miss when you end up relying too much on ChatGPT.

Move Video Url to its own tab

In preparation to work next on Video, I decided to create a new tab “Video” and move that field there.

Better Image Validation

As I was testing, I noticed that the isImageURL logic that I’m using sometimes thinks an image is valid, even when it doesn’t load on a web page. Ex: https://www.hotelzaza.com/hs-fs/hubfs/ZaZa-HOU-CONCEPT-SUITE-AnAffairToRemember.jpe.

I changed the behavior of validation, but that was not enough. Given that the image validation function is async, and it was being called in useEffect as a synchronous function, this was creating some unexpected behavior. Apparently, ChatGPT missed that. So I defined a new async function within useEffect and managed to find a way to get it to work.

Another situation where relying initially on ChatGPT could cause unexpected issues down the line.

Storing Google API Keys safely

ChatGPT plugged the Google API secrets in code. With its help, I moved it to NextJS environment variables.

Automatically searching based on the provided exercise name

If the user provides an exercise name and the Image Url isn’t already set, I would like to automatically populate the Image Search field with the exercise name and automatically search for it. Done, and you probably know by now who helped me out.

Knowing when the user should select an image

Next, I’d like to make it easy for the user to know when an image is selected.

And when they search in the gallery, I want them to know that they can select an image from the gallery.

Image Upload Behavior to Firebase storage

The one last very visible experience that’s not working is the ability to upload an image. I fixed that and also showed an error message when upload fails. This time, without ChatGPT’s help.

Google API Safe Search

I also realized I need to turn SafeSearch on, which I did from the Search engine settings I’ve created earlier.

However, even after a few days, I was able to search for unsafe things. I asked ChatGPT.

The Google Custom Search API sometimes may not fully respect the SafeSearch setting of the Custom Search Engine (CSE) configuration. In such cases, you can enforce SafeSearch by adding the safe parameter directly in your API requests.

To enforce SafeSearch in your API requests, set the safe parameter to active:

However, please note that SafeSearch is not perfect, and there might still be some explicit content that slips through the filter. It’s always a good idea to have additional measures in place if content safety is crucial for your application.

Although content safety is not paramount, I still prefer to ensure its protection. Therefore, I took the necessary steps to make the change, and it successfully resolved the issue.

YouTube Video Experience

Who would want to provide a video with this experience? Probably, no one.

I’m not going to enable any file upload capabilities. Instead, if I make it really easy for a user to find a YouTube video, then I’ve achieved my goal.

I can start to imagine what this looks like, but what if I pass it on to ChatGPT and see what it comes up with.

It generated a new component to search YouTube via API. The logic was insecurely done on the client side (exposes API key), so I instructed it to move it to the server side. It generated a new API route in NextJS with the logic to search YouTube for videos given a search keyword. The url being hit in the React component changed from https://www.googleapis.com/youtube/v3/search?part=snippet&q=${query}&type=video&key=${API_KEY} to /api/youtube-search?query=${query}.

Here are the YouTube search results.

When an item is selected in the list, the video name is passed back from the Dialog back to the Video tab.

I asked GPT to generate thumbnails for the videos.

I want the thumbnails to be larger and have the Youtube play button on them. When clicked, I would like to be able to play the video in a small popup dialog. I would also like to add a “Select” button under each thumbnail to actually enable the selection of the video.

So I asked ChatGPT, and I updated the component after I installed react-player via NPM.

The layout is weird. Clicking on a video opens a dialog with the thumbnail barely visible, and when clicked, it takes you to YouTube in a new tab.

April 2nd ~ 9pm 🫶: I’m out. I need a break from all of this.

April 3rd at 4 pm 👔: Two hour work meeting, coupled with another 1–2 hours of work.

Improving YouTube Video Experience

April 4th 1 am 🫶 💬: After a full day of exploring, drinking, walking and eating in Lisbon, it’s 1 am, and I’m ready to write some code. I mean, have ChatGPT write me some code.

Is my role in this as a programmer, with ChatGPT being the assistant? Or am I more of a Code Plugger?

For that, I also asked ChatGPT.

As for your role in this scenario, when working with ChatGPT, you can think of yourself as a programmer with ChatGPT being your AI assistant. You provide the high-level requirements and guidance, and ChatGPT helps you by generating code snippets or offering suggestions. The term “Code Plugger” isn’t a standard term in the industry, but if you prefer, you could use it to describe your role while working with ChatGPT.

Or a Code Connector?

Here is what ChatGPT has to say about it.

In summary, while “code connector” is not a standard term, it could be interpreted as a concept, tool, or method that helps connect different parts of code, modules, or systems within software development.

Then I asked what if the Code Connector is a human?

If a “code connector” were a human, it would be someone who plays a key role in integrating different parts of a software system or facilitating communication between different software components, teams, or platforms.

Plugger or Connector, it’s time to move on and get productive getting things done!

Here are the improvements I would like to make:

- Show the YouTube videos in a grid that is web responsive, it becomes more like a column on a mobile device
- When the video thumbnail is clicked, I would like to play the YouTube video within the thumbnail
- I would like the Play button on the YouTube video to be more visible

Here are the changes ChatGPT recommended when I asked:

Here’s an updated version of your code to improve the user experience as you requested:

- Display YouTube videos in a responsive grid that becomes a column on mobile devices.
- Play the YouTube video within the thumbnail when clicked.
- Make the play button more visible.

To achieve this, I’ve made the following changes:

- Imported Grid and GridList from @mui/material.
- Created a new CSS file named YouTubeSearchBox.module.css to style the components.
- Modified the ListItem component to use Grid and GridList for responsiveness.
- Updated the Play button to be more visible with a background color.

There were some bugs. For example, ChatGPT imported GridList which does not exist in @mui/material, but it was able to fix that on prompting.

Playing the video still shows me this weird behavior.

Some additional things I would like to change:

- On clicking the button to play the video, I want the video to play within the thumbnail. It might be better to just iframe the YouTube video rather than using react-player/youtube.
- I would like the SELECT buttons to be horizontally centered.

ChatGPT told me:

I’ve made the requested changes:

- Replaced react-player/youtube with an iframe to play the video within the thumbnail.
- Horizontally centered the “Select” buttons.

The result is a mess. I’ve decided to do it myself at this point. I fixed the issue below.

Next, I want the YouTube title to be in a smaller font, and to use the <Link> NexTJS component to open the YouTube video in a new tab. I asked ChatGPT and I got something with an error, which it then fixed on prompting.

I then requested ChatGPT to make the SELECT an animated button and place all the SELECT buttons in the Grid on the same line. It went too fancy, importing @mui/system component. I tried again: Improve the look & feel of the SELECT button (add background) and make them all show on the same line. The UI looked malformed, so I made some edits and ended up with this.

Shortly after, I stopped seeing any YouTube results. I think the API is probably blocking me after all the requests I’ve made. As a quick way to investigate, I asked ChatGPT to update my NextJS API to generate mock videos if I pass a “mock” parameter to it.

Ok, this proved there is something off with the YouTube API, but I’ll leave dealing with it to another time.

Searching In Place

Right now, the video lookup behavior is weird. It was all ChatGPT’s touch.

Instead of opening a dialog when a user clicks on the “Search YouTube Videos” text box, I would to like to

• Show a search icon in the “Search YouTube Videos” field

• As the user starts typing, with debouncing, and instead of opening a separate dialog, show the Grid of YouTube videos directly under the search box.

When a user clicks the “SELECT” button:

• Update the “Search YouTube Videos” field with the URL of the YouTube Video

• hide the YouTube grid

• Show the thumbnail (75% width) of the selected video

• Show italic text under the video that says: Selected Video “video Id” successfully, where “video Id” is the youTube id of the video

• When there is text in the field, show a “clear” button. When clicked, it would clear the text in the field and resets the search.

• When the user enters a valid url, validate that the url points to a youtube video. If it does, preview the Youtube video in the space below the text field. If it is a url that does not point to a Youtube video, show an error message.

• The user should be able to navigate the Youtube grid in pages.

First, I provided ChatGPT with the latest code of ExerciseSuggestion, and then requested the changes above. The change was a little bit of a shit show with a lot of my “hard-earned” code that I previously wrote removed. It also was not allowing me to paste the whole code of YouTubeSearchBox.tsx so it can make the suggestions based on what’s already there. For that reason, I’ve decided to feed ChatGPT the changes I need one by one.

I tried again, and I was able to paste the code, and here is what it said:

Based on your latest code, I have made the required changes to implement the features you requested:

- Show a search icon in the “Search YouTube Videos” field
- Show the Grid of YouTube videos directly under the search box with debouncing
- Update the “Search YouTube Videos” field with the URL of the YouTube Video upon selection
- Hide the YouTube grid and show the thumbnail of the selected video
- Show italic text under the video with the selected video ID
- Add a “clear” button when there is text in the field
- Validate the URL and preview the YouTube video when a valid URL is entered
- Show an error message when the URL does not point to a YouTube video
- Add pagination for the YouTube grid

Here is the experience.

When I click “Select”, some of the capabilities are there.

Also, there are bugs where once I search, additional searches do not work. In fact, I have a good amount of tweaking to do, and I am tired.

April 4th 💬: I’ve spent 2 hours since 1 am working on this. I’m starting to wonder whether this session was productive at all.

Could I have done better if I did this without ChatGPT’s help? Maybe if I were more proficient in TypeScript, React and NextJS?

YouTube Search Experience

April 4th 💬: I woke up a little earlier than expected. It’s 10:30 am now.

The first thing I want to fix is the layout. I tried a few prompts with ChatGPT but I did not get what I wanted. However, I got the idea of changing the Dialog maxWidth to “md”, and that seems to resolve the issue.

Next, I moved the Clear “X” button inside the Search box. I also added a little bit of space after the Search icon. I got the gallery to disappear when the Clear button is clicked. Those were very quick changes; it would have probably taken more time asking ChatGPT for help.

Next issue I have is whenever I change the Search term, the list of videos do not refresh. Only after clearing the Search box will the actual searching become effective. I removed the lodash debouncing and created a custom useDebounce hook and that seems to do the magic. The best way to validate is to remove the “mock” videos and try the search on real YouTube videos. Alright, it looks like it worked out!

One other bug I found, if I paste a youTube video url in the search box, I get both the gallery and selected video to be shown.

I went ahead and fixed this bug and other state-related bugs without leaning on ChatGPT.

Auto-Search Based on Exercise Name

If the user goes to the video tab, and the search box is empty, I would like it to get automatically populated with the “Exercise Name” set in the About Tab. This is similar to the behavior I built in the image tab, so I just looked up the logic from there rather than relying on ChatGPT.

YouTube API Rate Limiting

I am calling the YouTube Data API from my backend, so I’m concerned that I will be blocked if there is enough usage of the feature. I asked ChatGPT how many searches I can do per day:

When using the YouTube Data API’s search functionality, each search request consumes 100 units of quota from your daily allocation.

For example, if you have the default daily quota of 10,000 units, you can make up to 100 search requests in a single day before reaching your limit (10,000 units / 100 units per search request = 100 search requests).

Remember that the quota usage can change over time, so it’s always a good idea to check the YouTube API documentation and your Google Cloud Console for the latest information on quota costs and your project’s quota usage.

It does look like I would easily get to my daily limit, with just 100 searches a day! The path forward is a little complicated, based on this page from Google. I went through a very painful form that Google had me fill to get more quota, let’s hope somebody at Google acknowledges it.

Update from the Future (April 9th): I haven’t heard anything back from Google about increasing the limit.

April 4th 🫶: Now, it’s time to go do other stuff in life. I’m in Portugal after all!

Current Exercise Data Model

April 4th 3:30 pm 💬: Back.

I think now we’re getting to the point of all of this work! When someone requests an exercise, I’d like to make it as easy as possible to plug the suggestion into

https://catalog.handstandquest.com/

and more importantly, into the Handstand Quest iOS App!

For that to be as smooth as possible, when an exercise request is submitted, I want the format of the request to be exactly like the one I have in the iOS app.

Here is a sample JSON used in the app for the handstand exercise. This gets read on app launch and gets serialized into a Swift object when the app starts.

{
  "id": "Handstand",
  "name": "Handstand",
  "category": 3,
  "description": "Before starting:\n- make sure you warm up your wrists and stretch your shoulders.\n- be comfortable with bailing out of a handstand (ex: cartwheel)\n\nPlace your hands on the floor, kick with your dominant leg.\n\nMake sure to focus on getting your pelvis stacked over the shoulders and wrist, as your kick up and when you reach up. Make sure your arms are straight and core engaged.\n\nBreathe and know when you need to stop to avoid injuries.",
  "tenthSecondRepInterval": 50,
  "pageId": 1,
  "met": 10.0,
  "voiceCommands": [
    {
      "title": "handstand",
      "id": 1
    }
  ],
  "tips": [
    {
      "title": "Form follows function",
      "body": "Cambered hands, active shoulders, locked elbows, hips over head, feet over hips… really whatever feels easier to get you to hold the handstand longer."
    },
    {
      "title": "Make it automatic",
      "body": "By doing countless handstands, we get from conscious to automatic brain behavior. It starts becoming more like driving, and thus a lot easier to hold."
    },
    {
      "title": "Regaining balance",
      "body": "Lose balance => correct the flow => recover. Real progress comes from struggling to correct your balance by squeezing your body and fingers tightly in an attempt to recover."
    }
  ],
  "subcategory": "Handstand Variations",
  "metricType": 0,
  "hasDemo": true,
  "hasHowTo": true,
  "howToYouTube": "KNC5lkoE2Fs"
}

It would be also worthwhile to share a visual of the current experience I have in the mobile app to edit a builtin exercise or create a custom exercise.

The About, Media and Tips views in the mobile app are very similar to the ones we are building in this Web App.

The below Settings and “Voice Commands” views allow the user to configure their experience in the mobile app. For the most part, they are currently not related to this web app, except for the MET field in settings, which maps to “Intensity Level” in the web app.

Here is how the fields in the “Request Exercise” Form would map to the current JSON format I have in the app.

Fields in JSON but not in the “Request Exercise” Form. Find a way to set the fields behind the scenes when the “Request Exercise” Form is submitted.

Acting on the Exercise Suggestion

For me to most effectively incorporate an exercise suggestion, I need it to be in a JSON format that matches the data model defined earlier. So if I generate the JSON and send it in an email or save it in storage as a JSON file, then I should be able to take action on it.

I would copy the JSON file content into a local JSON file that has the definition of all exercises. This file gets loaded by the mobile app. I then use an Electron app I wrote to generate an MD file from JSON to be loaded statically by this NextJS web app.

Because ChatGPT is capable of converting a JSON file to MD in a specific format, I could generate the MD file too, then either:

• Get the MD file pushed to the web app repository

• Put the MD file in Google storage or email attachment so I can easily download it

Either way, I will use my internal tool because it is free of cost to me.

Moving on, I’ll do the following: on submitting the exercise request, I will send myself an email with all the details nicely formatted in HTML, and towards the end of the HTML, I’ll include a link to the JSON file stored on Firebase Storage.

April 5th at 8:30 am ⚽: The Washington EPD Boys (born 2009) team played their first game at the Iber Cup, winning 3–0. My kid made an assist. I was relieved since I wasn’t sure how he’ll be able to perform on a team 1 year older (he’s born 2010) and with players he’s never played with before as part of a team.

April 5th at 4 pm 👔: Two hour wok meeting, coupled with another ~1 hour of work. Go get dinner, then spend another ~4 hours writing promotions doc.

Generating the JSON

April 6th at 1 am 💬: Back.

I told ChatGPT to generate the JSON from the request form. I showed it a sample JSON and told it how to map the data as follows:

It did it out of context, so I gave it the React state variables in the file and it generated what I was looking for.

I’ve changed the submit button to be only enabled when an exercise name has been specified. When the user clicks submit, I generate the JSON and print it to the console window for now.

Saving the JSON and getting its Download Url

I would like to store the formatted generated JSON in Firebase storage. I’ve set the following security rules so that anyone can create on the backend but not overwrite an existing file.

match /exercises/json/{ExerciseId}/{DateString} {
      allow create, read;
}

With little refactoring to fetch exercise Id anytime based on the name, I asked ChatGPT and it generated the code.

Generating the HTML and sending via Email

I already have a mechanism in my system to enable sending email notifications. I leverage the Trigger Email from Firestore Firebase extension. So all I need to do is save documents in that location, and the extension will take care of sending the email.

I asked ChatGPT to generate the HTML from the JSON, then simply transformed that into an EmailMessage object that gets sent to a Firestore document, which ends up triggering the extension to send the email.

The email looks as follows:

Match Web App Colors

I would like to replace all the blue in the MUI library with the Handstand Quest green color.

ChatGPT showed me how to create a custom theme and apply it to my application using the ThemeProvider component.

Using GPT API to generate exercise data

Once the user specifies an exercise name, automatically generate all the other exercise data. Users should then be able to update it however they desire and submit.

In addition to removing friction for users when suggesting an exercise, this is a pretty effective mechanism (internal tool) for me to continue to easily build out the exercise catalog over time, with curated quality content mostly generated by GPT.

April 6th 💬: Let’s see how long building this capability would take. It’s 2:30 am. I’ve been actually working on this project for 1.5 hours. The 6 hours before that, working on mid-year reviews and promotion endorsements for my team at work.

Side note: Here is some additional context on what I do. I have a full-time job as a manager, which I genuinely enjoy, particularly when it comes to collaborating with my team. However, I also feel a strong desire to pursue my passions and interests. As an engineer, I find great satisfaction in creating and building my own projects. It’s like a digital form of art or craftsmanship, akin to woodworking. Not only does this provide a sense of fulfillment, but it also has the potential to generate income. So, why not focus on these enjoyable and rewarding pursuits instead of spending time on activities that are less fulfilling and fun?

Plugging in GPT-4 code

Here is what I will instruct ChatGPT to do.

Here is the React code for my exercise request form (just include fields in the About tab)

<code not included for brevity>

- When the user specifies an exercise name, I would like to surface a “Generate” button in the right side of the Exercise Name field
- When the user clicks the “Generate” button, I would like it to do the following:
 — Call the GPT 4 API to get the category, subcategory, How To Instructions,
Intensity Level, and automatically update those fields with the response I get back from the GPT 4 API

I got some useful code, some irrelevant, and some of my requests ignored. I guess it is too much to ask.

April 6th 3:30 am 💬: One hour later, I am still getting HTTP 404 and 400 back from the API. I think this replit looks like a reliable source to interact with OpenAI via NextJS App.

April 6th 9:40 am ⚽: The soccer team had a draw with Leão Altivo. We had 77% possession, 10 shots on goal, but we just couldn’t finish. My kid made a really nice shot that the goalkeeper managed to touch and it hit the post. That was the most dangerous threat we had in the game, but unfortunately, no goal!

April 6th at 11 am 💬: Here I am now, in between soccer games, updating the code based on replit. I was able to use the OpenAI library, which is nice. I was also able to call the API directly via Axios. Both approaches though, I was getting back a 429 (Too many requests) from OpenAI.

April 6th at noon ⚽: The soccer team won 7–0. My kid earned a penalty then finished it.

April 6th at 5:50 pm ⚽: another win 8–1.

April 7th at 10:50 am ⚽: we lost 1–5 at the playoffs to a really good team, FC Shakhtar Donetsk. First half, our team was surprised by the level of play and speed of the opposing team. They were clearly at a much higher level than the other 4 teams we’ve played with. First half, they’ve scored 4 goals. Second half, we’ve adjusted to their style of play and got a goal each.

April 7th at 4:30 pm 👔: 1.5 hours of work meetings and about ~0.5 hour of work.

Showing User Notifications

April 7th at midnight 💬: The OpenAI errors seemed like something I cannot control, so I have decided to route my energy into surfacing errors and successes directly in different parts of the UI.

When a failure happens, I’ll see a notification message in the UI when there is an error. ChatGPT helped me generate all the code and allowed me to surface the notification from any child React component.

I’ll also continue to improve the look & feel of the notification UI and leverage it in other places in the web app. For example, when the request for a new exercise is completed successfully.

Troubleshooting GPT API

Back to the really important issue, why am I getting errors trying to call the GPT API? I have used other methods to make requests to the OpenAI GPT endpoint, but I am still getting the 429 response. I have decided to reach out to supporting@openai.com and see how it goes from there.

April 7th at 1 am 🫶: I’ll come back and continue building this capability once I stop getting 429 rate limit errors from the GPT API.

April 7th at 7 pm 💬: Wait a second, although I have a ChatGPT monthly subscription, the OpenAI subscription is separate. I think I am getting the failures because I did not add billing details to my OpenAI. I am still blocked because either OpenAI or my bank is not letting me pay from Portugal (or USA VPN that is not close to my zip code).

It looks like my “grant” for usage expired earlier this month.

I found a way to pay by adding another card. It took a few minutes, and now it is working, based on testing in OpenAI Playground!

The GPT Experience

When the user types an exercise in the “Exercise Name” field, a “Generate” button will show up.

When the user clicks on the “Generate” button, a request (prompt) is made to GPT-4 to get the following fields:

• Category: Identify a category for the exercise “${exerciseName}”. The response has to be a number between 1 and 5, where Warmup is 1, Progression is 2, Inversion is 3, Strengthen is 4, and Meditation is 5

• SubCategory: Identify a subcategory for the exercise “${exerciseName}”. The response should be a string no longer than 20 characters.

• Instructions: Fetch the How To instructions for the exercise “${exerciseName}”. The response should be a string between 200 and 500 characters.

• Intensity: Identify the intensity level of the exercise “${exerciseName}”. The response has to be a number between 1 and 15, where 1 is easiest and 15 is hardest.

• Tips: Generate in JSON format 3 tips for exercise “${exerciseName}” in the format [{ title, body }]

I make the requests sequentially to GPT-4 (because in parallel, I got back HTTP 400's). As each request is made, a loading indicator is shown next to each field. For example, below is a screenshot of the “How To Instructions” being fetched (not showing very clearly in screenshot since it is animated).

I made the requests to GPT-4 sequentially because when I tried to do them in parallel, I received HTTP 400 errors. As each request is made, a loading indicator appears next to the corresponding field. For instance, the screenshot below displays the fetching of the “How To Instructions” (not very clear in the screenshot since it’s an animation).

Then the Tips tab is automatically clicked, a loading indicator is shown until 3 tips are fetched from GPT.

All of this was working great locally, until I pushed the code to production. Given that it takes a little time to talk to GPT-4 to fetch things like an exercise “How To” description, it was timing out in production with error code HTTP 504! And as it turns out, Vercel only lets you change the timeout when you upgrade your plan! For that reason, I’ve decided to move from model “gpt-4” to model “gpt-3.5-turbo”.

Since GPT-3 is faster, the request to the API finished before Vercel timed out the request.

Mobile Responsiveness

I’ve tested the experience on my iPhone and I’m happy with the experience.

Generating Image Data

At some point, I’d like to be able to use the DALL-E API to generate an svg exercise figure based on the selected image in the exercise request.

This way, newly introduced exercises to the catalog require minimal effort to fit into the look & feel of the exercise library.

Conclusion

ChatGPT has significantly boosted my coding effectiveness, helping me save valuable time. By integrating it into the NextJS + React exercise catalog app development process, I was able to generate code and implement user interface enhancements such as the exercise suggestion mechanism quickly.

While ChatGPT was an essential asset in the development process, developers must balance their reliance on AI-generated code with their critical thinking skills. Over-reliance on AI-generated code can lead to reduced understanding of the implemented code and unintended complexity.

I invite you to share your stories, give feedback, or suggest additional features you would like to see in the app. As demonstrated by the exercise catalog app, embracing AI-assisted development tools can lead to impressive results and foster continuous learning. Let’s use these tools responsibly and thoughtfully to enhance our productivity and skills in the ever-evolving world of software development.

Configuring the extension

The extension leverages the following Firebase products:

• Authentication to manage (add/remove) users

• Cloud Firestore to create member tags, merge fields, and member events with Mailchimp.

Let’s focus first on the “required” fields to be configured in the extension. Luckily, those are pretty easy to configure and the extension has all the details for you to find those values.

• Cloud Functions location: Where do you want to deploy the functions created for this extension?

• Mailchimp OAuth Token: To obtain a Mailchimp OAuth Token, click here.

• Audience ID: What is the Mailchimp Audience ID to which you want to subscribe new users? To find your Audience ID: visit https://admin.mailchimp.com/lists, click on the desired audience or create a new audience, then select Settings. Look for Audience ID (for example, 27735fc60a).

• Contact status: When the extension adds a new user to the Mailchimp audience, what is their initial status? This value can be subscribed or pending. Subscribed means the user can receive campaigns; pending means the user still needs to opt-in to receive campaigns.

Do not worry yet about configuring the rest of the extension settings. For the Firestore Cloud based capabilities, you can leave them as “unused”. This way, you can focus on verifying that “adding/removing users” works first, then add those more advanced capabilities later.

NOTE: Always use “subscribed” rather than “pending” if you want the integration to just work. Read more if you want to learn why.

Once the extension is installed, it creates 5 Firebase functions: 2 that are authentication-based and 3 that are Firestore-based.

1. Authentication: (1) Create User, (2) Delete User

2. Cloud Firestore: (3) Create member tags, (4) merge fields, and (5) member events

Authentication Based Capabilities

Assuming you already use Firebase Authentication for new users that sign up to your web or mobile app, you could leverage the extension to add/remove those users in MailChimp. In other words, keep your list of users in MailChimp in sync with the one in Firebase Authentication.

Adding Users to MailChimp

As mentioned earlier, when the extension is installed, it creates a Firebase Cloud function that listens for new user accounts (as managed by Firebase Authentication), and then automatically adds the new user to your specified MailChimp audience.

My first issue was managing to get a new user that signs up via Firebase Authentication to be created in MailChimp. I had the basic configs for Auth token and Audience Id, but for whatever reason, I couldn’t see the new contact being created in MailChimp.

Basic Testing for Adding User To MailChimp

In Firebase Authentication, click “Add User” to add a new user.

This creates this user with the following ID in Firebase Auth.

In theory, I should be able to just go to MailChimp and see the newly created user. So I went to my MailChimp account at https://admin.mailchimp.com/lists/, clicked on the audience I connected earlier in the config, and found nothing.

Troubleshooting

So why isn’t the user getting created in MailChimp?

I first went to the “user.create” Firebase function and opened the logs.

In the logs, it looked like everything was working as expected.

It’s attempting to create in MailChimp the same user I added in Firebase Auth (same ID), and it’s showing that the addition was completed successfully.

Firebase ID: 9JjCwv9O2jPpELIN70KUsWmqpRr1

MailChimp ID: f8f1a4191871855a1d716485fac46eea

Yet, I do not see the user in MailChimp!

Looking at the source code of the function, it was basically making a POST call to /lists/<mailchimp_audienceId>/member passing to it email_address and status, but for whatever reason, the user was not visible in MailChimp.

exports.addUserToList = functions.handler.auth.user.onCreate(
  async (user) => {
    logs.start();

if (!mailchimp) {
      logs.mailchimpNotInitialized();
      return;
    }

const { email, uid } = user;
    if (!email) {
      logs.userNoEmail();
      return;
    }

try {
      logs.userAdding(uid, config.mailchimpAudienceId);
      const results = await mailchimp.post(
        `/lists/${config.mailchimpAudienceId}/members`,
        {
          email_address: email,
          status: config.mailchimpContactStatus,
        }
      );
      logs.userAdded(
        uid,
        config.mailchimpAudienceId,
        results.id,
        config.mailchimpContactStatus
      );
      logs.complete();
    } catch (err) {
      err.title === 'Member Exists' ? logs.userAlreadyInAudience( ) : logs.errorAddUser(err);
    }
  }
);

I then decided to check out the MailChimp API to see if the user is actually being created in MailChimp and maybe I’m not figuring where to go in the UI to find it.

Given that I already have the MailChimp user id from the logs, I decided to try and fetch it through the MailChimp API:

https://<dc>.api.mailchimp.com/3.0/lists/<mailchimp_audienceId>/members/<member_id>

To be able to make API calls, you need to create an API key. The <dc> for me was us19, this value can be pulled from the end of the API key.

In PostMan, I created the GET request, and there it was, the user is in the system!

It finally hit me. “Pending” status might be the problem. I went to MailChimp online documentation and learned this:

A pending contact is someone who has completed a signup form but has not confirmed their opt-in. The contact’s email address won’t be added to your audience until they confirm their opt-in, and you won’t be able to view them in your audience. After 60 days, if they have not confirmed their opt-in, the contact’s email address and any other information they provided will be removed and deleted.

I also saw this in my email. When I confirmed, the status moved from “pending” to “subscribed”, and then I was able to find this user in the MailChimp audience.

I couldn’t find where this form could be configured (might relate to my Squarespace and MailChimp integration), and I also realized this might not be the best experience to welcome new users with a subscribe message. As a result, I opted to create new users in MailChimp with the “subscribed” status, so I can focus on building the right “Welcome” message for new users that sign up through my app.

Another thing to keep an eye on is using “valid” email addresses when testing. For example, I tried adding a user “mailchimptest@test.com”, but the user did not end up being added to MailChimp since it was considered as looking “fake” or “invalid”.

Deleting Users in MailChimp

For GDPR compliance, the extension also creates a Cloud Function that listens for existing user accounts to be deleted (as managed by Firebase Authentication), and then automatically removes them from your specified MailChimp audience.

Cloud Firestore Based Capabilities

The capabilities dependent on Cloud firestore have two things to configure:

1. Watch Path: the name or path of the Firebase collection to lookup data.

2. Config: the JSON mapping that will tell the extension what data to look for in the document to pass it to MailChimp

Each of those capabilities will get one Firebase Cloud function created, to listen to document changes in the specified Firestore collection and map the data based on the config defined in the extension into MailChimp.

1. Merge fields Cloud Function provides the ability to create new properties that can be associated with Mailchimp subscriber. The mergeFieldsHandler function listens for Firestore write events based on specified config path, then automatically populates the Mailchimp subscriber’s respective merge fields. In other words, all this does is get additional data about the user and map it into member (contact) fields in MailChimp.

2. Member Tags Cloud Function provides the ability to associate “metadata” or “labels” with a Mailchimp subscriber. The memberTagsHandler function listens for Firestore write events based on specified config path, then automatically classifies the document data as Mailchimp subscriber tags. So all this does is create tags in MailChimp and associate them with users (members).

3. Member events Cloud Function creates Mailchimp specific activity events that can be created and associated with a predefined action. The memberEventsHandler function listens for Firestore write events based on specified config path, then automatically uses the document data to create a Mailchimp event on the subscriber’s profile which can subsequently trigger automation workflows.

Updating User Data in MailChimp

This is a mechanism to pull in additional information about the user from a document in Firebase and funnel it as user properties for the contact (member) in MailChimp.

The two settings to configure:

• Firebase Merge Fields Watch Path: The Firestore collection to watch for merge field changes

• Firebase Merge Fields Config: Provide a configuration mapping in JSON format indicating which Firestore properties to listen for and associate as Mailchimp merge fields.

Firebase Merge Fields Config

The JSON format is simple, It has two required fields that need to be set:

• subscriberEmail — The Firestore document field capturing the user email as is recognized by Mailchimp. This is how MailChimp will know which member to update with the new field data.

• mergeFields — JSON mapping representing the Firestore document fields to associate with Mailchimp Merge Fields. Basically, what properties to take from the Firestore document and update in the MailChimp member.

Here is an example of what this configuration would look like in JSON:

{
  "mergeFields": {
    "firstName": "FNAME",
    "lastName": "LNAME",
    "phoneNumber": "PHONE"
  },
  "subscriberEmail": "emailAddress"
}

*|MERGE|* tags are MailChimp’s way to uniquely identify a field for a member. The format of the properties inside the “mergeFields” JSON property is as follows:

• “Firestore property name”: “MERGE field ID”

You can view and modify the Merge tags in MailChimp.

The above sample configuration assumes your Firestore collection contains documents having the following properties:

{
  "firstName": "..", // The config property FNAME maps to this document field
  "lastName": "..", // The config property LNAME maps to this document field
  "phoneNumber": "..", // The config property PHONE maps to this document field
  "emailAddress": "..", // The config property "subscriberEmail" maps to this document field
}

Any data associated with the mapped fields will be considered Merge Fields and the Mailchimp user’s profile will be updated accordingly.

NOTE: To disable this cloud function listener, provide an empty JSON config {}.

Example: Pass Nested Fields in your Firestore doc to MailChimp

You can point to nested properties in the Firebase document. Here is an example:

{
  "mergeFields": { 
    "userProfile.displayName": "FULLNAME", 
    "userProfile.lastActiveDate": "LASTACTIVE", 
    "userProfile.memberSince": "SINCE",
    "userMetrics.daysActive": "DAYSACTIVE",   
    "userSettings.monthlyAccessPurchased": "HASMSUB",
    "userDiagnostics.appVersion": "APPVERSION",
    "userDiagnostics.supportOnDeviceSpeechRecognition": "DEVICESR"
  },
  "subscriberEmail": "userProfile.email"
}

The configuration should look like below, where “users” is the Firestore collection name and the JSON below contains the subscriberEmail and the field mappings between the Firestore document and the MailChimp member (mergeFields).

Troubleshooting

One of the limitations of this extension is that it only passes to MailChimp the fields that have changed within the Firestore doc. So if there are properties for an existing user (ex: Member Since = June 2020) and you enable the extension today, it won’t detect this as a changed property and will not update the MailChimp member with the value. It will always be empty in MailChimp as the extension compares changes in the Firestore doc itself rather than changes between the Firestore document and MailChimp.

See bolded code in the function definition below. Ideally, it would be nice to just pass all the “latest” values for the mapped fields in “mergeFields”.

exports.mergeFieldsHandler = functions.handler.firestore.document
  .onWrite(async (event, context) => {
    // If an empty JSON configuration was provided then consider function as NO-OP
    if (_.isEmpty(config.mailchimpMergeField)) return null;

try {
      // Get the configuration settings for mailchimp merge fields as is defined in extension.yml
      const mergeFieldsConfig = config.mailchimpMergeField;

// Validate proper configuration settings were provided
      if (!mailchimp) {
        logs.mailchimpNotInitialized();
        return;
      }
      if (!mergeFieldsConfig.mergeFields || _.isEmpty(mergeFieldsConfig.mergeFields)) {
        functions.logger.log(`A property named 'mergeFields' is required`);
        return null;
      }
      if (!_.isObject(mergeFieldsConfig.mergeFields)) {
        functions.logger.log('Merge Fields config must be an object');
        return null;
      }

// Get snapshot of document before & after write event
      const prevDoc = event && event.before && event.before.data();
      const newDoc = event && event.after && event.after.data();

// Determine all the merge prior to write event
      const mergeFieldsToUpdate = Object.entries(mergeFieldsConfig.mergeFields).reduce((acc, [docFieldName, mergeFieldName]) => {
        const prevMergeFieldValue = _.get(prevDoc, docFieldName);
        // lookup the same field value in new snapshot
        const newMergeFieldValue = _.get(newDoc, docFieldName, '');
        // if delta exists, then update accumulator collection
        if (prevMergeFieldValue !== newMergeFieldValue) {
          acc[mergeFieldName] = newMergeFieldValue;
        }
        return acc;
      }, {});

// Compute the mailchimp subscriber email hash
      const subscriberHash = subscriberHasher(_.get(newDoc, mergeFieldsConfig.subscriberEmail));

const params = {
        status_if_new: config.mailchimpContactStatus,
        email_address: _.get(newDoc, mergeFieldsConfig.subscriberEmail),
        merge_fields: mergeFieldsToUpdate
      };

// Invoke mailchimp API with updated tags
      if (!_.isEmpty(mergeFieldsToUpdate)) {
        await mailchimp.put(`/lists/${config.mailchimpAudienceId}/members/${subscriberHash}`, params);
      }
    } catch (e) {
      functions.logger.log(e);
    }
  });

I would have loved to modify this code as follows to be able to simply pass the latest values, but unfortunately, Firebase does not currently support extending or modifying extension code.

const mergeFieldsToUpdate = Object.entries(mergeFieldsConfig.mergeFields).reduce((acc, [docFieldName, mergeFieldName]) => {
  const newMergeFieldValue = _.get(newDoc, docFieldName, '');
  acc[mergeFieldName] = newMergeFieldValue;
  return acc;
}, {});

I ended up adding a request on the MailChimp extension GitHub repo. Hopefully this gets actioned, but if it doesn’t, there is another option to manually import all the data into MailChimp. This way, you’ll have all the existing fields in MailChimp and the extension will handle changes in the future.

At a high level, here are the steps to I followed to pull my data from Firestore to BigQuery to MailChimp:

• Install the Stream Collections to BigQuery extension to export your Firestore collection into BigQuery

• Go to BigQuery and write a SQL query to pull the data you need. For example:

SELECT   REPLACE(JSON_EXTRACT(data, '$.userProfile.email'), '"', '') Email,
         REPLACE(JSON_EXTRACT(data, '$.userProfile.displayName'), '"', '') FullName,
         REPLACE(JSON_EXTRACT(data, '$.userProfile.memberSince'), '"', '') AS memberSince
FROM `handstand-quest.firestore_handstand_quest.users_raw_latest`

• In BigQuery, run the query and save results to CSV

• Go to MailChimp and import the CSV into your Audience. It’s actually a very well built capability that lets you visually map fields between your CSV and your MailChimp member fields, then import.

Adding User Tags in MailChimp

Those tags can be pushed from Firebase for the contact and then be used as tags in MailChimp to easily find contacts with specific tags.

You might wonder, what’s the point of tags if you can filter by fields. Well, you cannot filter by field values (like Excel) in MailChimp, that’s why tags will come in pretty handy.

The two settings to configure:

• Firebase Member Tags Watch Path: The Firestore collection to watch for member tag changes

• Firebase Member Tags Config: Provide a configuration mapping in JSON format indicating which Firestore event(s) to listen for and associate as Mailchimp member tags.

Firebase Member Tags Config

The JSON format is simple, It has two required fields that need to be set:

• subscriberEmail — The Firestore document field capturing the user email as is recognized by Mailchimp. This is how MailChimp will know which member to update the tag for.

• memberTags — The Firestore document fields(s) to retrieve data from and classify as subscriber tags in Mailchimp.

Here is an example of what this configuration would look like in JSON:

{
  "memberTags": ["domainKnowledge", "jobTitle"],
  "subscriberEmail": "emailAddress"
}

Assuming the Firestore document has the following fields:

{
  "emailAddress": "..", // The config property 'subscriberEmail' maps to this document field
  "jobTitle": "..", // The config property 'memberTags' maps to this document field
  "domainKnowledge": "..", // The config property 'memberTags' maps to this document field
}

NOTE: To disable this cloud function listener, provide an empty JSON config {}.

Example: Filter by Member Location

Here is a screenshot of the config in the extension.

With that up and running, I can now filter my audience in MailChimp by the different values of location. For example, filter all members with the tag “Seattle”.

Troubleshooting

Make sure the values in the properties that you map as memberTags are things you would want to group by, since the point of tags is to easily filter members who have a certain quality. For example, “jobTitle” makes sense as a tag since it will make it easy to filter members by Job Title. But something like “firstName” might not make sense.

Also, if you try to use a Bool value as a tag, based on my testing, it does not work. Ideally, the config below would result in a tag titled “isCoach” when the property is true, but neither “isCoach” nor “true”/”false” tags get created.

{
  "memberTags": ["userProfile.isCoach"],
  "subscriberEmail": "userProfile.emailAddress"
}

If resolved, this request on the MailChimp extension Github repository could help.

NOTE: Just ignore data types that are not String, and tags should work just fine.

Sending Events for Automation in MailChimp

This makes it easy to leverage MailChimp actions and automations based on events that take place in your Firebase app. For example, on a new user signup, you could send them a welcome email.

The two settings to configure:

• Firebase Member Events Watch Path: The Firestore collection to watch for member event changes

• Firebase Member Events Config: Provide a configuration mapping in JSON format indicating which Firestore event(s) to listen for and associate as Mailchimp events.

Before leveraging this capability, it’s important to have an understanding of how events work in MailChimp. I recommend reading MailChimp’s Use Events for Behavioral Targeting and Track Outside Activity with Events to gain a perspective on all the awesome things you can do.

Firebase Member Events Config

The JSON format is simple, It has two required fields that need to be set:

• subscriberEmail — The Firestore document field capturing the user email as is recognized by Mailchimp.

• memberEvents — The Firestore document fields(s) to retrieve data from and classify as member events in Mailchimp.

Here is an example of what this configuration would look like in JSON:

{
  "memberEvents": [
    "activity"
  ],
  "subscriberEmail": "emailAddress"
}

Assuming the Firestore document has the following fields:

{
  "emailAddress": "..", // The config property "subscriberEmail" maps to this document field
  "activity": ["send_welcome_email"] // The config property "memberEvents" maps to this document field
}

NOTE: To disable this cloud function listener, provide an empty JSON config {}.

Example: Trigger Email to MailChimp

I use the Firebase Email Trigger extension to send emails based on interesting and relevant activity that happens in my app.

Given it is almost free (only cost is Firebase function running), I see myself sticking to it for email sending based on events. Clearly, there is a lot more power in leveraging MailChimp, but I’d rather stay on the MailChimp free plan (minimum paid plan is $59 per month). I’ll focus on the free capabilities of MailChimp in this section, but you should know that you would be able to do more if you have a paid MailChimp plan.

In my app, here are some of the types of events I listen to and send an email to a Google group. It helps me see on a daily basis interesting/important activities that are happening in my app.

• NewUser

• Purchase

• WorkoutCompleted

• DailyGoalAchieved

• Feedback

• etc…

This is my way to get better connected with usage in my app at a much more intimate level than metrics and Google Analytics could ever go.

With minor changes to my current process using the “Trigger Email” extension, I can route an event to MailChimp and leverage the free capability of being able to see in one place all the events that have happened relating to a specific member.

I basically write a message to the messages Firestore collection, and then the “Trigger Email” extension does the magic of sending the email and ensuring it gets delivered. The message basically looks like this:

{
  to: 'someone@example.com',
  message: {
    type: 'NewUser',
    subject: 'Hello from Firebase!',
    html: 'This is an <code>HTML</code> email body.',
  }
}

Here is a sample summarized email that I get at the end of each day.

I use the Abridged setting in Google Groups to get a single email summary in a day on my personal email that is part of the Google group, and on another email address I get every email in case I want to look at them “live” in the moment one by one.

Are are the different settings you could choose from in a Google Group:

• Each email — Messages sent individually as they’re posted to the group.

• Abridged — Up to 25 complete messages combined into single emails and sent daily.

• Digest — Summaries of up to 150 messages combined into single emails and sent daily.

• No email — Messages from the group are not sent.

To make it easy to connect it with the MailChimp extension, I added a new user email property that allows me to link my current event with the MailChimp extension:

{
  to: 'someone@example.com',
  message: {
    type: 'NewUser',
    user: {
      email: 'user@example.com',
      id: 'Firebase User ID'
    },
    subject: 'Hello from Firebase!',
    html: 'This is an <code>HTML</code> email body.',
  }
}

To map my Firestore document to MailChimp, I simply set this config:

{
  "memberEvents": ["message.type"],
  "subscriberEmail": "message.user.email"
}

Then, I simply configured the extension for events as follows:

Here is the goodness I got in MailChimp (activity feed in Member profile). Of course, I can build up on this capability to trigger automations, customer journeys, etc…

In your case, you could link MailChimp to any collection where you’re tracking events. You could even have a custom collection that simply routes Google Analytics events with an email, then get those events linked to the member in MailChimp.

Conclusion

The MailChimp extension for Firebase is very powerful and simple to use, but on the surface, it’s hard to see all the goodness that could be leveraged. I hope this article with detailed step-by-step instructions will help you make the most out of it… Enjoy!

Given how valuable reviews are, it’s very important for me to instantly know as soon as someone has feedback, so I could respond and help anyway I can.

I was hoping I’d simply log in to the App Store Connect and enable the notification (at least by email), but unfortunately, nothing like this exists! I was very surprised.

So I did the usual, went to Google, and searched for exactly what I am looking for “Slack notification for iOS app store review”. From a quick scan, it all looked like paid solutions! No, thank you!

I started looking if Apple offers something, maybe it’s hidden somewhere, so I searched “get notified for iOS app store review”, “ios app review api notification” and more. I found this mechanism to get notified by email if a customer edits a review you’ve responded to, which is solid, but not I was looking for.

I then found this post on the Apple Developer Forum, which as usual, didn’t have an easy answer. However, there was a useful data point about App Store review data being available by region via RSS (XML) or JSON.

https://itunes.apple.com/<countryCode>/rss/customerreviews/id=<appId>/sortby=mostrecent/xml

I tested that on my app and was happy to at least see some data come through.

• JSON: https://itunes.apple.com/us/rss/customerreviews/id=1482090288/sortby=mostrecent/json

• RSS Feed: https://itunes.apple.com/us/rss/customerreviews/id=1482090288/sortby=mostrecent/xml

I then discovered that Zapier has an RSS Feed Trigger. Given that Zapier lets me have 5 free Zaps, I decided trying it out would be an acceptable solution, since I don’t have to make monthly payments if I just want to use this one Zap.

So I went ahead and configured my trigger as follows:

Then I connected the Trigger to a Slack Action.

I tested the trigger and got a good looking message. It literally took a minute.

As I was writing this post, with a bit more Google searching, I discovered that there is an App Connect app created by Apple, which lets you get in app notification for new app store reviews.

I wish that was more easily discoverable!

Anyways, if you work by yourself on your own app, or part of a small team, I recommend you just use the App Connect app.

Otherwise, if you’d like to route notifications to an email list or a Slack channel shared with your team, then it should also be as simple as this one minute Zap I shared in this post!

Hope you’ll find this useful. Enjoy!

It basically automates away the act of worrying about SLA’s by sending your team a Slack message for any item nearing SLA, so you or your team can tag each other and respond with next steps on how you will meet this SLA.

Here is an example of what an alert/reminder might look like in Slack. If this looks like something you would like to enable for your team, read on for steps on how to make it happen!

Solution

Jira automation capabilities give a lot of control, letting you find the exact issue you want.

To get started, go to your Jira project, settings, and click Automation.

Create a “scheduled” rule. Pick CRON scheduling since we want the control to only run the rule during weekdays. Also, since the CRON rules are in UTC, if you want the rule to run 9 am PST, the time picked in CRON should be 16 (9 am PST = 4 pm UTC)

0 15 16 ? * MON-FRI

Pick a query to detect the needle in the haystack that you’re looking for.

For example, to find all customer bugs that are nearing SLA (even when no due date is specified):

labels = customer-bug AND priority in (P1, P2, P3) AND status != CLOSED AND (due < 7d OR due is EMPTY AND (priority = P1 AND createdDate < -7d OR priority = P2 AND createdDate < -23d OR priority = P3 AND createdDate < -53d))

Next, you can configure the detected issues to be sent over to a team Slack channel. Although Jira has an out of the box action to “Send to Slack”, it requires Slack admin permissions to be able to send messages to Slack, which most of us don’t have.

Here is what you’d get if you try to configure the webhook.

Luckily, there is an alternative to sending a message to Slack. Everyone should have permission to create workflows in Slack.

After creating the workflow in Slack, add a new webhook trigger, give it all of the variables (parameters), so they could get passed dynamically from Jira.

Then add an action to “Send a message” and configure the message to go to your desired Slack channel and have the variables in the message content formatted the way you like.

Here is a preview of what the Workflow in Slack looks like at a high level. Copy the URL of the web request that starts the Slack workflow so you can use it in the Jira automation configuration.

You only need to configure one Slack Jira workflow, and then connect all your Jira automations to that Slack webhook. Go back to the Jira automation and add an action to “Send web request”. Use Jira placeholders to pass details to Slack that make the alert message relevant, concise, timely and actionable!

That’s it. You’re done! This should be quick and easy once you familiarize yourself a bit with Jira Query Language (JQL).

Conclusion

Basically, every single Jira ticket that has an SLA could be surfaced with its own workflow in Jira and very clear calls to action. This all depends on how large your company is, potentially having 1 workflow if you are a small startup, while having 10’s of workflows if you are a large mature company with processes/demands from customers coming from multiple directions.

As simple as this looks, I’ve applied this on my team and it’s tremendously helped us stay consistently on top of SLA’s and heavily reduced the collective cognitive load in our organization for keeping track of SLA’s. It’s usually the simple things that end up working the best, so I hope you’d get the chance to apply this on your own team!

Enjoy!

We live in a world where we’re bombarded with tons of things that demand our attention and time, yet without enough hours in the day or years in life to get it done.

We end up with huge Todo lists that grow quickly in size and become overwhelming to read, making it hard to identify what to work on next. For those of us that learned how to leverage calendars, we end up spending time moving allocated slots around because they either take up more time or their priority changes.

I am not saying checklists and calendars should not be put to good use. However, given the fact that we’re still overwhelmed and unfocused, we need a process that is extremely simple AND flexible, where it almost costs no time to identify the next highest priority task and get it done!

In other words, we need “a process that hates process”. A process that can:

• Handle the dichotomy of flexibility and simplicity

• Leave us with a feeling of control and a pleasure of accomplishment

• Make the conceptual tangible and the ambiguous actionable

• Not get messy and overwhelming over time

We need a Personal Kanban system! In this post, I will show you how to leverage Trello to build your own super simple Personal Kanban. Reading the book Four Thousand Weeks: Time Management for Mortals inspired me to start using a “Top 3” Kanban board, and I leveraged the book Personal Kanban: Mapping Work | Navigating Life to help refine my mindset about how to leverage this simple tool.

What is Personal Kanban?

Personal Kanban is intended to be simple. It boils down to:

• Visualizing your work

• Limiting your WIP (Work in progress)

• Breaking down your work into achievable chunks

If you do not know what a Kanban board is, I highly recommend you read this post from Atlassian about What is a Kanban board?

Our Kanban board will mainly be composed of three columns or lists.

• Top 3

• Won’t Do

• Done

The “Top 3” Lane

When we visualize our work, what we need to do becomes a lot more tangible. As a result, we start actively seeking out opportunities for improvement (i.e. a kaizen mindset).

We can’t do more work than we can handle. Our brains can remember very few important things, and the more we have of those, the less we can stay focused and get any of them done.

It’s very common in Kanban boards to have separate “To Do” and “In Progress’’ columns. For personal use, however, I think there is no point in having our brain procrastinate on what we want to do next. Instead, we merge “To Do” and “In Progress’’ into one column and limit the number of cards to three. That’s why we call it the “Top 3” list, and it includes the top three things that we want to do or are already doing.

When we do that, we force our brains to only think about the top three things that matter and on getting them done in sequence. If you can parallelize on more than three tasks at the same time without getting overwhelmed, go for it and increase the limit.

On planning the day

But what about being intentional and starting the day with calling the shots about what you want to achieve? Wouldn’t separating the “To Do” and “In Progress” columns help us do just that?

Maybe.

When my head is cloudy and I am unclear about what to do, I find journaling to be the most effective method to declutter my brain, by answering the following three questions:

• What am I grateful for?

• What would make today great?

• What am I worried about?

So instead of bringing in my cluttered thoughts into the Kanban board, I rely on journaling to find clarity.

Clarity drives prioritization, completion and effectiveness.

The “Won’t Do” List

Now of course, there might be a lot on your mind than those top three things, so just put them for now in the “Won’t Do” list. In scrum speak, this is what is called the “Backlog” or “To Do”, but we are calling it the “Won’t Do” list to tell our brains that this is something that we’re not going to do right now and it’s not one of the most important three things we should be doing.

And yes, new things will come up that look very urgent and important, and those would go to the “Won’t Do” list unless you think they’re actually more important. What matters is for the WIP lane to never grow beyond three (or your limit), otherwise, you’ll clutter your mind and intensify your time anxiety. By limiting what you are doing, you learn to care to finish what you begin.

Why I chose the name “Won’t Do” for the Backlog

According to Four Thousand Weeks: Time Management for Mortals, the real measure of any time management technique is whether or not it helps you neglect the right things. Most of our anxieties, Burkeman argues, derive from a nagging sense that we might be wasting what little time we have. Procrastination is unavoidable, though we can get better at ignoring the right things. Missing out is basically guaranteed in life, the inevitable consequence of one path chosen over another. We should pursue the activities we intrinsically enjoy while accepting our finitude and committing to what’s most important.

The “Done” List

This list consists of the work that we have completed.

The key is to focus on limiting WIP and completing tasks first. When you pull one card into the “Done” list, you are fully ready now to work on the next task without distractions. You do this over and over, respecting your WIP limit, and you start feeling that you are now able to do the optimal amount of work at the optimal speed!

Retrospection

I like to put in the name of the Done list the month (ex: Done Oct 2021) so I can keep track and retrospect on the work I am doing each week. The more that you look for an opportunity to improve, the more likely you will find one.

At the beginning or end of each week, hold a retrospective and quickly examine completed tasks. Acknowledge what went well and what could be improved next time. Were you effectively doing tasks you are not particularly good at? Was the work fulfilling? Were there things you could have refused or delegated? Was your week balanced between career, family, and personal development? Were you happy doing what you’re doing, as that might be your best measure of success!

Breaking Things Down

There is a phenomenon, known as the “Zeigarnik Effect”, that states that adults have a 90% chance of remembering interrupted and incomplete thoughts or actions over those that have been seen through to completion.

So when you pick a task and feel it is too much work to do for the day, take a manageable chunk from it and make it your current task. Think for example, which task can fit into the half hour before a meeting? While we want to reduce task size to make our work more manageable, we shouldn’t become restrained by the process and mired in detail. So break down as you do rather than trying to break it all down at the beginning. Remaining flexible enough to adapt and prioritize on the fly is key since we want to do the right thing, right now. Thoughtful prioritization and completion beats rigorous upfront planning.

Do not confuse this with team projects that need to be broken down all the way and buffered for predictability of delivery.

If there is a task that is pending action from others, either create a new one or move it to the top of the “Won’t Do” list to be picked up later.

Personal Kanban in Trello

Trello is a web-based, Kanban-style, list-making application, we’ll use to create the Personal Kanban system we’ve described earlier.

Create a new board in Trello with the following three columns (or lists to use a Trello term). You can also give “Top 3” a name like “WIP”, or give the “Won’t Do” list a name like “To Do” or “BackLog”. Pick the names you prefer.

Configure a rule to set the date of a card that you add to the “Top 3” list to 16 hours from now, since if you’re adding it to your top 3, you gotta shoot to get it done today or early tomorrow.

Then, configure the “Done” list to mark the Due date as completed when a card is moved to it. Finally, add a custom rule to the “Top 3” to prevent it from ever going beyond 3 cards by moving the added card back to the “Won’t Do” list.

As you add your first 3 tasks, all is good. Since right now is Oct 10th 3 pm, the due date was automatically set for 16 hours from now when the card was added.

When you added a fourth card to the list beyond your capacity, the card got automatically moved to the “Won’t do” List. This way, you focus on your top 3 and that’s it. If you want to re-prioritize what goes into your top 3 list, you can always move out the cards that are lower priority to the “Won’t Do” list.

After a little bit of usage, your board would look something like this.

But there is a catch

After using this system for a few weeks, I got an email from Trello that I am reaching my monthly limit for Butler quota. I didn’t honestly know what Butler is, so I went and searched their website and realized it is the basic automation actions that automatically added a due date to a card when placed in the lane.

I realized that I created a system that is not free. I went online to check the pricing. I am paying for Netflix, HBO, Spotify, Shahid, etc… Why am I being cheap about investing $5 a month in a system that has helped me get a sense of control on my tasks and held me accountable to stay focused on the top things that matter? I’ve decided to go ahead and subscribe. If you want your system not to cost you anything, simply do not use the automation rules. They’re not really that necessary as long as you’re following the rules of keeping WIP up to three.

Customize, but don’t get held back by it

Over time, customize your work to match your reality. For example, separate personal, health and side projects into their own columns (or swimlanes). You might get tempted to start adding a lot of columns. For example, week, month and quarter columns. Although this looks like an act of prioritizing what is most important first, it quickly begins adding a lot of complexity and you find yourself spending time prioritizing things around instead of doing what matters most now! In other words, only add another column if you think it’s necessary and it will help keep things simple.

Real-time flexibility beats rigid up-front planning.

This is what my board looks like. For example, I have a column for “Health” because I think it matters and needs to be prioritized with other things happening at work and life.

Conclusion

Although I believe firmly that I have shared with you a mechanism for optimizing your productivity, efficiency and effectiveness, don’t let that turn you into a working machine.

Don’t forget to spend time on things that have intrinsic value to you. If you can’t find a way to be happy now, at this moment, you probably never will be, no matter how many to-do items you cross off your list.

Make time for what you enjoy in life, even if it is not important or urgent.

Time you enjoy wasting, was not wasted — John Lennon.

The Search

To do so, I started looking for a mechanism that can help me track the length of handstand holds, within minimal effort, so I can focus on practicing rather than log keeping. Clearly, the key was that the tracking needed to happen hands free.

I started by leveraging the Gyroscope on a phone, and then realized it’s not that practical to attach a phone on me while I am attempting a handstand. It generally falls out of pocket, if I happen to be wearing anything with pockets. And to be honest, it’s a lot of overhead to be wearing a waist belt with pockets anytime I want to feel motivated to do handstands. I started thinking about a specialized small device that attaches to the foot, but then again, it is yet another device that needs to be charged, worn, and put somewhere so it won’t get lost.

The Solution

When I thought I ran out of options, I realized that using voice could be promising. It’s hands free, doesn’t require any setup, and does not force me to attach something to my body. I also wanted something without that tax of having to say “Hey Siri/Google, start my app X” every time. To put it to the test, I started building an iPhone app to see how it would turn out and whether it could actually be practical. And voilà, I think I’ve put together an MVP for the first mobile app of its kind that leverages voice commands to guide a workout, one exercise at a time.

Let’s Win Together

Before rolling it out to the app store, I want to figure out if the current minimum set of functionality that I’ve put together is enough to help someone, other than myself, improve their own handstand hold time.

If you’ve read so far, it means you’re serious about handstands, and I think we have a win-win.

If you use the app daily for 7 days, a heart icon will show up in the app, so you can provide your feedback on your experience with the app. Once your feedback is submitted, I will record your name to give you lifetime access to the app for free, including all future updates and improvements I make to it on all platforms.

If you are interested, follow the steps below to join me on this Handstand Quest!

Sneak Peak (Oct 2019)

Steps to Join

Go to the website (https://www.handstandquest.com) to get the App.

Use the app for 7 days. After 7 days, a new button will light up in the top menu. Submit your feedback and continue to use the app as you see fit. I will be making updates based on your feedback, and you will receive those updates.

Enjoy handstanding and I am looking forward to hear how this app will help you improve your handstands!