DEV Community: Andy

Building an HackerNews to Discord notification system using Node.js, node-cron and discord-notification.

Andy — Mon, 31 Jul 2023 12:30:16 +0000

TL;DR

In this article I am going to show how to build a simple service which monitors our HackerNews account and sends a notification to our Discord channel when there are new comments to our submissions.

We are going to use th following packages/technolgies:

Node.js / express
discord-notification
node-cron

Before we start… I have a favour to ask. 🤗

I am building an open source feature flags platform and if you could star the project on github it would really help me to grow the project and would allow me keep writing articles like this!

https://github.com/switchfeat-com/switchfeat

Setup the Express server

Let’s start creating a server folder and install express and some other depedencies we are going use:

cd server & npm init -y
npm install express cors typescript 
npm install @types/node @types/express @types/cors dotenv
npx tsc --init

Let’s create the index.ts file, and push the esieast Express configuration you can have in tyescript:

import express, { Express } from 'express';
import cors from "cors"; 

const app: Express = express();
const port = 4000;

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

app.get("/api", (req, res) => {
    res.json({
        message: "(HackerNews -> Discord) notifier",
    });
});

app.listen(port, () => {
    console.log(`⚡️[server]: Server is running on port 4000`);
});

In package.json of the sever, we need to add a script to run it:

"scripts": {
    "start": "node index.js"
  }

To finish our setup, let’s compile typescript and run the server:

tsc & npm run start

Cool! Let’s go!

Installing server dependancies

In the server folder let’s install the dependancies we need to interact with both HackerNews API and Discord webhook.

npm i discord-notification node-cron @types/node-cron

Building the HackerNews API connection

The HackerNews API exposes a bunch of public endpoints, there is no authentication, so I would assume there is some sort of rate limits in place, so be careful not to overload it with requests. More information here.

Let’s create a simple abstraction layer which would hold the connection to HackerNews and run simple GET requests to their API. Having these calls in separate file enforces separation of concerns and allows to use other libraries in the future with minimal effort.

The hackerNews.ts file would look like this:

export const getUser = async (userName: string) => {
    const resp = await fetch(getUserURL(userName), {
        method: "GET",
        headers: {
            Accept: "application/json"
        }
    });
    return await resp.json();
};

export const getSubmission = async (submissionId: string) => {
    const resp = await fetch(getItemURL(submissionId), {
        method: "GET",
        headers: {
            Accept: "application/json"
        }
    });
    return await resp.json();
};

Let’s start building the scheduling logic, in a way that our app will automatically fetch the latest data from HN on a schedule. For this, we are going to use the node-cron library which is a very solid and mature library which allows to run different sorts of scheduling patterns.

We are going to setup the scheduler to check every 15min if there are new comments to our latest submission.

node-cron uses cron-tab based cron expressions, you can see how to write more complex once here.

Let’s create a scheduler.ts file as follows:

import * as cronJob from "node-cron";

export const initScheduledJobs = () => {
  const scheduledJobFunction = cronJob.schedule("*/15 * * * *", () => {
    // - intaract with HN API
    // - send nofitication to Discord
  });

  scheduledJobFunction.start();
}

Finally let’s instruct our express server to start the scheduler at startup in the index.ts:

import * as scheduler from "./scheduler";
scheduler.initScheduledJobs();

Great! Now that we have a scheduler in place, let’s add the HackerNews fetching logic to the initScheduledJobs function:

const userData = await hackerNews.getUser(userName);
console.log(userData);

Running this code, we are going to see the response from HN for my user data dev-bre on the console.

{
  created: 1587898826,
  id: 'dev-bre',
  karma: 23,
  submitted: [
    36846077, 36712635, 36712606, 36548356,
    36547441, 36147979, 36131968, 36131217,
    36131215, 36128924, 36022807, 34781854,
    34109805, 34109230, 34109200, 34105053,
    33909549, 33909537, 33887733, 33388763
  ]
}

The submitted field in the response contains an array of itemIds each one referring to a single submission I made, sorted by date. For the purpose of this article we are going only to monitor the latest submission, which means we are only interested in the first item in that array.

In order to get the list of comments for this post, we need to run an additional API call as follows:

const submissionData = await hackerNews.getSubmission(selectedPost);

The HN API returns the data in the form of a Tree datastructure, which means this API response would contain a field: kids in the form of an array of numbers which are the direct children of the current item, i.e. direct comments to the requested comment. In order to traverse the entire set of comments, on each level we need to use recursion.

A recursive approach to get HN data

In order to get all comments to a post on any level, we need to go with a recursive approach!

Without going too much into the details of how recursion works, in a nutshell a recursive function is a function which calls itself progressively on a smaller data sets, until it reaches the base case which allows the function to return.

In our scenario, the base case is when we find a comment with no children (no one replied to that comment). Here it is how our function would look like:

const callRecursively = 
    async (node: ResultType, results: ResultType[]): Promise<void> => {

  // call HN for the current node
    let curr = await hackerNews.getSubmission(node.id);
    const kids = curr.kids as number[];
    results.push({ id: node.id, text: node.text, time: node.time });

  // check kids and go recursive
    if (kids && kids.length > 0) {
        for (let x = 0; x < kids.length; x++) {
            const childNode = {
                id: kids[x],
                text: curr.text,
                time: curr.time
            };
            await callRecursively(childNode, results);
        }
    }
};

At the end of the processing, the results array is going to contain all the comments for the requested post.

Next step is to keep track of the previous execution and compare the current execution with the previous one. If the two arrays are different, then we have updates and we need to send a discord notification.

Here it is how all this is going to be integrated with the rest of the app we are builduing:

    console.log("Starting check HackerNews -> Discord");
    const currentResults = await grabContentFromHN(
       userName, 
       selectedPostId);
    console.log(JSON.stringify(currentResults));

    // Compare the latest results with the previous run, 
    // if there is a change, then there are updates to this post.
    const updateAvailable = compareWithLastRun(currentResults);

    if (updateAvailable) {
        console.log("New updates available!");
    // notify Discord! 
    }

    // update the global state
    globalResults = [...currentResults];

The super simple comparing logic simply converts the 2 arrays in JSON strings and use the string comparator to do the work. This not the best solution, simply because it's not the fastest, but does the job:

const compareWithLastRun = 
    (currentResults: ResultType[]) : boolean => {
    if (globalResults.length < currentResults.length) {
        return true;
    }

    if (JSON.stringify(globalResults) !== JSON.stringify(currentResults)) {
        return true;
    }

    return false;
}

For the purpose of this article we are going to save the state of the previous run locally, which means everytime we restart our app, we are going to receive an intial notification, the first execution sets the baseline. A more elegant approach would save the previous run in a storage instead.

Discord integration

In order to send Discord notifications, we are going to use the discord-notification library, this is not a library which covers every single feature that the Discord API offers, but it is good enough for our usecase.

Before using the library we need to create a new Webhook on Discord. I am not going into the details on how to create a webhook, the Discord documentation is really well done. Here it is the link.

Now that we have our webhook, let’s save it in the .env file of our project. The .env should have this structure:

HN_USERNAME=
HN_POST_ID=
DISCORD_WEBHOOK=

Let’s create a new file discordNotifier.ts and let’s push this code in it.

const discordWebHook = process.env.DISCORD_WEBHOOK as string;
export const discordNotification = 
     new DiscordNotification('HN-Notifier', discordWebHook);

export const notifyDiscord = (message: string, 
     postId: string, 
     postText: string, 
     comments: number) : Promise<void> => {
    return discordNotification
    .sucessfulMessage()
    .addTitle(message)
    .addDescription(`[Link to the post](https://news.ycombinator.com/item?id=${postId})`)
    .addContent(postText)
    .addField({name: 'postId', value: postId, inline: true })
    .addField({name: 'comments', value: comments.toString() }) 
    .sendMessage();
};

The code above receives in input the notification data and uses the Webhook to send the notification. Couldn’t be easier than this!

Finally let’s integrate this logic in our scheduler, simply using this function like this:

if (updateAvailable) {
    console.log("New updates available!");
    // notify Discord!
    await discordNotifier.notifyDiscord(
            "New comments(s) available!", 
            selectedPostId, 
            currentResults[0].text, 
            currentResults.length - 1);
}

Here it is how our new shiny Discord notification will look like!

Well done!

We now have fully working Hacker News monitoring system and we won’t lose comments anymore!

We could expand on this putting additional data into the notification, like, what was the text of the latest comment, the time when the latest comment has been published, etc. This system we just built is flexible enough to allow these chanegs with minimal effort.

Github link here!.

So.. Can you help? 😉

I hope this article was somehow interesting. If you could give a star to my repo would really make my day!

https://github.com/switchfeat-com/switchfeat

Building a coffee delivery chatbot with React, ChatGPT and TypeChat 🤖

Andy — Mon, 24 Jul 2023 10:56:30 +0000

TL;DR

In this article I am going to show how to build a coffee delivery service in React and NodeJS, using a new AI-based library TypeChat.

Before we start… I have a favour to ask. 🤗

I am building an open source feature flags platform and if you could star the project on github it would mean the world to me! It would help me keep writing articles like this as well!

https://github.com/switchfeat-com/switchfeat

What is TypeChat? 🤔

TypeChat is a new experimental library built by Microsoft Typescript team which allows to translate natural language strings into type safe intents using the OpenAI infrastructure.

For example, providing a text like: “I would like a cappucino with a pack of sugar”, TypeChat can translate that string into the following structured JSON object which can be parsed and processed by our API much easier then manually tokenizing the string ourselves.

{
  "items": [
    {
      "type": "lineitem",
      "product": {
        "type": "LatteDrinks",
        "name": "cappuccino",
        "options": [
          {
            "type": "Sweeteners",
            "name": "sugar",
            "optionQuantity": "regular"
          }
        ]
      },
      "quantity": 1
    }
  ]
}

Setting things up

First things first, we need to setup the usual boilerplate of create-react-app and Express. I am not going to go too much into the details of this, just because it’s boring and doesn’t really add much to this article.

Setup React app

Lets quickly create two folders, client and server and start installig our dependancies.

mkdir client server

In the client folder, let’s install create-react-app:

cd client & npx create-react-app my-react-app --template typescript

Once the installation is complete, let’s install the react-router-dom to manage the routing much easier:

npm install react-router-dom heroicons

Setup the Express server

Let’s move to the server folder and install Express and some other depedancies we are going use:

cd server & npm init -y

npm install express cors typescript @types/node @types/express types/cors dotenv

Once everything has been install, let’s initialize typescript:

npx tsc --init

Let’s create the index.ts file, which is going to contain the main server API logic:

touch index.ts

That’s the easiest Express configuration you can have in typescript:

import express, { Express } from 'express';
import cors from "cors"; 

const app: Express = express();
const port = 4000;

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

app.get("/api", (req, res) => {
    res.json({
        message: "Food ordering chatbot",
    });
});

app.listen(port, () => {
    console.log(`⚡️[server]: Server is running on port 4000`);
});

In package.json of the sever, we need to add a script to run it:

"scripts": {
    "start": "node index.js"
  }

To finish our setup, let’s compile typescript and run the server:

tsc & npm run start

Cool! let’s more to something much cooler shall we!?

Building the UI

We are going to use TailwindCSS to manage our styling which makes things much easier to manage. Let’s start from changing the App.tsx file to this, which uses the React Router to render components on the page.

import './output.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import { ChatBot } from './components/Chatbot';

export const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<ChatBot />} />
      </Routes>
    </BrowserRouter>
  );
}

Let’s create the ChatBot component which is going to show the chatbot user interface and send API requests to our Express server.

Here is the markup of the ChatBot component:

return (
<div className="flex min-h-full flex-1 flex-col justify-center overflow-hidden">
    <div className="divide-y divide-gray-200 overflow-hidden  flex  flex-col 
                    justify-between">
        <div className="w-full h-full px-4 py-5 sm:p-6 mb-32">
            <ul className="mb-8  h-full">
                {chatSession.map((x, index) =>
                (x.role !== 'system' ?
                    <div key={index}>
                        <li>
                            <div className="relative pb-8">
                                {index !== chatSession.length - 1 ? (
                                    <span className="absolute left-4 top-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true" />
                                ) : null}
                                <div className="relative flex space-x-3">
                                    <div>
                                        <span className={classNames('h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white', x.role === 'user' ? 'bg-slate-600' : 'bg-orange-500')}>
                                            {x.role === 'user' && <UserIcon className="h-5 w-5 text-white" aria-hidden="true" />}
                                            {x.role === 'assistant' && <RocketLaunchIcon className="h-5 w-5 text-white" aria-hidden="true" />}
                                        </span>
                                    </div>
                                    <div className="flex min-w-0 flex-1 justify-between space-x-4 pt-1">
                                        <div>
                                            <p className="text-md text-gray-500" style={{ whiteSpace: "pre-wrap" }}>
                                                {x.content}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </div> : <div key={index}></div>))
                {isProcessing && (
                <li key={'assistant-msg'}>
                    <div className="relative pb-8">
                        <div className="relative flex space-x-3">
                            <div>
                                <span className={classNames('h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white', 'bg-orange-500')}>
                                    <RocketLaunchIcon className="h-5 w-5 text-white" aria-hidden="true" />
                                </span>
                            </div>
                            <div className="flex min-w-0 flex-1 justify-between space-x-4 pt-1">
                                <div>
                                    <p ref={processingMessage} className="text-md text-gray-500" style={{ whiteSpace: "pre-wrap" }}>
                                        {currentAssistantMessage}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>)
                <div ref={messagesEndRef} />
                {isProcessing && (
                    <button type="button" className="inline-flex items-center px-4 py-2 font-semibold leading-6 text-sm shadow rounded-md text-white bg-indigo-500 hover:bg-indigo-400 transition ease-in-out duration-150 cursor-not-allowed" disabled>
                        <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        Processing...
                    </button>
                )}
            </ul>
        </div>
        <div className=" w-full bottom-0 mt-2 flex rounded-md   px-4 py-5 sm:p-6 bg-slate-50 fixed">
            <div className="relative flex flex-grow items-stretch focus-within:z-10 w-full">
                <input
                    ref={chatInput}
                    type="text"
                    name="textValue"
                    className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                    placeholder="your order here..."
                />
            </div>
            <button
                onClick={processOrderRequest}
                type="button"
                className="relative -ml-px inline-flex items-center gap-x-1.5 rounded-r-md px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
            >
                <BarsArrowUpIcon className="-ml-0.5 h-5 w-5 text-gray-400" aria-hidden="true" />
                Send
            </button>
        </div>
    </div>
</div>);

There is not too much going on here, most of the code is all about updating chat history and add a button to send the order request to our API. Here it is how this component will look like on the page:

Sending the order request to the API

Add a POST route to the express server which accepts a string containing the order in natural language, processes the order and returns the order which has been processed back to the user.

const processOrderRequest = async () => {

        setIsProcessing(true);
        if (!chatInput.current) {
            setIsProcessing(false);
            return;
        } 

        chatSession.push({ role: "user", content: chatInput.current.value });
        const tempArr: ChatMessage[] = [];
        for (const t of chatSession) {
            tempArr.push(t);
        }
        setChatSession([...tempArr]);

        fetch("http://localhost:4000/api/order-request", {
            method: "POST",
            body: JSON.stringify({ newMessage: chatInput.current.value }),
            headers: {
                "Content-Type": "application/json",
            },
        })
            .then((res) => res.json())
            .then((result) => {
                const order: any[] = [];
                result.items.forEach((x: any) => {
                    const options = x.product.options ? x.product.options.map((opt: any) => { return {name: opt.name, quantity: opt.optionQuantity}; }) : [];
                    order.push({product: x.product.name, options: options, size: x.product.size});
                });
                const orderString: string[] = [];
                order.forEach((x: any) => {
                    orderString.push(`${x.size} ${x.product} with ${x.options.map((x: any) => `${x.quantity === undefined ? "" : x.quantity} ${x.name}`).join(" and ")}`);
                });
                const resp = `🎉🎉 Thanks for your order! 🎉🎉 \n\n ☕> ${orderString.join("\n ☕> ")}`;
                tempArr.push({ role: "assistant", content: resp });
                setChatSession([...tempArr]);
                setCurrentAssistantMessage("");
                if (processingMessage.current)
                    processingMessage.current.innerText = "";
                if (chatInput.current)
                    chatInput.current.value = "";
            })
            .catch((err) => console.error(err))
            .finally(() => { setIsProcessing(false); });
    };

The function above grabs the string in natural language from the input field, updates the chat history and sends the request to our API. Once we get the results, it parses the data and adds a new message into the chat history with the order which has been confirmed.

Setting up TypeChat on the Server

Here you will learn how to setup TypeChat and start sending requests to OpenAI. Let's move back to the server folder and let's install the library from NPM:

npm install typechat

Once installed, we have to configure the schema that TypeChat will use to cast the AI response into the right types. For the purpose of this article, I have shamelessly used the schema definition from the official TypeChat example repo and moved into our project. Here it is the link. The main part of this schema is definition of the Cart type:

export interface Cart {
    items: (LineItem | UnknownText)[];
}

// Use this type for order items that match nothing else
export interface UnknownText {
    type: 'unknown',
    text: string; // The text that wasn't understood
}

export interface LineItem {
    type: 'lineitem',
    product: Product;
    quantity: number;
}

We will instruct TypeChat to use this specific model to translate the string coming from the request into a Cart object, which is basically a list of products items that the customer wants to buy.

Now we need to setup the OpenAI api key that TypeChat uses behind the scenes to execute the requests. The apiKey needs to stay private (do not share your apiKey with anyone!), but needs to be stored in the .env file in the server folder of the project. It will have this structure:

OPENAI_MODEL="gpt-3.5-turbo"
OPENAI_API_KEY="<YOUR OPENAI APIKEY>"

The following snippet adds a new POST endpoint to the Express app which receives the order request from the UI, uses TypeChat to extract an intent out of that string and finally processes the order:

const model = createLanguageModel(process.env);
const schema = fs.readFileSync(path.join(__dirname, "coffeOrdersSchema.ts"), "utf8");
const translator = createJsonTranslator<Cart>(model, schema, "Cart");

app.post("/api/order-request", async (req, res) => {
    const { newMessage } = req.body;
    console.log(newMessage);

    if (!newMessage || newMessage === "") {
        console.log("missing order");
        res.json({error: "missing order"});
        return;
    }

    // query TypeChat to translate this into an intent
    const response: Result<Cart> = await translator.translate(newMessage as string);

    if (!response.success) {
        console.log(response.message);
        res.json({error: response.message});
        return;
    }

    await processOrder(response.data);

    res.json({
        items: response.data.items
    });
});

For simplicity, our processOrder function is going to be a simple console.log(), but in reality it could be sending the order to a processing queue or to any other background process.

const processOrder = async (cart: Cart) => {
    // add this to a queue or any other background process
    console.log(JSON.stringify(cart, undefined, 2));
};

Big congrats! 🎉

If you made it this far, you managed to build a fully working chatbot which can take coffe orders. This system is flexible enough that you could apply the same architecture and logic to any other type of online ordering services like groceries, clothes, restaurants.. you name it! Just changing the schema, TypeChat will be able to generate structured responses based on your needs.

In the next section you will learn how to use SwitchFeat to evaluate the current user access to the premium features for this chatbot.

Using feature flags to show premium features

In this section we are going to use SwitchFeat API, to evaluate if a given user has access to the premium features of this chatbot, like fast delivery or weekends delivery.

At this current stage SwitchFeat doesn’t have a dedicated SDK yet, so we are going to use a simple fetch to contact the API and evaluate the current user request.

Let’s change our component to track the current user data into a state variable. This information should come from a database or any datastore and could be stored in a Context Provider to be shared across multiple components. But for the purpose of this article let’s keep it simple.

const [userContext, setUserContext] =
          useState<{}>({ 
                 username: 'a@switchfeat.com', 
                 isPremium: true 
          });

Add another state variable which is going to define if the premium features should be shown to the current user or not:

const [showPremium, setShowPremium] = useState<boolean>(false);

Finally add the following fetch request to the component:

 useEffect(() => {
    const formData = new FormData();
    formData.append('flagKey', "premium-delivery");
    formData.append('flagContext', JSON.stringify(userContext));
    formData.append('correlationId', uuidv4());

    const evaluateFlag = () => {
      fetch(`http://localhost:4000/api/sdk/flag/`, {
        method: "POST",
        headers: {
          Accept: "application/json",
          "Access-Control-Allow-Credentials": "true",
          "Access-Control-Allow-Origin": "true"
        },
        body: formData
      }).then(resp => {
        return resp.json();
      }).then(respJson => {
        setShowPremium(respJson.data.match);
      }).catch(error => { console.log(error); });
    };
    evaluateFlag();
  }, []);

The snippet above sends an API request to SwitchFeat, checks if the current user is a premium user and evaluates if they are allowed to have premium features.

Finally just add this nippet wherever you want your PremiumFeatures component should be rendered.

{showPremium && <PremiumFeatures />}

Why using a feature flag for this?

You already know if a user is premium right!? True… but… what if you want to disable that feature regardless?

There are multiple scenarios where you would want to pause the premium delivery (or any other feature), for scarcity of drivers, not enough premium orders available, etc. A simple logic which switches on/off that features with a single click in realtime, is really powerful and avoids building ad-hoc changes spread across the codebase.

Create your flag in SwitchFeat

First we need to create a new user segment to group all the users which are paying for the Premium service:

Then we need to create a new flag which gates the access to the premium feature using this segment:

Here is our new shiny flag which we can use in our API requests:

Now changing the status of the switch in SwitchFeat, you will be able to activate or deactivate the premium features without any code change or redeployment. Look at the video below.

Well done everyone! you managed to finish this article and get an idea of what TypeChat is and why is so cool to use it. I pushed the entire codebase of this article on Github if you want to check it out.

So.. Can you help? 😉

I hope this article was somehow interesting. If you could give a star to my repo would really make my day!

https://github.com/switchfeat-com/switchfeat

🏗️ How to rollout features to specific users in ReactJS

Andy — Fri, 21 Jul 2023 10:40:16 +0000

TL;DR

In this article I am going to show you how to activate specific features for specific users using feature flags in a ReactJS app.

Even though there are multiple services which would allow you to manage your feature flags, we are going to use SwitchFeat, a service that I am building open-source and in public.

Why is this useful?

Gradually release features to subsets of users.
Decouple deployments from releases.
Safe guarding new feature with kill-switches.
and many more...

Can you help?

I am trying to increase the visibility of my repo, could you help me by adding a star to the project? It would help me so much and it would give a big boost to publish more articles weekly! 🤩

https://github.com/switchfeat-com/switchfeat

Let's get started! 🔥

First thing first, create a React app in Typescript

npx create-react-app my-react-app --template typescript

Let's install some common dependancies

npm i --save @types/node @types/react @types/react-dom uuidv4

Running these two commands already give you a working React app which we can start modifying as desired.

This is the default App.tsx which is going to hold our homepage:

const App : React.FC = () => {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
export default App;

Which looks like this:

To manage styles a bit more easily, we will use TailwindCSS, which allows to specify inline classes without going to touch css files.

I know this stuff Andy! Give me something new!

Let's protect our component ⛔

Now things become a bit more interesting. We are going to build a new component, SuperCoolCard, which is going to hold some functionality which we want to gate and make available only to a specific segment of users.

Let's say that we want to show this card to users with an email address ending with @switchfeat.com.

For the purpose of this article, the component is going to be super simple:

export const SuperCoolCard : React.FC = () => {
    return (
        <div className="rounded-lg shadow   
             bg-orange-500 p-10 mt-10">
            <div>Super cool feature </div>
            <button className="rounded-md bg-indigo-600 
                    px-3.5 py-2.5 font-semibold text-white 
                    shadow-sm hover:bg-indigo-500 
                    text-lg mt-4">Let's start</button>
        </div>
    );
}

In order to gate the access to this component to a specific user segment, we can use the SwitchFeat API as follows:

 const [showNewCard, setShowNewCard] = useState<boolean>(false);
 const [userContext, setUserContext] = 
                   useState<{}>({ username: 'a@switchfeat.com' });

 useEffect(() => 
    const formData = new FormData();
    formData.append('flagKey', "new-card");
    formData.append('flagContext',  JSON.stringify(userContext));
    formData.append('correlationId', uuidv4());

    const evaluateFlag = () => {
      fetch(`http://localhost:4000/api/sdk/flag/`, {
        method: "POST",
        headers: {
          Accept: "application/json",
          "Access-Control-Allow-Credentials": "true",
          "Access-Control-Allow-Origin": "true"
        },
        body: formData
      }).then(resp => {
        return resp.json();
      }).then(respJson => {
        setShowNewCard(respJson.data.match);
      }).catch(error => { console.log(error); });
    };

    evaluateFlag();

  }, []);

First of all, we add a state to the page which will hold the information regarding if the card component should be shown or not.
This is a React construct which forces a re-render of the component if such state changes, to show the latest data.

The useEffect() call is a side effect which, in this case, gets executed at first page load (or page refreshes). It is responsible of calling the SwitchFeat API via a POST Fetch request, to get the status of the requested flag based on the provided context.

In this example, the user context provided is: {email:'a@switchfeat.com'}.

For the purpose of this article, I put the user context in the state of the component, but this should really depend on the current user data in a real scenario.

Last step is going to beadding the reference to the new component in the page behind the "protected" state:

return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"  href="https://reactjs.org"
          target="_blank" rel="noopener noreferrer">Learn React
        </a> 
        {showNewCard && <SuperCoolCard />}
      </header>
    </div>
  );

What's going to happen now, is that when there is a state change in the value of showNewCard, the whole component re-renders and the SuperCoolCard component will either show up or not based on the API response from SwitchFeat. Cool right!?

SwitchFeat is under active development and I already planned to release an SDK for NodeJS, together with other languages over time. So the interaction with the API will be simplified even further.

Behind the scenes 😎

The SwitchFeat API, upon receiving the request, runs the following checks:

Checks if the requested flagKey points to an existing flag.
Checks if the requested flag has any rule.
Evaluates all available rules and checks if the provided context (in this case {email:'a@switchfeat.com'}), matches at least one segment condition.
Returns the match result or an error.

The final results 🚀

Here it is how the page looks like by default having the flag disabled.

Instead when the flag is enabled and there is a rule matching the context, our beautiful card can shine on the homepage!

What's even more important is that even if the flag stays enabled, but the context of the API call changes to something which is not matching any of the flag rules, the card will be removed from the DOM for those users.

So for example, providing a context like: {email:'a@google.com'}, the result is going to be:

Well done! 🙌

You can now sit and relax knowing that any feature you want to silently deploy and release at your own time, are safely protected by your feature flags!

So.. Can you help? 😉

I hope this article was somehow interesting. If you could give a star to my repo would really make my day!

https://github.com/switchfeat-com/switchfeat