NX NextJS Starter - idmontie's Portfolio

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    h2: "h2",
    ul: "ul",
    li: "li",
    a: "a"
  }, props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "This short post was originally on a blog I started for creating web applications. This post goes into mobile considerations for web applications."
    }), "\n", _jsx(_components.h2, {
      children: "Tools to Sync Mobile and Web Development"
    }), "\n", _jsx(_components.p, {
      children: "These tools not only help with Mobile development, but they also help with cross-browser development as well (see Developer Tools):"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://vanamco.com/ghostlab/",
          children: "Ghostlab"
        }), " - Synchronized browser testing for web and mobile.  Test files and URLs against multiple devices by syncing clicks, scrolls, keystrokes across the devices. $49 for a license."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "https://creative.adobe.com/products/inspect",
          children: "Edge Inspect CC"
        }), " - Synchronized Browsing & Refreshing. Test files and URLs agaisnt multiple devices at once.  Part of the Adobe Creative Cloud."]
      }), "\n"]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


<p>This short post was originally on a blog I started for creating web applications. This post goes into mobile considerations for web applications.</p>
<h2>Tools to Sync Mobile and Web Development</h2>
<p>These tools not only help with Mobile development, but they also help with cross-browser development as well (see Developer Tools):</p>
<ul>
<li><a href="http://vanamco.com/ghostlab/">Ghostlab</a> - Synchronized browser testing for web and mobile.  Test files and URLs against multiple devices by syncing clicks, scrolls, keystrokes across the devices. $49 for a license.</li>
<li><a href="https://creative.adobe.com/products/inspect">Edge Inspect CC</a> - Synchronized Browsing &amp; Refreshing. Test files and URLs agaisnt multiple devices at once.  Part of the Adobe Creative Cloud.</li>
</ul>


This short post was originally on a blog I started for creating web applications. This post goes into mobile considerations for web applications.

## Tools to Sync Mobile and Web Development

These tools not only help with Mobile development, but they also help with cross-browser development as well (see Developer Tools):

* [Ghostlab](http://vanamco.com/ghostlab/) - Synchronized browser testing for web and mobile.  Test files and URLs against multiple devices by syncing clicks, scrolls, keystrokes across the devices. $49 for a license.
* [Edge Inspect CC](https://creative.adobe.com/products/inspect) - Synchronized Browsing & Refreshing. Test files and URLs agaisnt multiple devices at once.  Part of the Adobe Creative Cloud.


Mobile

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    a: "a",
    h2: "h2",
    ul: "ul",
    li: "li"
  }, props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "To kickstart the year, I created a repo that contains a simple starter kit for using NextJS with NX. You can see the repo here:"
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.a, {
        href: "https://github.com/idmontie/nx-nextjs-starter",
        children: "Github"
      })
    }), "\n", _jsx(_components.p, {
      children: "This personal Github page is built using this starter kit. I wanted to create a starter kit that was simple and easy to use and also has a lot of eslint and Typescript configuration setup. I've also been working on revamping the website for Dark Emblem - my NFT side-project. The starter kit is based on the linting rules and Typescript set up that I've been using for that project."
    }), "\n", _jsx(_components.h2, {
      children: "Nx"
    }), "\n", _jsx(_components.p, {
      children: "I've traditionally used Lerna for my monorepo projects, but now that Nx has taken over maintenance of Lerna, I decided to give Nx a try directly."
    }), "\n", _jsx(_components.p, {
      children: "Nx has been enjoyable to use. Managing many different React projects with internal libraries has been very easy to set up, use and deploy."
    }), "\n", _jsx(_components.h2, {
      children: "NextJS"
    }), "\n", _jsx(_components.p, {
      children: "My last few projects have been Single Page Apps (SPAs) or statically generated sites using Gatsby or Docusaurus. All three of those tools are great, but I wanted to try out NextJS for a few reasons:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "In my Dark Emblem project, I was having difficulty getting share links to Discord and Twitter to work properly. This was mainly caused by those sites not running JavaScript, so page links would just render the default SPA title and description. I knew that NextJS had a solution for this, so I wanted to try it out."
      }), "\n", _jsx(_components.li, {
        children: "I wanted more control of my documentation and blog websites, so I needed to be able to use custom server-side code."
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "Starter Kit"
    }), "\n", _jsx(_components.p, {
      children: "Overall the starter kit is a pretty simple example. It just containers preconfigured Nx, husky, lint-staged, eslint, prettier, Typescript, and NextJS. It does not contain any UI components or anything like that. It's just a simple starter kit to get you up and running with a monorepo NextJS project."
    }), "\n", _jsxs(_components.p, {
      children: ["Feel free to check it out at ", _jsx(_components.a, {
        href: "https://github.com/idmontie/nx-nextjs-starter",
        children: "Github"
      }), "."]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


<p>To kickstart the year, I created a repo that contains a simple starter kit for using NextJS with NX. You can see the repo here:</p>
<p><a href="https://github.com/idmontie/nx-nextjs-starter">Github</a></p>
<p>This personal Github page is built using this starter kit. I wanted to create a starter kit that was simple and easy to use and also has a lot of eslint and Typescript configuration setup. I&#x27;ve also been working on revamping the website for Dark Emblem - my NFT side-project. The starter kit is based on the linting rules and Typescript set up that I&#x27;ve been using for that project.</p>
<h2>Nx</h2>
<p>I&#x27;ve traditionally used Lerna for my monorepo projects, but now that Nx has taken over maintenance of Lerna, I decided to give Nx a try directly.</p>
<p>Nx has been enjoyable to use. Managing many different React projects with internal libraries has been very easy to set up, use and deploy.</p>
<h2>NextJS</h2>
<p>My last few projects have been Single Page Apps (SPAs) or statically generated sites using Gatsby or Docusaurus. All three of those tools are great, but I wanted to try out NextJS for a few reasons:</p>
<ul>
<li>In my Dark Emblem project, I was having difficulty getting share links to Discord and Twitter to work properly. This was mainly caused by those sites not running JavaScript, so page links would just render the default SPA title and description. I knew that NextJS had a solution for this, so I wanted to try it out.</li>
<li>I wanted more control of my documentation and blog websites, so I needed to be able to use custom server-side code.</li>
</ul>
<h2>Starter Kit</h2>
<p>Overall the starter kit is a pretty simple example. It just containers preconfigured Nx, husky, lint-staged, eslint, prettier, Typescript, and NextJS. It does not contain any UI components or anything like that. It&#x27;s just a simple starter kit to get you up and running with a monorepo NextJS project.</p>
<p>Feel free to check it out at <a href="https://github.com/idmontie/nx-nextjs-starter">Github</a>.</p>


To kickstart the year, I created a repo that contains a simple starter kit for using NextJS with NX. You can see the repo here:

[Github](https://github.com/idmontie/nx-nextjs-starter)

This personal Github page is built using this starter kit. I wanted to create a starter kit that was simple and easy to use and also has a lot of eslint and Typescript configuration setup. I've also been working on revamping the website for Dark Emblem - my NFT side-project. The starter kit is based on the linting rules and Typescript set up that I've been using for that project.

## Nx

I've traditionally used Lerna for my monorepo projects, but now that Nx has taken over maintenance of Lerna, I decided to give Nx a try directly.

Nx has been enjoyable to use. Managing many different React projects with internal libraries has been very easy to set up, use and deploy.

## NextJS

My last few projects have been Single Page Apps (SPAs) or statically generated sites using Gatsby or Docusaurus. All three of those tools are great, but I wanted to try out NextJS for a few reasons:

* In my Dark Emblem project, I was having difficulty getting share links to Discord and Twitter to work properly. This was mainly caused by those sites not running JavaScript, so page links would just render the default SPA title and description. I knew that NextJS had a solution for this, so I wanted to try it out.
* I wanted more control of my documentation and blog websites, so I needed to be able to use custom server-side code.

## Starter Kit

Overall the starter kit is a pretty simple example. It just containers preconfigured Nx, husky, lint-staged, eslint, prettier, Typescript, and NextJS. It does not contain any UI components or anything like that. It's just a simple starter kit to get you up and running with a monorepo NextJS project.

Feel free to check it out at [Github](https://github.com/idmontie/nx-nextjs-starter).

NX NextJS Starter

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    img: "img",
    strong: "strong",
    h3: "h3",
    ul: "ul",
    li: "li",
    a: "a"
  }, props.components), {Mermaid} = _components;
  if (!Mermaid) _missingMdxReference("Mermaid", true);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: _jsx(_components.img, {
        src: "/media/2023-01-07-clarity-hub-infer/Screen_Shot_2023-01-07_at_3.57.30_PM.png",
        alt: "Screen Shot 2023-01-07 at 3.57.30 PM.png"
      })
    }), "\n", _jsx(_components.p, {
      children: "While working on Clarity Hub, we created a Clarity Hub Infer API along with a developer portal that would let anyone create infer models."
    }), "\n", _jsx(_components.p, {
      children: "The Clarity Hub Infer API provides a fast and intuitive way to create, manage, and deploy NLP models based on labelling utterances."
    }), "\n", _jsx(_components.p, {
      children: "At the most basic level, the Infer API would let users send utterances via an API and get toxicity analysis, sentiment scores, and simple NLP data like nouns and topics from the utterances."
    }), "\n", _jsx(_components.p, {
      children: "The power of the Infer API is that consumers can supply a set of pre-labelled utterances to the API, and the API will create a model from this, even if there are only a few utterances used for training. Then the consumer can send a new utterance get a label using that model."
    }), "\n", _jsx(_components.p, {
      children: "The NLP APIs at Clarity Hub were a set of APIs:"
    }), "\n", _jsx(Mermaid, {
      chart: "graph RL\n  NLP(Clarity Hub NLP API) --> API(Clarity Hub Infer API) --> Consumer"
    }), "\n", _jsx(_components.p, {
      children: "The Consumer would user the Infer API which provided APIs for training and labeling datasets and getting toxicity and sentiment analyses. the Clarity Hub NLP API contained trained Tensorflow datasets for creating embeddings via the Universal Sentence Encoder (USE)."
    }), "\n", _jsxs(_components.p, {
      children: ["An ", _jsx(_components.strong, {
        children: "embedding"
      }), " a vector that represents an utterance - a sentence, sentence fragment, or paragraph of text."]
    }), "\n", _jsx(_components.p, {
      children: "Training would involve a consumer sending a payload of utterances with labels to the Infer API, which would call the NLP API internally to create embeddings. We then clustered these embeddings to and re-labelled the clusters using the given labels. If no label was found for an utterance cluster, we attempted to pull a topic out of the utterances to re-label it."
    }), "\n", _jsx(_components.p, {
      children: "The clusters with labels were then stored into S3."
    }), "\n", _jsx(Mermaid, {
      chart: "graph TD\n  Train -->|Utterances with labels| USE\n  USE -->|Embeddings with labels| Clustering\n  Clustering -->|Embedding Clusters| Labeller\n  Labeller -->|Clusters with Labels| S3"
    }), "\n", _jsx(_components.p, {
      children: "To classify a new utterance, we created an embedding from it, loaded the existing dataset in, then ran cosine similarity to find the most probabilistic matches:"
    }), "\n", _jsx(Mermaid, {
      chart: "graph TD\n  Classify --> |Utterance| USE\n  USE --> |Embedding| Classifier(Classifier)\n  Classifier --> |Embedding + Clusters from S3| Similarity(Cosine Similarity)\n  Similarity --> |Labels with Probability| Response"
    }), "\n", _jsx(_components.h3, {
      children: "What it looked like"
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.img, {
        src: "/media/2023-01-07-clarity-hub-infer/Screen_Shot_2023-01-07_at_3.57.56_PM.png",
        alt: "Screen Shot 2023-01-07 at 3.57.56 PM.png"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.img, {
        src: "/media/2023-01-07-clarity-hub-infer/Screen_Shot_2023-01-07_at_3.58.08_PM.png",
        alt: "Screen Shot 2023-01-07 at 3.58.08 PM.png"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.img, {
        src: "/media/2023-01-07-clarity-hub-infer/Screen_Shot_2023-01-07_at_3.58.28_PM.png",
        alt: "Screen Shot 2023-01-07 at 3.58.28 PM.png"
      })
    }), "\n", _jsx(_components.h3, {
      children: "Conclusion"
    }), "\n", _jsx(_components.p, {
      children: "With ChatGPT and other NLP models coming out lately, this seems fairly basic, but the following processes are still very useful to understand:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Convert language to a representation that is easier to work with, like a vector."
      }), "\n", _jsx(_components.li, {
        children: "Clustering vectors is a great way to find representative vectors, reducing the size of the number of vectors you need to work with."
      }), "\n", _jsx(_components.li, {
        children: "Cosine Similarity can be used to find how similar vectors are. If a vector is labelled with metadata, it also tells you how similar the metadata between the vectors are as well."
      }), "\n"]
    }), "\n", _jsxs(_components.p, {
      children: ["You can see ", _jsx(_components.a, {
        href: "/projects/2020-05-18-clarity-hub-infer",
        children: "my project page"
      }), " for more details and links to the Github repos."]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}


<p><img alt="Screen Shot 2023-01-07 at 3.57.30 PM.png" src="/media/2023-01-07-clarity-hub-infer/Screen_Shot_2023-01-07_at_3.57.30_PM.png" style="max-height:500px;margin:auto;text-align:center"/></p>
<p>While working on Clarity Hub, we created a Clarity Hub Infer API along with a developer portal that would let anyone create infer models.</p>
<p>The Clarity Hub Infer API provides a fast and intuitive way to create, manage, and deploy NLP models based on labelling utterances.</p>
<p>At the most basic level, the Infer API would let users send utterances via an API and get toxicity analysis, sentiment scores, and simple NLP data like nouns and topics from the utterances.</p>
<p>The power of the Infer API is that consumers can supply a set of pre-labelled utterances to the API, and the API will create a model from this, even if there are only a few utterances used for training. Then the consumer can send a new utterance get a label using that model.</p>
<p>The NLP APIs at Clarity Hub were a set of APIs:</p>
<div class="py-8 [&amp;_svg]:m-auto"><div class="mermaid" data-mermaid-src="graph RL
  NLP(Clarity Hub NLP API) --&gt; API(Clarity Hub Infer API) --&gt; Consumer">graph RL
  NLP(Clarity Hub NLP API) --&gt; API(Clarity Hub Infer API) --&gt; Consumer</div></div>
<p>The Consumer would user the Infer API which provided APIs for training and labeling datasets and getting toxicity and sentiment analyses. the Clarity Hub NLP API contained trained Tensorflow datasets for creating embeddings via the Universal Sentence Encoder (USE).</p>
<p>An <strong>embedding</strong> a vector that represents an utterance - a sentence, sentence fragment, or paragraph of text.</p>
<p>Training would involve a consumer sending a payload of utterances with labels to the Infer API, which would call the NLP API internally to create embeddings. We then clustered these embeddings to and re-labelled the clusters using the given labels. If no label was found for an utterance cluster, we attempted to pull a topic out of the utterances to re-label it.</p>
<p>The clusters with labels were then stored into S3.</p>
<div class="py-8 [&amp;_svg]:m-auto"><div class="mermaid" data-mermaid-src="graph TD
  Train --&gt;|Utterances with labels| USE
  USE --&gt;|Embeddings with labels| Clustering
  Clustering --&gt;|Embedding Clusters| Labeller
  Labeller --&gt;|Clusters with Labels| S3">graph TD
  Train --&gt;|Utterances with labels| USE
  USE --&gt;|Embeddings with labels| Clustering
  Clustering --&gt;|Embedding Clusters| Labeller
  Labeller --&gt;|Clusters with Labels| S3</div></div>
<p>To classify a new utterance, we created an embedding from it, loaded the existing dataset in, then ran cosine similarity to find the most probabilistic matches:</p>
<div class="py-8 [&amp;_svg]:m-auto"><div class="mermaid" data-mermaid-src="graph TD
  Classify --&gt; |Utterance| USE
  USE --&gt; |Embedding| Classifier(Classifier)
  Classifier --&gt; |Embedding + Clusters from S3| Similarity(Cosine Similarity)
  Similarity --&gt; |Labels with Probability| Response">graph TD
  Classify --&gt; |Utterance| USE
  USE --&gt; |Embedding| Classifier(Classifier)
  Classifier --&gt; |Embedding + Clusters from S3| Similarity(Cosine Similarity)
  Similarity --&gt; |Labels with Probability| Response</div></div>
<h3>What it looked like</h3>
<p><img alt="Screen Shot 2023-01-07 at 3.57.56 PM.png" src="/media/2023-01-07-clarity-hub-infer/Screen_Shot_2023-01-07_at_3.57.56_PM.png" style="max-height:500px;margin:auto;text-align:center"/></p>
<p><img alt="Screen Shot 2023-01-07 at 3.58.08 PM.png" src="/media/2023-01-07-clarity-hub-infer/Screen_Shot_2023-01-07_at_3.58.08_PM.png" style="max-height:500px;margin:auto;text-align:center"/></p>
<p><img alt="Screen Shot 2023-01-07 at 3.58.28 PM.png" src="/media/2023-01-07-clarity-hub-infer/Screen_Shot_2023-01-07_at_3.58.28_PM.png" style="max-height:500px;margin:auto;text-align:center"/></p>
<h3>Conclusion</h3>
<p>With ChatGPT and other NLP models coming out lately, this seems fairly basic, but the following processes are still very useful to understand:</p>
<ul>
<li>Convert language to a representation that is easier to work with, like a vector.</li>
<li>Clustering vectors is a great way to find representative vectors, reducing the size of the number of vectors you need to work with.</li>
<li>Cosine Similarity can be used to find how similar vectors are. If a vector is labelled with metadata, it also tells you how similar the metadata between the vectors are as well.</li>
</ul>
<p>You can see <a href="/projects/2020-05-18-clarity-hub-infer">my project page</a> for more details and links to the Github repos.</p>


![Screen Shot 2023-01-07 at 3.57.30 PM.png](/media/2023-01-07-clarity-hub-infer/Screen_Shot_2023-01-07_at_3.57.30_PM.png)

While working on Clarity Hub, we created a Clarity Hub Infer API along with a developer portal that would let anyone create infer models.

The Clarity Hub Infer API provides a fast and intuitive way to create, manage, and deploy NLP models based on labelling utterances.

At the most basic level, the Infer API would let users send utterances via an API and get toxicity analysis, sentiment scores, and simple NLP data like nouns and topics from the utterances.

The power of the Infer API is that consumers can supply a set of pre-labelled utterances to the API, and the API will create a model from this, even if there are only a few utterances used for training. Then the consumer can send a new utterance get a label using that model.

The NLP APIs at Clarity Hub were a set of APIs:

```mermaid
graph RL
  NLP(Clarity Hub NLP API) --> API(Clarity Hub Infer API) --> Consumer
```

The Consumer would user the Infer API which provided APIs for training and labeling datasets and getting toxicity and sentiment analyses. the Clarity Hub NLP API contained trained Tensorflow datasets for creating embeddings via the Universal Sentence Encoder (USE).

An **embedding** a vector that represents an utterance - a sentence, sentence fragment, or paragraph of text.

Training would involve a consumer sending a payload of utterances with labels to the Infer API, which would call the NLP API internally to create embeddings. We then clustered these embeddings to and re-labelled the clusters using the given labels. If no label was found for an utterance cluster, we attempted to pull a topic out of the utterances to re-label it.

The clusters with labels were then stored into S3.

```mermaid
graph TD
  Train -->|Utterances with labels| USE
  USE -->|Embeddings with labels| Clustering
  Clustering -->|Embedding Clusters| Labeller
  Labeller -->|Clusters with Labels| S3
```

To classify a new utterance, we created an embedding from it, loaded the existing dataset in, then ran cosine similarity to find the most probabilistic matches:

```mermaid
graph TD
  Classify --> |Utterance| USE
  USE --> |Embedding| Classifier(Classifier)
  Classifier --> |Embedding + Clusters from S3| Similarity(Cosine Similarity)
  Similarity --> |Labels with Probability| Response
```

### What it looked like

![Screen Shot 2023-01-07 at 3.57.56 PM.png](/media/2023-01-07-clarity-hub-infer/Screen_Shot_2023-01-07_at_3.57.56_PM.png)

![Screen Shot 2023-01-07 at 3.58.08 PM.png](/media/2023-01-07-clarity-hub-infer/Screen_Shot_2023-01-07_at_3.58.08_PM.png)

![Screen Shot 2023-01-07 at 3.58.28 PM.png](/media/2023-01-07-clarity-hub-infer/Screen_Shot_2023-01-07_at_3.58.28_PM.png)

### Conclusion

With ChatGPT and other NLP models coming out lately, this seems fairly basic, but the following processes are still very useful to understand:

- Convert language to a representation that is easier to work with, like a vector.
- Clustering vectors is a great way to find representative vectors, reducing the size of the number of vectors you need to work with.
- Cosine Similarity can be used to find how similar vectors are. If a vector is labelled with metadata, it also tells you how similar the metadata between the vectors are as well.

You can see [my project page](/projects/2020-05-18-clarity-hub-infer) for more details and links to the Github repos.
