Forem: Cindy Potvin

Coming up with with my new Micro SaaS technological stack

Cindy Potvin — Tue, 17 Jan 2023 16:50:47 +0000

For my next project, I’ve been assembling a new technological stack to create micro SaaS apps quickly and cheaply before jumping in the code. I’ve not put it to the test yet, but I figured it would be interesting to share how I’ve reasoned about it.

I’m now working with small clients, but I was previously working on bigger enterprise projects where the concerns were different, and I’m missing a few tools in my (virtual) tool bag for the smaller, more nimble stuff. I also have ideas that I want to bring to life and I’m looking to build a set of technologies I can reuse across projects and get to the main features quicker.

Main goals

I don’t mind paying for services that save me time or give me a significant advantage, but the main goal is to deploy each additional applications for cheap since they won’t be using a lot of resources, at least at first.

If I can keep the bar to profitability lower, I can launch more experiments and each micro SaaS will need a lower MRR (monthly recurring revenue) to earn their keep. It’s hard to know application will be a hit, so I want to be able to keep building without adding 50$-100$ a month to my spending for each application.

Still, I also need to keep my maintenance time low, both since I don’t have a lot of time for my own projects and because I hand off projects to clients and want to keep them as easy to maintain as I can.

If I can use only a few tools with a minimum of custom work between them, it would be best. I’m trying to save money, but it will be more expensive in the long run if I’m stuck maintaining 20 Ubuntu installs holding random Docker images, and remembering all the glue scripts I came up with.

Frontend

I got started on my frontend stack with Divjoy as a SaaS template to handle the common boilerplate. It includes many of the tools I was looking to use such as Material UI in the frontend and Stripe for payment.

There are a few other good UI kits that comes with the Divjoy, but I’m already familiar with Material UI: it looks nice and it’s easy to theme.

I also need some JavaScript error monitoring since I won’t always keep a close eye on the application. It’s a toss-up between Sentry and Rollbar. Their free tier is similar, but I liked the Sentry error management with the little experience I had of it, so let’s go with Sentry for now.

For hosting the frontend static files, I’ll go with Vercel since they have unlimited sites. I may also try their Next.js framework at some point with server-side rendering and it just works. Netlify would have been a good option at a similar price point, but their marketing material was not as clear about how many sites were allowed.

Backend

Since my projects are simple, I want to aim for a “backend as a service” first and see what else I need if I hit any limits. This should handle all the main backend parts like the database and its api, authentication and file storage.

I’m afraid of pay-as-you-go like Firebase since I’m not going to keep a close eye on everything across many applications and don’t want Google to send me a big bill if I make a mistake. I prefer something with a clear cap.

For this reason, I’m going to settle on Supabase for my backend as a service. Given that I don’t want to too much maintenance, I’ll purchase from Supabase instead of self hosting it.

Only problem with Supabase is that they’re charging that 25$ per project, but if I structure my data well I should be able to reuse that for all my projects. I can always spin off another project and move the data if I want to sell one of the micro SaaS, or if one really takes off and uses up too much of the quota.

Other infrastructure

I use Namecheap as my registrar already with Cloudflare as the DNS server for a few small sites like this blog so I can configure emails and the like separately, so I’ll keep going with that solution. Right now the free plan does the job since I’m only using them for the DNS and some tiny static sites on Cloudflare Workers.

For git source control I already have a bunch of private projects on Bitbucket and I have no problems with it, so I’ll stick with it.

Finally, I’ll be adding UptimeRobot to minimally keep an eye on things and check if each project is still up. The free plan should be enough for my needs for a while since it can monitor the uptime of 50 “things” such as a SSL certificate or a specific page. I’m probably just going to monitor a single page that requires api calls for each project since most elements are provided by third-party services.

Starting budget

Here is how it should cost to keep all my micro SaaS up, at least while they are small:

Products	Pricing (in USD)
Vercel	20$ for the cheapest commercial tier with 1TB bandwidth and preview deploys.
Sentry	0$ for 5k errors logged. I doubt I’ll reach the 26$ plan with 50k error anytime soon.
Supabase	25$ for the paid tier so the database stays up.
Cloudflare	0$ for the free tier with unlimited DNS server.
Postmark	10$ for the first 10 000 emails a month, transactional or newsletter.
Bitbucket	0$ for the free tier with unlimited private repo.
UptimeRobot	0$ for 50 free items monitored.
Domain name	About 1$-ish by domain depending on the TLD.

So I’m looking at around 55$ +1$ each for the domain to run a bunch of tiny SaaS applications, not bad!

If I do make a sale I’ll have Stripe fees at the minimum, and I’ll need to do support and marketing but that will need to be considered in each product’s pricing.

My next step is now to try this out with my next micro SaaS to see if I missed anything and how it will turn out.

Hosting a static website for free in 15 minutes with Cloudflare Workers Sites

Cindy Potvin — Thu, 20 Oct 2022 21:00:41 +0000

I’ve had an old school PHP hosting for ages, and I’m currently moving all the sites I’m hosting there to newer and more effective technologies.

I have a few static sites included in the mix: I’ve been writing pure HTML + CSS for so long that it’s still my favorite solution if I want to spin up a quick landing page for a project.

The best solution for me ended up being Cloudflare’s Worker Sites. The setup is simpler than using a static page generator, and once it’s done a new version can be deployed in an instant with a single command. The server is quick, and it’s free (up to a decent bit of traffic)!

Cloudflare also has a Pages product that takes the static result of a build from a git repository from a site built with tools such as React, but I have not tested it, and my use case is simple enough right now that it’s not worth setting up a git repo for each site.

Site to deploy

I decided to start the move with one of my newest project: http://manibas.com, a site to sell my hand cranked socks. For a quick rundown of the landing page :

HTML/CSS all the way, except one little bit of JavaScript to display the site in English or French depending on the language of the browser, and for a button to switch manually.
Pure CSS without a framework or library. I used https://coolors.co to help me pick colors and https://fontjoy.com/ to pick fonts.
Payment is handled by a Stripe Payment button. I have a US/Canada and an International button since the shipping price is too different. I’ll handle the rest, such as sizing and color by email when I have orders.
No contact form, people can reach out on Instagram if they have more questions or comments.

Prerequisites

You’ll need the LTS version of NodeJS to install the required tool, a free Cloudflare account and a domain name to point to the site that’s already going through Cloudflare.

You also need an index.html file ready to deploy (ideally with a few other assets like images).

Setting up the project

To deploy the site, you need to install Wrangler, the command line tool to work with Cloudflare Workers. In any folder, run npm install to install the tool globally:

npm install -g wrangler

After having installed Wrangler, initialize the project from the folder you want to use, which will create a package.json and the required boilerplate:

npx wrangler init -y

There is a small bit missing, since you’ll most likely have more than just a index.html file and will need to route to other static assets such as images, fonts or an external CSS file. Install the package that handles routing to static assets inside Cloudflare Workers:

npm install --save-dev @cloudflare/kv-asset-handler

Also, replace the content of the generated src/index.ts with the following code snippet from the Cloudflare documentation to handle the routing (https://developers.cloudflare.com/workers/platform/sites/start-from-existing):

import { getAssetFromKV } from "@cloudflare/kv-asset-handler";

addEventListener("fetch", (event) => {
  event.respondWith(handleEvent(event));
});

async function handleEvent(event) {
  try {
    // Add logic to decide whether to serve an asset or run your original Worker code
    return await getAssetFromKV(event);
  } catch (e) {
    let pathname = new URL(event.request.url).pathname;
    return new Response(`"${pathname}" not found`, {
      status: 404,
      statusText: "not found",
    });
  }
}

Finally, specify the root URL to use and the folder containing the files that needs to be published in the wrangler.toml file that was created by Wrangler.

route = "https://manibas.com/*"[site]bucket = "./public"

Deploying the static page

To deploy, move all the content that needs to be published under the public folder that was specified in the wrangler.toml, including an index.html file as the root file.

Your site is now ready to deploy! Run that last command in the folder of the project, and Wrangler will upload your static files and push it live using domain name your specified.

npx wrangler publish

If it’s your first time running Wrangler to connect to Cloudflare, it will also ask you to authenticate to your account and to enable Workers if they are not active yet, but it will remember your identity for a while. You just need to run that command again if you want to deploy a new version of the site.

How to close a React Native modal with a button

Cindy Potvin — Mon, 16 Aug 2021 10:39:00 +0000

I’ve been working with React Native lately, and I’ve come across a few unimplemented features I needed to add to the basic components. One of those components is the React Native Modal component that is used to show a view above another one. It doesn’t promise more features than that, but it can be very useful to implement your own popup.

On the other hand, since it’s only a simple modal, it does not include everything you would expect for a popup component like an X to close it, or closing the modal when you tap beside it. I’ll be walking you through how to add those two features when you’re starting from a Modal component.

If you’re in a hurry, you can also find the final result on my GitHub: https://github.com/CindyPotvin/react-native-popup

How to close a modal

Let’s start with a basic App.js that shows a popup. I also added a few styles to have a shadow so the popup is visible, and a generous amount of margin so we can test closing the popup by clicking beside it later.


import React, { useState } from 'react';
import { StyleSheet, Modal, Text, View } from 'react-native';

export default function App() {
  const [modalVisible, setModalVisible] = useState(true);

  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</text>
      <Modal visible={modalVisible}>
        <View style={styles.modal}>
          <Text>
            Popup content.
          </Text>
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
    alignItems: "center",
    justifyContent: "center",
  },
  modal: {
    flex: 1,
    margin: 50,
    padding: 5,
    backgroundColor: "white",
    shadowColor: "black",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
});

The Modal is displayed according to its visible prop. Right now, the value in the state is always true, so the popup will always be visible.

Even without a button or another way to change the state, the Modal can be closed on Android with the back button (the menu button on Apple TV should have the same effect according to the documentation, but I don’t have one to test).

Pressing the button calls the function specified in the onRequestClose prop of the modal, so let’s change the state to hide the popup when it is pressed, which will show the main screen of the application :


<Modal
  visible={modalVisible}
  onRequestClose={() => setModalVisible(false)}>

How to add close button to a React Native modal

First, we have to add the button itself so we can then use it to close the popup. In that case, I wanted to add a small X in the top right corner of the popup, but it could be anywhere else.

Given how the positioning work, there are two options for this:

Positioning absolutely the button in the top right corner. You can then do anything you want for the rest of the content, but then you run the risk of having the content overlapping the X since it’s out of the normal layout flow. If you want to use the space beside and under the button at the same time, it’s pretty much impossible, which leads us to the second option.
Positioning the button with flexbox, leaving space to the left of the button for a header. You can then fill in the header and the content at the bottom separately. If you’re doing something that’s meant to be a popup, having a title is also a pretty standard feature.

Here is what the component now looks like with an X added:


import React, { useState } from 'react';
import { StyleSheet, Modal, Text, View, TouchableOpacity } from 'react-native';

export default function App() {
  const [modalVisible, setModalVisible] = useState(true);

  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <Modal visible={modalVisible} 
             onRequestClose={() => setModalVisible(false)}>
        <View style={styles.modal}>
          <View style={styles.modalHeader}>
            <View style={styles.modalHeaderContent}>
               <Text>Other header content</Text></View>
               <TouchableOpacity>
                 <Text 
                    style={styles.modalHeaderCloseText}>X</Text>   
               </TouchableOpacity>
          </View>
          <View style={styles.modalContent}>
            <Text>
              Popup content.
            </Text>
          </View>
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
    alignItems: "center",
    justifyContent: "center",
  },
  modal: {
    flex: 1,
    margin: 50,
    padding: 5,
    backgroundColor: "white",
    shadowColor: "black",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
  /* The content of the modal takes all the vertical space not 
     used by the header. */
  modalContent: {
    flex: 1
  },
  modalHeader: {
    flexDirection: "row",
  },
  /* The header takes up all the vertical space not used by the 
     close button. */
  modalHeaderContent: {
    flexGrow: 1,
  },
  modalHeaderCloseText: {
    textAlign: "center",
    paddingLeft: 5,
    paddingRight: 5
  }
});

The header is a flex container that’s displayed as a row, with flexGrow:1 to indicates that it should take up all the remaining space.

The rest of the content in the popup is a flex:1 item so it takes up all the remaining height.

The only thing remaining at this point is to wire up the button so it does close the popup, in the same way we set it in on the onRequestClose event earlier:


<TouchableOpacity onPress={() => setModalVisible(false)}>
  <Text style={styles.modalHeaderCloseText}>X</Text>
</TouchableOpacity>

How to close the modal by clicking outside

To also close the modal by tapping outside, we need an additional component to catch those taps.

On the other hand, we don’t want this component to catch taps meant for the child component: clicking the popup itself should not close it. By checking event.target == event.currentTarget, we validate that the item selected is the component itself and not one of its children.

I used a Pressable component because I didn’t want the “dimming” effect on tap when touching outside the popup that comes with the TouchableOpacity. This new Pressable component wraps all the components we previously defined in the modal.

Here is the completed popup, with a few extra borders to show where are the header and popup content :


import React, { useState } from 'react';
import { StyleSheet, Modal, Text, View, Pressable, TouchableOpacity } from 'react-native';

export default function App() {
  const [modalVisible, setModalVisible] = useState(true);
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <Modal
        visible={modalVisible}
        onRequestClose={() => setModalVisible(false)}>
        <Pressable style={styles.outsideModal}
          onPress={(event) => { 
            if (event.target == event.currentTarget) { 
               setModalVisible(false); } }} >
          <View style={styles.modal}>
            <View style={styles.modalHeader}>
              <View style={styles.modalHeaderContent}>
                 <Text>Other header content</Text>
              </View>
              <TouchableOpacity 
                 onPress={() => setModalVisible(false)}>
                <Text style={styles.modalHeaderCloseText}>X</Text>
              </TouchableOpacity>
            </View>
            <View style={styles.modalContent}>
              <Text>
                Popup content.
              </Text>
            </View>
          </View>
        </Pressable>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
    alignItems: "center",
    justifyContent: "center",
  },
  modal: {
    flex: 1,
    margin: 50,
    padding: 5,
    backgroundColor: "white",
    shadowColor: "black",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
  /* The content of the modal takes all the vertical space not 
     used by the header. */
  modalContent: {
    flex: 1,
    borderWidth: 1,
    borderColor: "black"
  },
  modalHeader: {
    flexDirection: "row",
    borderWidth: 1,
    borderColor: "black"
  },
  /* The header takes up all the vertical space not used by the 
     close button. */
  modalHeaderContent: {
    flexGrow: 1,
  },
  modalHeaderCloseText: {
    textAlign: "center",
    paddingLeft: 5,
    paddingRight: 5
  },
  outsideModal: {
    backgroundColor: "rgba(1, 1, 1, 0.2)",
    flex: 1,
  }
});

Please note that there is a small limitation to this: the background color for a Pressable or a TouchableOpacity cannot be set to a transparent or a semi-transparent value, so the content under the popup will no longer be visible.

A next step to make this better would be to package the Modal components and all its content into a new component that can be reused in your application so you can insert any header or content in the popup, but this is outside the scope of the current article.

If you want to execute the final version yourself and try it out, you can see it on GitHub here: https://github.com/CindyPotvin/react-native-popup and as an Expo Snack here: https://snack.expo.dev/@cindyptn/react-native-popup-with-x-button