DEV Community: Nick Smet

I kept shipping apps that failed — What I learned

Nick Smet — Fri, 23 Jan 2026 15:54:02 +0000

I’m good at building things.

That turned out to be the problem.

For years, every side project followed the same pattern:

I had an idea that made sense to me
I validated it with a few friends or fellow devs
I started building immediately
I shipped
Nothing happened

The code worked. The app was “done.”

But users didn’t care.

The trap developers fall into

As developers, we’re trained to think in terms of solutions.

We see a problem and immediately jump to:

architecture
features
edge cases
scalability

What we don’t do nearly enough is pause and ask:

“Is this actually a problem people are already trying to solve?”

I kept mistaking interesting problems for valuable problems.

I wasn’t validating — I was convincing myself

I told myself I was validating ideas:

reading a few tweets
scanning Product Hunt comments
asking in Discords

But most of that was just confirmation bias.

I was looking for permission to build, not evidence of demand.

The data was right there (and I ignored it)

Every mobile app has thousands of unpaid user interviews sitting in public:

App Store reviews
Google Play reviews

They tell you:

why users churn
which features don’t matter
where competitors are failing
what users actually complain about (repeatedly)

I rarely looked at them seriously.

If I did, it was after I had already built something.

That’s backwards.

What I do differently now

Before opening an editor, I now force myself to answer:

What do users consistently complain about across competitors?
Which problems show up in dozens of reviews?
What workarounds are users inventing themselves?
What features are mentioned emotionally (anger, relief, frustration)?

If I can’t find strong patterns, I don’t build.

It’s uncomfortable.

It slows you down.

But it saves months of wasted effort.
I now use AI tools like, do-better.app to do the research for me.

Building is easy. Choosing what to build isn’t.

Most of my failed apps didn’t fail because of execution.

They failed because I solved problems nobody felt strongly enough about.

The hard skill isn’t shipping faster.

It’s learning what not to build.

That took me far longer to learn than any framework ever did.

App Market research on steroids

if you're interested in learning why your competitors succeed, but you don't. Head over to do-better.app

How to add a Feedback Widget to your website

Nick Smet — Wed, 15 May 2024 12:35:24 +0000

Integrating on-page surveys into your website can be a game-changer for gathering user feedback and improving your services. Here’s a straightforward guide to setting up and launching your Qualli surveys efficiently.

Step 1: Register Your Qualli Account

If you haven't already, start by creating your Qualli account. It’s free to get started, and you can register quickly to begin harnessing the power of direct user feedback. Check out our pricing here

Learn more about Qualli here

Step 2: Create Your Survey

Navigate to our Survey Builder to craft your Feedback Survey.

This tool is designed to be intuitive, helping you create effective surveys in no time.

Step 3: Website HTML Code

Let's tweak your website's HTML and CSS. Insert the following snippets to integrate the survey seamlessly:

Head Section: Add the provided script at the end of your Head section.

<style>
#feedback-button {
    position: fixed;
    top: 50%;
    right: -25px;
    width: 100px;
    height: 40px;
    background-color: #007bff; /* Assuming #007bff as the primary color */
    color: white;
    z-index: 99;
    transform: rotate(90deg);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px; /* Assuming a default border-radius */
    cursor: pointer;
    transition: transform 0.3s ease;
}

#feedback-button:hover {
    transform: rotate(90deg) scale(1.1);
}

#feedback-button p {
    margin: 0;
    font-size: 0.875rem; /* Equivalent to text-sm */
    font-weight: bold;
    pointer-events: none;
}
</style>

Body Section: Place the initial script at the beginning of your Body section.

<div id="feedback-button">
   <p>Feedback</p>
</div>

Customisation Tip: You can modify the code as needed, but remember to keep the ID (“feedback-button”) intact for functionality.

Once added, refresh your page, and you should see the Feedback button on the right side.

Step 4: Linking the Button to Your Survey

Creating Your Trigger

A trigger is an action taken by your user, such as clicking the Feedback Button. Here’s how to set it up:

Go to “Triggers” in the sidebar and select “Create new Trigger.”
Enter a clear Internal name and description, like “User Clicked Feedback Button.”
Enable “CSS selector” and input “#feedback-button” to recognize clicks on the specified HTML element.

Activating Your Survey Trigger

After saving your trigger:

Return to your survey and open “settings.”
In the “Triggers” section, enable “Show based on Trigger.”
Activate the trigger you created and update the settings to save changes.

Step 5: Publish Your Survey and We’re Done 🥳

Finally, publish your survey and refresh your webpage to test the new setup. Enjoy collecting valuable user feedback directly from your site!

Why Use Qualli?

When you're looking for a easy-to-implement, time-saving 3rd party library: Qualli could be a good fit for you.

Qualli is capable for in-app surveys, straight into your user experience

Benefits:

🖥️📱 Works on web and Mobile (created by and for RN developers)
🎨 Typeform like survey builder
⏳Little to none dev-time required after implementation
😌 Non-tech user friendly: Hand it off to your marketing or UX team
📈 Send your data to Zapier

FAQ

Why does the survey only show once?
To keep showing the survey under certain conditions, go to your survey's settings, find “Limits,” and enable “Keep showing when conditions are met.”

In-app surveys in React Native

Nick Smet — Mon, 04 Mar 2024 10:24:10 +0000

So you need to add surveys to your React Native app? In this article we'll cover 3 different approaches for doing so.

1) Build it yourself
2) Using a service like Qualli
3) Typeform or SurveyMonkey with a webviews

1) Building it yourself

Maybe you want to build your own surveys, for maximum flexibility.

There are 2 main approaches on doing this:

Using React Native components
Using libraries

Using React Native components

Designing the User Interface: Utilize React Native's rich set of components to design your surveys. For textual feedback, TextInput is invaluable, whereas multiple-choice queries can leverage custom-designed icons or toggle buttons for a more interactive experience.
Handling State and Logic: Managing user responses requires careful state management within your component. Incorporate state hooks like useState to track user input and useEffect for actions upon form submission.
Data Storage and Retrieval: Decide on how and where to store the collected data. Firebase, MongoDB, or your proprietary backend can serve as robust data repositories. Ensure you establish secure and efficient communication between your app and the database.

While building from scratch offers maximum control, it demands considerable time and technical knowledge. For developers seeking speed without compromising on personalization, fitting form libraries into your architecture can be an advantageous middle ground.

Using libraries

Several React Native-compatible libraries provide a rich foundation for quickly building flexible and functional forms, without starting from zero. Two notable examples include:

Formik: Praised for its simplicity and comprehensiveness, Formik facilitates form construction with minimal boilerplate. It's built around the premise of making forms first-class citizens in React Native, handling form state, validation, and submission seamlessly.
React Hook Form: This library emphasizes performance and minimal re-renders. Utilizing React hooks, it simplifies form management, offering an efficient way to build scalable forms with built-in validation powered by the Yup schema.



import { useFormik } from 'formik';

function CustomSurvey() {
  const formik = useFormik({
    initialValues: { feedback: '' },
    onSubmit: values => {
      console.log(values);
    },
  });

  return (
    <View>
      <TextInput
        onChangeText={formik.handleChange('feedback')}
        value={formik.values.feedback}
      />
      <Button onPress={formik.handleSubmit} title="Submit" />
    </View>
  );
}

2) Using a service like Qualli

This is promoted, but we fully support this company ⭐️

When you're looking for a easy-to-implement, time-saving 3rd party library: Qualli could be a good fit for you.

Qualli is capable for in-app surveys, straight into your user experience.

Lean more here

Benefits:

👨‍💻 React Native SDK (created by and for RN developers)
🎨 Typeform like survey builder
⏳Little to none dev-time required after implementation
😌 Non-tech user friendly: Hand it off to your marketing or UX team
📈 Send your data to Zapier
🖥️📱Its cross platform (works on web too!)

Below you can see a code example of the Qualli RN SDK.



import * as React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { QualliProvider, useQualli } from '@qualli/qualli-rn-sdk';

const Home = () => {
    const qualli = useQualli();

    return (
        <View>
            <TouchableOpacity
                onPress={() => {
                    // Give your users unique attributes to later be used in your audience filter
                    qualli.setAttributes({
                        plan: 'trial',
                        email: 'john@doe.com',
                        first_name: 'John',
                        last_name: 'Doe',
                    });
                }}
            >
                <Text>{'Update User Attributes'}</Text>
            </TouchableOpacity>

            <TouchableOpacity
                onPress={() => qualli.performTrigger('cart_abandoned')}
                style={{ marginTop: 20 }}
            >
                <Text>{'Trigger cart abandoned'}</Text>
            </TouchableOpacity>
        </View>
    );
};

export default function App() {
    return (
        <QualliProvider apiKey="YOUR_API_KEY_HERE">
            <Home />
        </QualliProvider>
    );
}

3) TypeForm or SurveyMonkey, using webviews

Let's talk about the big 2 first: Typeform and SurveyMonkey

When you already use one of these 2 big players, you might consider also using it in your app. But both don't have react native support, so the only way to do this is using Webviews.

Why Consider WebViews?

Simplicity: Leveraging WebView for embedding external surveys bypasses the need for a complex native integration or API interfacing, making it a straightforward approach.
Feature-rich Platforms: Both Typeform and SurveyMonkey are known for their user-friendly design interfaces and powerful analytics, enabling developers to create engaging surveys without reinventing the wheel.
Consistency Across Platforms: Using WebView ensures your surveys appear and function consistently across different devices, preserving the intended user experience.

How to Implement

Embedding Typeform or SurveyMonkey surveys in your React Native app involves encapsulating the survey URL within a WebView component. Here’s a basic example of how this can be accomplished:



import React from "react";
import { WebView } from "react-native-webview";

const SurveyView = () => {
  return (
    <WebView
      source={{ uri: "https://your.typeform.com/to/example" }}
      style={{ marginTop: 20 }}
    />
  );
};

export default SurveyView;

Replace "https://your.typeform.com/to/example" with the actual URL of your Typeform or SurveyMonkey survey. This simple integration allows you to harness the robust survey creation and management capabilities of these platforms directly within your app.

The downsides

It doesn't integrate smoothly into the user experience. It will always look like a webview.
Heavily dependent on you, the developer. A new survey has to be coded in manually

Can you think of another method? Let us know in the comments 🙏

In-app surveys for React Native Apps

Nick Smet — Tue, 30 Jan 2024 09:12:40 +0000

TypeForm or SurveyMonkey, using webviews

Let's talk about the big 2 first: Typeform and SurveyMonkey

When you already use one of these 2 big players, you might consider also using it in your app. But both don't have react native support, so the only way to do this is using Webviews.

Why Consider WebViews?

Simplicity: Leveraging WebView for embedding external surveys bypasses the need for a complex native integration or API interfacing, making it a straightforward approach.
Feature-rich Platforms: Both Typeform and SurveyMonkey are known for their user-friendly design interfaces and powerful analytics, enabling developers to create engaging surveys without reinventing the wheel.
Consistency Across Platforms: Using WebView ensures your surveys appear and function consistently across different devices, preserving the intended user experience.

How to Implement

Embedding Typeform or SurveyMonkey surveys in your React Native app involves encapsulating the survey URL within a WebView component. Here’s a basic example of how this can be accomplished:



import React from "react";
import { WebView } from "react-native-webview";

const SurveyView = () => {
  return (
    <WebView
      source={{ uri: "https://your.typeform.com/to/example" }}
      style={{ marginTop: 20 }}
    />
  );
};

export default SurveyView;

The downsides

It doesn't integrate smoothly into the user experience. It will always look like a webview.
Heavily dependent on you, the developer. A new survey has to be coded in manually

Building it yourself

Maybe you want to build your own surveys, for maximum flexibility.

There are 2 main approaches on doing this:

Using React Native components
Using libraries

Using React Native components

Designing the User Interface: Utilize React Native's rich set of components to design your surveys. For textual feedback, TextInput is invaluable, whereas multiple-choice queries can leverage custom-designed icons or toggle buttons for a more interactive experience.
Handling State and Logic: Managing user responses requires careful state management within your component. Incorporate state hooks like useState to track user input and useEffect for actions upon form submission.
Data Storage and Retrieval: Decide on how and where to store the collected data. Firebase, MongoDB, or your proprietary backend can serve as robust data repositories. Ensure you establish secure and efficient communication between your app and the database.

Using libraries

Several React Native-compatible libraries provide a rich foundation for quickly building flexible and functional forms, without starting from zero. Two notable examples include:

Formik: Praised for its simplicity and comprehensiveness, Formik facilitates form construction with minimal boilerplate. It's built around the premise of making forms first-class citizens in React Native, handling form state, validation, and submission seamlessly.
React Hook Form: This library emphasizes performance and minimal re-renders. Utilizing React hooks, it simplifies form management, offering an efficient way to build scalable forms with built-in validation powered by the Yup schema.



import { useFormik } from 'formik';

function CustomSurvey() {
  const formik = useFormik({
    initialValues: { feedback: '' },
    onSubmit: values => {
      console.log(values);
    },
  });

  return (
    <View>
      <TextInput
        onChangeText={formik.handleChange('feedback')}
        value={formik.values.feedback}
      />
      <Button onPress={formik.handleSubmit} title="Submit" />
    </View>
  );
}

Using a service like Qualli

This is promoted, but we fully support this company ⭐️

When you're looking for a easy-to-implement, time-saving 3rd party library: Qualli could be a good fit for you.

Qualli is capable for in-app surveys, straight into your user experience.

Lean more here

Benefits:

👨‍💻 React Native SDK (created by and for RN developers)
🎨 Typeform like survey builder
⏳Little to none dev-time required after implementation
😌 Non-tech user friendly: Hand it off to your marketing or UX team
📈 Send your data to Zapier
🖥️📱Its cross platform (works on web too!)

Below you can see a code example of the Qualli RN SDK.



import * as React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { QualliProvider, useQualli } from '@qualli/qualli-rn-sdk';

const Home = () => {
    const qualli = useQualli();

    return (
        <View>
            <TouchableOpacity
                onPress={() => {
                    // Give your users unique attributes to later be used in your audience filter
                    qualli.setAttributes({
                        plan: 'trial',
                        email: 'john@doe.com',
                        first_name: 'John',
                        last_name: 'Doe',
                    });
                }}
            >
                <Text>{'Update User Attributes'}</Text>
            </TouchableOpacity>

            <TouchableOpacity
                onPress={() => qualli.performTrigger('cart_abandoned')}
                style={{ marginTop: 20 }}
            >
                <Text>{'Trigger cart abandoned'}</Text>
            </TouchableOpacity>
        </View>
    );
};

export default function App() {
    return (
        <QualliProvider apiKey="YOUR_API_KEY_HERE">
            <Home />
        </QualliProvider>
    );
}

Surveys for React Native

Nick Smet — Mon, 13 Nov 2023 14:21:43 +0000

As developers, we understand the impact of user feedback in refining our apps. It's not just about fixing bugs; it's about understanding user needs and enhancing their experience. In-app feedback is a crucial piece of this puzzle.

But who here likes building forms, say "I"... *even the crickets are silent

That's what I thought, no one really. Why isn't there a Typeform alternative for mobile apps, designed and created for mobile usage?

That's why I created Qualli. This project started to scratch my own itch, but now I'm building it publicly.

Qualli enables you to easily send out surveys to your users.

Why In-App Feedback Matters

Real-Time Insights: Capture user sentiments and issues as they happen.
Enhanced Engagement: Direct interaction within the app increases user engagement.
Data-Driven Decisions: Make improvements based on actual user feedback, not assumptions.

Integrating Qualli in React Native

Here's a quick walkthrough of setting up Qualli in your React Native project.

Installation

Add Qualli RN SDK:

Use yarn to add the SDK to your project.

yarn add @qualli/qualli-rn-sdk

Install Dependencies:
Qualli relies on @react-native-async-storage/async-storage and react-native-device-info.

For bare RN installation:

yarn add @react-native-async-storage/async-storage react-native-device-info

Post-Installation:
For iOS, don't forget to run:

npx pod install

If using Expo:

npx expo install @react-native-async-storage/async-storage react-native-device-info

Usage

Adding the Provider:
Wrap your main component with QualliProvider.

import { QualliProvider } from '@qualli/qualli-rn-sdk';

function App() {
    return (
        <QualliProvider apiKey="YOUR_API_KEY_HERE">
            {/* Your components */}
        </QualliProvider>
    );
}

Setting Up Triggers:
Use the performTrigger function to invoke specific user actions.

const qualli = useQualli();
qualli.performTrigger('TRIGGER_NAME');

Setting Custom Attributes:
Store custom attributes at the user level.

const qualli = useQualli();
qualli.setAttributes({
    email: 'example@email.com',
    first_name: 'John',
    last_name: 'Doe',
    custom_attribute: 'value',
});

The SDK is fully open source and can be found here

In-app feedback is more than a feature; it's a bridge connecting developers with users.

Dynamic emails with handlebars and nodemailer

Nick Smet — Fri, 10 Feb 2023 16:11:39 +0000

Ever tried writing a dynamic email in HTML & CSS? If so, did you like it? Probably not.

It’s a dreaded task that we’d love to pass on to marketing. Or anyone for that matter.

But sometimes it’s not possible. So we decided to hack something together that might make it slightly less painful to draft emails with variables - especially transactional emails.

We hope it means you get a MailChimp-like experience without using MailChimp.

Demo URL: https://handlebars-email-html-previewer.vercel.app/

The preview app does three main things:

Let’s you draft/modify a HTML template with variables containing handlebars & instantly preview it in the browser
Put some test variables into JSON to see that they’re working
Send a test email to Mailtrap

Note: right now we don’t save your template anywhere but we plan to implement this later. For now, copy-paste and don’t close the tab!

You can see the client code here and the server code that connects with Mailtrap here.

How we built the Editor

We wanted to have a nice coding experience in the browser so we tried out a ton of different packages including:

But we found them all either difficult to work with, outdated or a bit laggy for us. They’re probably all great but we didn’t have time so we moved on if we couldn’t get it working smoothly quickly.

Finally, I came across a comment on Reddit suggesting Monaco because VSCode is built on top of it.

Monaco worked perfectly out the box (except for a tiny bit of flashing when you type)

It also had some really nice advanced features like autocomplete and a map view.

It was also really easy to implement.

import Editor from "@monaco-editor/react";

interface Props {
    code: string;
    onChange: (code: string) => void;
}

function MyEditor(props: Props) {
  return (
      <Editor
          value={props.code}
          language="handlebars"
          defaultValue="Please enter HTML code."
          theme="vs-dark"
          onChange={(newvalue?: string) => props.onChange(newvalue || '')}
      />
  );
}

export default MyEditor;

It pretty much works the same as a text box where you update the state on change.

As you can see we also changed it to dark mode 😎

Using Handlebars to add variables

Handlebars are commonly used in HTML emails to make them dynamic. You can use it like so

Your HTML code
...
<p>{{name}}</p>
...

The opening and closing brackets indicate a handlebar variable, more information can be found here.

Then we use the Handlebars compiler to turn our HTML with handlebars variables, to plain HTML with inserted variables.

import Handlebars from 'handlebars';
const data = {
    name: "John"
}

const handlebarsTemplate = Handlebars.compile(YOUR_HTML);
const parsedHtml = handlebarsTemplate(data);

// this transforms the code to 
...
<p>John</p>
...

Handlebars is quite powerful. You can add in conditional logic, loops, etc…

Previewing the email

But now, the tricky part! How do you know your handlebars actually work with the given data?

That was the whole reason we made this tool, easy validation of our handlebar templates with live previews.

On each code change we update your live preview, so you can see exactly how your code looks, and behaves.

We also provided a way of inputting test data. Click on the top right corner on “set test data”. This will open up a JSON editor. Here you can add the variables you declared in your HTML template with handlebars, alongside their test data values.

For instance if you have a variable {{name}} in your HTML template, you can create JSON test data like this:

{
    "name":"Satoshi Nakamoto"
}

Sending test emails to Mailtrap

The final feature of this tool allows you to send your preview to your Mailtrap inbox. This is important because the browser preview is not always going to be perfectly accurate.

Click on “Mailtrap” in the top right corner, this will open up the config modal.

You’ll be asked for:

Inbox ID: This can be found in the url when you open up your inbox in Mailtrap
Api Key: Can be found under settings → API keys in Mailtrap

You only need to input these once, it will be stored in local storage for easy use afterwards

Then go ahead and click “send test email”! This will send a test email to your mailtrap using a small node application we made (which can be found here). We use this small node server to avoid CORS errors, the only purpose is to take your HTML, and send a request to the mailtrap API.

Further info

We didn’t focus on how to send emails with nodemailer. There are a lot of tutorials out there, here are some suggestions:

Chat backend with Supabase & Socket.io

Nick Smet — Mon, 30 Jan 2023 15:06:13 +0000

Let’s build the back end for a real time chat application in Supabase using Node.js.

This is also the second part in a three-part series of building a React Native Chat app, so if you're curious, check them out:

Source code

Step 0 - Download a http client

We will be using a http client extensively in this tutorial. We use Postman and. We uploaded our Postman collection on GitHub - so you can import it into Postman and use the queries we set up.

Step 1. Setting up your Supabase account

Head over to https://supabase.com/ and create a new project.

Take note of your anon public key and service role, you’ll need this later on. You can also retrieve this later in the settings.

Step 2. Creating your database

First step in setting up our database is creating the needed tables. In this case we go for the simplest approach.

Our base models:

User: username, id , created date
Conversation: name of the conversation, who the owner is, id, created date
Message: conversation id, the actual message content, who sent it, id, created date

We can capture this setup in the following Query:



CREATE TABLE users (
    id UUID PRIMARY KEY default uuid_generate_v4(),
    username VARCHAR(255) NOT NULL,
    created_at TIMESTAMP NOT NULL
);

CREATE TABLE conversations (
    id UUID PRIMARY KEY default uuid_generate_v4(),
    name VARCHAR(255) NOT NULL,
    owner_user_id UUID REFERENCES users(id) NOT NULL,
    created_at TIMESTAMP NOT NULL
);

CREATE TABLE user_conversation (
    id UUID PRIMARY KEY default uuid_generate_v4(),
    user_id UUID REFERENCES users(id),
    conversation_id UUID REFERENCES conversations(id)
);

CREATE TABLE messages (
    id UUID PRIMARY KEY default uuid_generate_v4(),
    conversation_id UUID REFERENCES conversations(id),
    user_id UUID REFERENCES users(id),
    message TEXT NOT NULL,
    created_at TIMESTAMP NOT NULL
);

Head over to Supabase → SQL Editor and copy paste the above Query. Now hit run. You can head back over to Table Editor to see your newly created tables.

Now we’re done with our database setup we’ll create a Node.JS server.

Step 3. Setup a new Node.JS server

Source code

Create a new folder locally and run



npm init

Run through the wizard, and at the end you should have a base package.json for us to start from.

Now let’s install some dependencies we’ll need for this project.



npm install @supabase/supabase-js body-parser dotenv express socket.io
npm install -D @types/express @types/node @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint nodemon ts-node typescript

Our main dependencies are:

Supabase (for intereacting with our database)
Body-parser for our requests
Dotenv for env variables
Express for our server
Socket.IO for our websocket

For our development dependencies we’re going to install:

Typescript
Types for Typescript, Eslint, Express
Eslint
Nodemon to watch for file changes
Ts-node for Node

In your package.json add the following changes



"main": "index.ts"

"scripts": {
    "start": "nodemon -r dotenv/config src/index.ts",
    "lint": "eslint . --fix",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Your package.json should look this



{
  "name": "supabase-node-chat-backend",
  "version": "1.0.0",
  "description": "Node backend for a chat application, using Supabase",
  "main": "index.ts",
  "scripts": {
    "start": "nodemon -r dotenv/config src/index.ts",
    "lint": "eslint . --fix",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/nsmet/supabase-node-chat-backend.git"
  },
  "keywords": [
    "supabase",
    "node",
    "chat"
  ],
  "author": "Nick Smet",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/nsmet/supabase-node-chat-backend/issues"
  },
  "homepage": "https://github.com/nsmet/supabase-node-chat-backend#readme",
  "dependencies": {
    "@supabase/supabase-js": "^2.4.1",
    "body-parser": "^1.20.1",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "socket.io": "^4.5.4"
  },
  "devDependencies": {
    "@types/express": "^4.17.15",
    "@types/node": "^18.11.18",
    "@typescript-eslint/eslint-plugin": "^5.48.2",
    "@typescript-eslint/parser": "^5.48.2",
    "eslint": "^8.32.0",
    "nodemon": "^2.0.20",
    "ts-node": "^10.9.1",
    "typescript": "^4.9.4"
  }
}

Next up create a basic folder layout, and create the files shown in this list. Note: I’m using Yarn as my dependency manager here, but you can also use NPM.

Below is some boilerplate code for some files already

.env.example + .env



SUPABASE_PROJECT_URL=
SUPABASE_PUBLIC_ANON=

.eslintignore



dist

.eslintrc.js



module.exports = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest", // Allows the use of modern ECMAScript features
    sourceType: "module", // Allows for the use of imports
  },
  extends: ["plugin:@typescript-eslint/recommended"], // Uses the linting rules from @typescript-eslint/eslint-plugin
  env: {
    node: true, // Enable Node.js global variables
  },
  rules: {
    'no-console': 'off',
    'import/prefer-default-export': 'off',
    '@typescript-eslint/no-unused-vars': 'warn',
  },
};

.gitignore



# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Dependency directories
node_modules/

# dotenv environment variables file
.env
.env.test
dist

tsconfig.json



{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig to read more about this file */

    /* Projects */
    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */

    /* Language and Environment */
    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "lib": ["es6"],                                      /* Specify a set of bundled library declaration files that describe the target runtime environment. */
    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
    // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */

    /* Modules */
    "module": "commonjs",                                /* Specify what module code is generated. */
    "rootDir": "src",                                    /* Specify the root folder within your source files. */
    // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
    "resolveJsonModule": true,                           /* Enable importing .json files. */
    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */

    /* JavaScript Support */
    "allowJs": true,                                     /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */

    /* Emit */
    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
    "outDir": "build",                                   /* Specify an output folder for all emitted files. */
    // "removeComments": true,                           /* Disable emitting comments. */
    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */

    /* Interop Constraints */
    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */

    /* Type Checking */
    "strict": true,                                      /* Enable all strict type-checking options. */
    "noImplicitAny": true,                               /* Enable error reporting for expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */

    /* Completeness */
    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  }
}

So what have you done exactly? You created a new project, with Typescript support, and that also has built-in Eslint validation.

Now that the admin is done, let’s get to the fun stuff!

Step 4. Create a basic Express server

Open up index.ts and put in the following code



import express from "express";
import bodyParser from "body-parser";
import cors from 'cors';

const app = express();

app.use(bodyParser.urlencoded({ extended: false}));
app.use(bodyParser.json());
app.use(cors())

app.get("/", function (req, res) {
    res.send("Hello World");
});
app.listen(3000);

Now open up the terminal and run



npm run start

Open up the browser and go to http://localhost:3000, You should now see “Hello world”

Congrats, you just setup your Express server!

Step 4. Setup our Types

We’re going to have two type files:

supabase.types.ts → This contains our database types, generated by Supabase
types.ts → General model types of our application

Open up the terminal, and go inside of the “src” folder. Now run



// First authenticate with Supabase
npx supabase login

// Generate the types file
npx supabase gen types typescript --project-id "YOUR_PROJECT_ID" --schema public > src/supabase.types.ts

In your types.ts file you can insert the following



import { Socket } from "socket.io"

export interface TypedRequestBody<T> extends Express.Request {
    body: T
  }

export interface TypedRequestQuery<T> extends Express.Request {
    query: T
}

export interface TypedRequestQueryWithBodyAndParams<Params, ReqBody> extends Express.Request {
    body: ReqBody,
    params: Params
}

export interface TypedRequestQueryAndParams<Params, Query> extends Express.Request {
    params: Params
    query: Query,
}

export interface TypedRequestQueryWithParams<Params> extends Express.Request {
    params: Params
}

export interface User {
    id: string;
    username: string;
    created_at: string;
}

export interface Conversation {
    id: string;
    name: string;
    user_owner_id: string;
    created_at: string;
}

export interface Message {
    id: string;
    user_id: string;
    message: string;
    created_at: string;
}

export interface UserConversation {
    user_id: string;
    conversation_id: string;
}

export interface SocketConnectedUsers {
    [key: string]: {
        socketId: string;
        socket: Socket;
        user: User;
    }
}

export interface SocketSocketIdUserId {
    [key: string]: string
}

For now focus on User / Message / Conversation / UserConversation. The other ones will become clearer in a minute.

Step 5. Connect to your Supabase DB

in utils/supabase.ts insert the following



import { createClient } from '@supabase/supabase-js';
import { Database } from '../supabase.types';

const supabase = createClient<Database>(process.env.SUPABASE_PROJECT_URL as string, process.env.SUPABASE_PUBLIC_ANON as string);

export default supabase;

We will create a new client that connects to our database.

Don’t forget to fill in your env with SUPABASE_PROJECT_URL, and SUPABASE_PUBLIC_ANON

Step 6. First endpoints: Creating, and searching for users

In this example we won’t allow users to authenticate, they can just signup with a username.

This is not production ready code, in production you do want some form of authentication.

Open up src/controllers/user.controller.ts and ****Add in the following



import { Response } from "express"
import supabase from "../utils/supabase"
import { TypedRequestBody, TypedRequestQuery } from "../types"

export const createUser = async function (req: TypedRequestBody<{username: string}>, res: Response) {
    const { data, error } = await supabase
        .from('users')
        .upsert({ 
            username: req.body.username,
            created_at: ((new Date()).toISOString()).toLocaleString()
        })
        .select()

    if (error) {
        res.send(500)
    } else {
        res.send(data[0])
    }
}

export const searchUsers = async function (req: TypedRequestQuery<{user_id: string, q: string}>, res: Response) {

    let query = supabase
      .from('users')
      .select();

    if (req.query.q) {
        query = query.like('username', `%${req.query.q}%`)
    }

    query = query.neq('id', req.query.user_id)
    .limit(50);

    const { data, error } = await query;

    if (error) {
        res.send(500)
    } else {
        res.send(data)
    }
}

We have two functions:

createUser: When a new user wants to start messaging, they should first signup, and receive their user id
searchUsers: Searching on all users when starting a new conversation

Note: For searching users you can see that “q” is optional.

Now in src/index.ts define the endpoints.



// Add the import 
import { createUser, searchUsers } from './controllers/user.controller';

// Add the user endpoints
app.post("/users/create", createUser);
app.get("/users/search", searchUsers);

If we try the /users/create endpoint out from a http client (e.g. Postman), it works perfectly!

Step 7. Fetching all conversations, and creating a new one

Open up src/controllers/conversation.controller.ts and add in the following code



import { Response } from "express"
import supabase from "../utils/supabase"
import { 
    TypedRequestBody, 
    TypedRequestQuery, 
    TypedRequestQueryWithBodyAndParams, 
    TypedRequestQueryAndParams,
    User,
    Message
} from '../types';

export const getAllConversations = async function (req: TypedRequestQuery<{user_id: string}>, res: Response) {
    // get all conversations this user is attached to 
    const paticipatingConversationIds = await supabase
        .from('user_conversation')
        .select('conversation_id')
        .eq('user_id', req.query.user_id)

    if (!paticipatingConversationIds.data?.length) {
        return res.send([]);
    }

    const conversations = await supabase
        .from('conversations')
        .select(`
            *, 
            messages (
                id,
                conversation_id,
                message,
                created_at,
                users (
                    id,
                    username
                )
            )
        `)
        .or(`owner_user_id.eq.${req.query.user_id},or(id.in.(${paticipatingConversationIds.data.map((item: any) => item.conversation_id)}))`)

    return res.send(conversations.data)
}

Our first function will be retrieving all conversations this user is a part of.

A user can be part of a conversation in two ways:

As the owner (owner_id on the conversations table)
As a participant of a conversation (user_conversation table)

First let's look at conversations which they’re a participant in.

Then, we will get all conversations where they’re the owner, or where the id is found in our participant conversations.

Quick Aside

_Currently we return all messages within the conversation. But ideally we’d like to return the most recent 10 messages and then get more as they scroll up. But Supabase in their client SDK doesn’t allow a good way to do this at the moment (as far as we’ve seen!)

To get around this, you could potentially write your own Postgres function (also known as a stored procedure) for fetching messages incrementally. _

Next up, add in the following code to create the conversation



//src/controllers/conversation.controller.ts

export const createConversation = async function (req: TypedRequestBody<{owner_id: string, participant_ids: string[], group_name: string}>, res: Response) {
    const {
      owner_id,
      participant_ids,
      group_name,
    } = req.body;

    // first create the conversation 
    const conversation = await supabase
      .from('conversations')
      .upsert({ 
        name: group_name,
        owner_user_id: owner_id,
        created_at: ((new Date()).toISOString()).toLocaleString()
       })
      .select()

    if (conversation.error) {
        res.send(500)
    }

    let participants: User[] = [];

    if (participant_ids.length > 1 && conversation.data?.length) {
        // attach all our users to this conversation
        const pivotData = await supabase
            .from('user_conversation')
            .upsert(participant_ids.map((participant_id) => {
            return { 
                user_id: participant_id, 
                conversation_id: conversation.data[0].id
            }
            }))
            .select()

            if (pivotData.data?.length) {
                // find our actual users 
                const actualParticipantUsers = await supabase
                    .from('users')
                    .select()
                    .in('id', participant_ids)

                if (actualParticipantUsers.data?.length) participants = actualParticipantUsers.data;
            }
    }



    if (conversation.error) {
        return res.sendStatus(500)
    } else {
        const conv: Conversation = {
            ...conversation.data[0],
            participants
        };

        return res.send(conv);
    }
}

We receive the desired group name, the participants, and who the owner is. We will create our base conversation first, so we have its id.

Then we fill in the user_conversation table to add in the participants.

In index.ts add the following imports, and endpoints



import { 
  createConversation, 
  getAllConversations, 
} from './controllers/conversation.controller';

// CONVERSATION ENDPOINTS
app.post("/conversations/create", createConversation);
app.get("/conversations", getAllConversations)

Try it out in Postman, and you should have just created your first chat conversation!

Step 8. Getting conversation messages, and sending a new message

In the same src/controllers/conversation.controller.ts file, add in these two functions



// src/controllers/conversation.controller.ts
export const getConversationMessages = async function (req: TypedRequestQueryAndParams<{conversation_id: string} ,{last_message_date: Date}>, res: Response) {
    const { conversation_id } = req.params;
    const { last_message_date } = req.query;

    let query = supabase
        .from('messages')
        .select(`
            id,
            conversation_id,
            message,
            created_at,

            users (
                id,
                username
            )
        `)
        .order('created_at', { ascending: true })
        .eq('conversation_id', conversation_id)

        if (last_message_date){
            query = query.gt('created_at', last_message_date)
        }

    const messages = await query;    

    res.send(messages.data)
}

The client sends us conversation_id and we use that to get all messages in a specific conversation using .eq('conversation_id', conversation_id)

There is also the option to give a last_message_date, this you could use to only fetch the new messages created after the last message the client has in memory.



// src/controllers/conversation.controller.ts
export const addMessageToConversation = async function (req: TypedRequestQueryWithBodyAndParams<{conversation_id: string}, {user_id: string, message: string}>, res: Response) {
    const conversationid = req.params.conversation_id;
    const {
      user_id,
      message,
    } = req.body;

    const data = await supabase
      .from('messages')
      .upsert({ 
        conversation_id: conversationid,
        user_id,
        message,
        created_at: ((new Date()).toISOString()).toLocaleString()
      })
      .select(`
        *,
        users (
            id,
            username
        ),
        conversations (*)
      `)

    // get the users in this chat, except for the current one
    const userConversationIds = await supabase
        .from('user_conversation')
        .select('user_id')
        .eq('conversation_id', conversationid)

    if (data.error) {
        res.send(500)
    } else {
        res.send(
            data.data[0]
        )
    }
}

a*ddMessageToConversation* is used to create a new message, and link the message to a specific conversation.

Try creating a new message from your http client, and you should get something like the following response.

Step 9. Adding Socket.IO for realtime communication

Open up your src/utils/socket.ts file and paste in the following starting code



// src/utils/socket.ts
import { Server } from "socket.io";
import { SocketConnectedUsers, SocketSocketIdUserId, User, Message, Conversation } from '../types';

class Socket {
    private static _instance: Socket;

    private io;
    private users: SocketConnectedUsers = {};
    private socketIdUserId: SocketSocketIdUserId = {};

    private constructor(server: Server) {
        this.io = server;

        this.io.on('connection', (socket) => {
            console.log('a user connected');

            socket.on('join', (user: User) => {
                this.users[user.id] = {
                    socketId: socket.id,
                    socket: socket,
                    user
                }

                this.socketIdUserId[socket.id] = user.id;
            });

            socket.on('disconnect', () => {
                const userId = this.socketIdUserId[socket.id];

                if (userId) {
                    delete this.users[userId];
                    delete this.socketIdUserId[socket.id]
                }
            });
        });
    }

    static getInstance(server?: Server) {
        if (this._instance) {
            return this._instance;
        }

        if (server) {
            this._instance = new Socket(server);
            return this._instance;
        }

        return Error("Failed to init socket");
    }
}

export default Socket;

The class is going to be a singleton (a class that can have only one object) and will be used across our app.

We initialise our websocket in the constructor, and keep track of who is connected. We also write a function getInstance that returns the singleton. This will be used by the rest of our application.

In the client we use the event “join” as our connected event. This indicates a new client has come online, and wants to connect to our websocket for realtime events.

When this happens, we keep track of this new user that is connected.

And we also keep track of it in the reverse format - so we link socket id to user id.



 socket.on('join', (user: User) => {
                this.users[user.id] = {
                    socketId: socket.id,
                    socket: socket,
                    user
                }

                this.socketIdUserId[socket.id] = user.id;
            });

The event “disconnect” is used to clean up our users when the client goes offline. So our in memory list of users doesn’t keep growing endlessly.

We also remove the data we created above.



socket.on('disconnect', () => {
                const userId = this.socketIdUserId[socket.id];

                if (userId) {
                    delete this.users[userId];
                    delete this.socketIdUserId[socket.id]
                }
            });

Head over to index.ts and update it with the following code ****



...
import { Server } from 'socket.io';
import http from 'http';
import Socket from "./utils/socket";

...
const server = http.createServer(app);
const ioServer = new Server(server);
Socket.getInstance(ioServer);

...
// change to
app.listen(3000); -> server.listen(3000);

In short: We create a new instance of our Socket.IO server using our getInstance function, and listen on port 3000 for incoming messages.

Next step is to add in two socket events:

Notify when a conversation has a new message
Notify when a user is added to a new conversation

In src/utils/socket.ts file add these two functions:



public static sendMessageToUsers  (userIds: string[], message: Message) {
      userIds.forEach((item) => {
          const user = this._instance.users[item];

          if (user) {
              user.socket.emit('message', message);
          }
      })
  }

  public static notifyUsersOnConversationCreate  (userIds: string[], conversation: Conversation) {
      userIds.forEach((item) => {
          const user = this._instance.users[item];

          if (user) {
              user.socket.emit('newConversation', conversation);
          }
      })
  }

Both functions take an array of userIds that we will use to send direct messages to (if connected).

Last step is to hook it up in src/controllers/conversation.controller.ts




// ADD AN IMPORT STATEMENT 
import Socket from '../utils/socket';

// UPDATE THE FOLLOWING FUNCTIONS
export const createConversation = async function (req: TypedRequestBody<{owner_id: string, participant_ids: string[], group_name: string}>, res: Response) {
...
// UPDATE
if (conversation.error) {
        return res.sendStatus(500)
    } else {
        const conv: Conversation = {
            ...conversation.data[0],
            participants
        };

        Socket.notifyUsersOnConversationCreate(participant_ids as string[], conv)
        return res.send(conv);
    }
}

export const addMessageToConversation = async function (req: TypedRequestQueryWithBodyAndParams<{conversation_id: string}, {user_id: string, message: string}>, res: Response) {
...
// UPDATE 
if (data.error) {
        res.send(500)
    } else {
        if (userConversationIds.data && userConversationIds.data?.length > 0) {
            const userIdsForMessages = userConversationIds.data.map((item) => item.user_id).filter((item) => item !== user_id);
            Socket.sendMessageToUsers(userIdsForMessages as string[], data.data[0] as Message)
        }

        res.send(
            data.data[0]
        )
    }
}

When a new conversation is created we notify the client of the connected users who are participants in that conversation with all the data they need to render that conversation.



Socket.notifyUsersOnConversationCreate(participant_ids as string[], conv)

And when a new message is added to a conversation, we also notify users who are in that conversation with the message data.



Socket.sendMessageToUsers(userIdsForMessages as string[], data.data[0] as Message)

And… that’s it!

You just created your very first Supabase Node Chat backend from scratch. This code is way off being production-ready.

But should give you a good idea or starting point to develop awesome chat applications of your own.

You can find all the code here

DEV Community: Nick Smet

I kept shipping apps that failed — What I learned

The trap developers fall into

I wasn’t validating — I was convincing myself

The data was right there (and I ignored it)

What I do differently now

Building is easy. Choosing what to build isn’t.

App Market research on steroids

How to add a Feedback Widget to your website

Step 1: Register Your Qualli Account

Step 2: Create Your Survey

Step 3: Website HTML Code

Step 4: Linking the Button to Your Survey

Creating Your Trigger

Activating Your Survey Trigger

Step 5: Publish Your Survey and We’re Done 🥳

Why Use Qualli?

FAQ

In-app surveys in React Native

1) Building it yourself

Using React Native components

Using libraries

2) Using a service like Qualli

3) TypeForm or SurveyMonkey, using webviews

Why Consider WebViews?

How to Implement

The downsides

In-app surveys for React Native Apps

TypeForm or SurveyMonkey, using webviews

Why Consider WebViews?

How to Implement

The downsides

Building it yourself

Using React Native components

Using libraries

Using a service like Qualli

Surveys for React Native

Why In-App Feedback Matters

Integrating Qualli in React Native

Installation

Usage

Dynamic emails with handlebars and nodemailer

How we built the Editor

Using Handlebars to add variables

Previewing the email

Sending test emails to Mailtrap

Further info

Chat backend with Supabase & Socket.io

Step 0 - Download a http client

Step 1. Setting up your Supabase account

Step 2. Creating your database

Step 3. Setup a new Node.JS server

Step 4. Create a basic Express server

Step 4. Setup our Types

Step 5. Connect to your Supabase DB

Step 6. First endpoints: Creating, and searching for users

Step 7. Fetching all conversations, and creating a new one

Quick Aside

Step 8. Getting conversation messages, and sending a new message

Step 9. Adding Socket.IO for realtime communication

More articles in this series