Mobile - 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",
    h3: "h3"
  }, props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "This post was originally on a blog I started for creating web applications. This post goes into using developer tools to help you develop your web applications."
    }), "\n", _jsx(_components.h2, {
      children: "Cross Browser 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", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://livereload.com/",
          children: "Live Reload"
        }), " - LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. $10 for Mac. Free for other platforms."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "https://www.parallels.com/",
          children: "Parallels"
        }), " - Run Windows on Your Mac.  Useful for testing Internet Explorer on OSX."]
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "Google Chrome Tools"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://cssdig.com/",
          children: "CSSDig"
        }), " - Look at your CSS in a way that easily allows you to refactor it."]
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "User Interface Tools"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "www.uxcheck.co",
          children: "UX Check"
        }), " - UX Check is a Chrome Extension that helps you identify usability issues through a heuristic evaluation.  It gives you tools for making notes on websites."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "www.googleui.org",
          children: "Good UI"
        }), " - Data stories concerning UI. Tips and hints for a better user experience.  They have a paid-for newsletter."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://littlebigdetails.com/",
          children: "Little Big Details"
        }), " contains design inspiration from the point of view of the users."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "https://color.adobe.com/",
          children: "Adobe Color CC"
        }), " - Formerly known as Kuler, this tools lets you pick color schemes."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://www.materialpalette.com/",
          children: "Material Palette"
        }), " - Preview simple color schemes.  Pick two colors and preview what they will look like on a simple site."]
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "Usage Trends"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://w3techs.com/",
          children: "W3Techs"
        }), " has a lot of technology surveys that can show you current technology trends.  It will show changes in market share, which CMS systems are popular, etc."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://stackshare.io/",
          children: "Stack Share"
        }), " - see what technology stacks other platforms are using."]
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "Images and Stock Photos"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://subtlepatterns.com/",
          children: "Subtle Patterns"
        }), " - Sublte pattern backgrounds for websites."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "https://unsplash.com/",
          children: "Unsplash"
        }), " - Large, high-resolution, splash photos for free."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://www.resplashed.com/",
          children: "Resplashed"
        }), " - HD images."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "https://medium.com/@dustin/stock-photos-that-dont-suck-62ae4bcbe01b",
          children: "Stock photos list ad Medium"
        }), " - List of great stock photo resources."]
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "http://superfamous.com/",
          children: "SuperFamous"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "http://www.imcreator.com/free",
          children: "IMCreator"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "http://thepatternlibrary.com/",
          children: "The Pattern Library"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "http://picjumbo.com/",
          children: "Pic Jumbo"
        })
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "Templates"
    }), "\n", _jsx(_components.h3, {
      children: "HTML5 Templates"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://html5up.net/",
          children: "HTML5 Up"
        }), " - fully responsive, free, HTML5 templates."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://themes.3rdwavemedia.com/",
          children: "HTML5 Templates"
        }), " - UX centred HTML5 Bootstrap themes and templates."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://templated.co/",
          children: "Templated"
        }), " - A collection of free CSS and HTML5 site templates."]
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "Emails"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://zurb.com/ink/",
          children: "Ink"
        }), " - Tool for helping create emails."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "https://beefree.io/",
          children: "BeeFree"
        }), " - Tool for helping create emails."]
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "SEO"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "https://adwords.google.com/KeywordPlanner",
          children: "Google Keyword Planner"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "http://www.google.com/analytics/",
          children: "Google Analytics"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "https://support.google.com/analytics/answer/1745147",
          children: "Website Optimizer"
        })
      }), "\n"]
    }), "\n", _jsxs(_components.p, {
      children: ["Note: Checkout the ", _jsx(_components.a, {
        href: "https://www.youtube.com/watch?v=9yKjrdcC8wA",
        children: "Google Trifecta Video"
      }), "."]
    })]
  });
}
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 post was originally on a blog I started for creating web applications. This post goes into using developer tools to help you develop your web applications.</p>
<h2>Cross Browser Tools</h2>
<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>
<li><a href="http://livereload.com/">Live Reload</a> - LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. $10 for Mac. Free for other platforms.</li>
<li><a href="https://www.parallels.com/">Parallels</a> - Run Windows on Your Mac.  Useful for testing Internet Explorer on OSX.</li>
</ul>
<h2>Google Chrome Tools</h2>
<ul>
<li><a href="http://cssdig.com/">CSSDig</a> - Look at your CSS in a way that easily allows you to refactor it.</li>
</ul>
<h2>User Interface Tools</h2>
<ul>
<li><a href="www.uxcheck.co">UX Check</a> - UX Check is a Chrome Extension that helps you identify usability issues through a heuristic evaluation.  It gives you tools for making notes on websites.</li>
<li><a href="www.googleui.org">Good UI</a> - Data stories concerning UI. Tips and hints for a better user experience.  They have a paid-for newsletter.</li>
<li><a href="http://littlebigdetails.com/">Little Big Details</a> contains design inspiration from the point of view of the users.</li>
<li><a href="https://color.adobe.com/">Adobe Color CC</a> - Formerly known as Kuler, this tools lets you pick color schemes.</li>
<li><a href="http://www.materialpalette.com/">Material Palette</a> - Preview simple color schemes.  Pick two colors and preview what they will look like on a simple site.</li>
</ul>
<h2>Usage Trends</h2>
<ul>
<li><a href="http://w3techs.com/">W3Techs</a> has a lot of technology surveys that can show you current technology trends.  It will show changes in market share, which CMS systems are popular, etc.</li>
<li><a href="http://stackshare.io/">Stack Share</a> - see what technology stacks other platforms are using.</li>
</ul>
<h2>Images and Stock Photos</h2>
<ul>
<li><a href="http://subtlepatterns.com/">Subtle Patterns</a> - Sublte pattern backgrounds for websites.</li>
<li><a href="https://unsplash.com/">Unsplash</a> - Large, high-resolution, splash photos for free.</li>
<li><a href="http://www.resplashed.com/">Resplashed</a> - HD images.</li>
<li><a href="https://medium.com/@dustin/stock-photos-that-dont-suck-62ae4bcbe01b">Stock photos list ad Medium</a> - List of great stock photo resources.</li>
<li><a href="http://superfamous.com/">SuperFamous</a></li>
<li><a href="http://www.imcreator.com/free">IMCreator</a></li>
<li><a href="http://thepatternlibrary.com/">The Pattern Library</a></li>
<li><a href="http://picjumbo.com/">Pic Jumbo</a></li>
</ul>
<h2>Templates</h2>
<h3>HTML5 Templates</h3>
<ul>
<li><a href="http://html5up.net/">HTML5 Up</a> - fully responsive, free, HTML5 templates.</li>
<li><a href="http://themes.3rdwavemedia.com/">HTML5 Templates</a> - UX centred HTML5 Bootstrap themes and templates.</li>
<li><a href="http://templated.co/">Templated</a> - A collection of free CSS and HTML5 site templates.</li>
</ul>
<h2>Emails</h2>
<ul>
<li><a href="http://zurb.com/ink/">Ink</a> - Tool for helping create emails.</li>
<li><a href="https://beefree.io/">BeeFree</a> - Tool for helping create emails.</li>
</ul>
<h2>SEO</h2>
<ul>
<li><a href="https://adwords.google.com/KeywordPlanner">Google Keyword Planner</a></li>
<li><a href="http://www.google.com/analytics/">Google Analytics</a></li>
<li><a href="https://support.google.com/analytics/answer/1745147">Website Optimizer</a></li>
</ul>
<p>Note: Checkout the <a href="https://www.youtube.com/watch?v=9yKjrdcC8wA">Google Trifecta Video</a>.</p>


This post was originally on a blog I started for creating web applications. This post goes into using developer tools to help you develop your web applications.

## Cross Browser 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.
* [Live Reload](http://livereload.com/) - LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. $10 for Mac. Free for other platforms.
* [Parallels](https://www.parallels.com/) - Run Windows on Your Mac.  Useful for testing Internet Explorer on OSX.

## Google Chrome Tools

* [CSSDig](http://cssdig.com/) - Look at your CSS in a way that easily allows you to refactor it.  

## User Interface Tools

* [UX Check](www.uxcheck.co) - UX Check is a Chrome Extension that helps you identify usability issues through a heuristic evaluation.  It gives you tools for making notes on websites.
* [Good UI](www.googleui.org) - Data stories concerning UI. Tips and hints for a better user experience.  They have a paid-for newsletter.
* [Little Big Details](http://littlebigdetails.com/) contains design inspiration from the point of view of the users.
* [Adobe Color CC](https://color.adobe.com/) - Formerly known as Kuler, this tools lets you pick color schemes.
* [Material Palette](http://www.materialpalette.com/) - Preview simple color schemes.  Pick two colors and preview what they will look like on a simple site.

## Usage Trends

* [W3Techs](http://w3techs.com/) has a lot of technology surveys that can show you current technology trends.  It will show changes in market share, which CMS systems are popular, etc.
* [Stack Share](http://stackshare.io/) - see what technology stacks other platforms are using.

## Images and Stock Photos

* [Subtle Patterns](http://subtlepatterns.com/) - Sublte pattern backgrounds for websites.
* [Unsplash](https://unsplash.com/) - Large, high-resolution, splash photos for free.
* [Resplashed](http://www.resplashed.com/) - HD images.
* [Stock photos list ad Medium](https://medium.com/@dustin/stock-photos-that-dont-suck-62ae4bcbe01b) - List of great stock photo resources.
* [SuperFamous](http://superfamous.com/)
* [IMCreator](http://www.imcreator.com/free)
* [The Pattern Library](http://thepatternlibrary.com/)
* [Pic Jumbo](http://picjumbo.com/)

## Templates

### HTML5 Templates

* [HTML5 Up](http://html5up.net/) - fully responsive, free, HTML5 templates.
* [HTML5 Templates](http://themes.3rdwavemedia.com/) - UX centred HTML5 Bootstrap themes and templates.
* [Templated](http://templated.co/) - A collection of free CSS and HTML5 site templates.

## Emails

* [Ink](http://zurb.com/ink/) - Tool for helping create emails.
* [BeeFree](https://beefree.io/) - Tool for helping create emails.

## SEO

* [Google Keyword Planner](https://adwords.google.com/KeywordPlanner)
* [Google Analytics](http://www.google.com/analytics/)
* [Website Optimizer](https://support.google.com/analytics/answer/1745147)

Note: Checkout the [Google Trifecta Video](https://www.youtube.com/watch?v=9yKjrdcC8wA).


Developer Tools

/*@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).