{"tag":{"id":"56744723958ef13879b954e0","name":"TypeScript","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1607081795383/tEjUv8e8s.png","slug":"typescript","tagline":"TypeScript is an open-source language which builds on JavaScript, one of the world's most used tools, by adding static type definitions.","__typename":"Tag"},"publication":{"__typename":"Publication","id":"6024dda68a18494dfcecbf44","url":"https://blog.jarrodwatts.com","canonicalURL":"https://blog.jarrodwatts.com","urlPattern":"SIMPLE","title":"Jarrod Watts","displayTitle":"Jarrod Watts' Blog","hasBadges":true,"descriptionSEO":"Jarrod Watts Writes Technical Guides About Modern JavaScript Technologies and Web3. \n\nCheck Out My Technical Blog Today!","about":{"html":"

I'm a software engineer turned developer relations engineer currently focussed on web3. I write a combination of opinion pieces of trends in the space and detailed tutorials to create real apps!

\n","text":"I'm a software engineer turned developer relations engineer currently focussed on web3. I write a combination of opinion pieces of trends in the space and detailed tutorials to create real apps!\n","__typename":"Content"},"features":{"proTeam":{"isEnabled":false,"__typename":"ProTeamFeature"},"newsletter":{"isEnabled":false,"__typename":"NewsletterFeature"},"viewCount":{"isEnabled":true,"__typename":"ViewCountFeature"},"readTime":{"isEnabled":true,"__typename":"ReadTimeFeature"},"textSelectionSharer":{"isEnabled":false,"__typename":"TextSelectionSharerFeature"},"customCSS":{"isEnabled":false,"published":null,"draft":null,"__typename":"CustomCSSFeature"},"gptBotCrawling":{"__typename":"GPTBotCrawlingFeature","isEnabled":false},"__typename":"PublicationFeatures"},"metaTags":"\n\n","ogMetaData":{"image":"https://cdn.hashnode.com/res/hashnode/image/upload/v1622774658894/XidSDug_3.png","__typename":"OpenGraphMetaData"},"author":{"__typename":"User","id":"6024dd894d9e7d4dd727df79","name":"Jarrod Watts","username":"JarrodWatts","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1654398119830/DdanKTcxg.png"},"preferences":{"__typename":"Preferences","logo":"","darkMode":{"__typename":"DarkModePreferences","logo":null,"enabled":false},"navbarItems":[{"__typename":"PublicationNavbarItem","id":"60bc25bbe36d51141c95bce0","label":"Support Me!","url":"https://blog.jarrodwatts.com/sponsor","type":"link","series":null,"page":null},{"__typename":"PublicationNavbarItem","id":"60ab99b0f06aaf7b7c3deee0","label":"YouTube","url":"https://www.youtube.com/channel/UCJae_agpt9S3qwWNED0KHcQ","type":"link","series":null,"page":null},{"__typename":"PublicationNavbarItem","id":"6097940521068818a5c62011","label":"Twitter","url":"https://twitter.com/jarrodWattsDev","type":"link","series":null,"page":null},{"__typename":"PublicationNavbarItem","id":"609794081ea29f2c341e0e07","label":"Website","url":"https://jarrodwatts.com","type":"link","series":null,"page":null},{"__typename":"PublicationNavbarItem","id":"609793f11ea29f2c341e0df7","label":"GitHub","url":"https://github.com/jarrodwatts","type":"link","series":null,"page":null}],"enabledPages":{"__typename":"PagesPreferences","badges":true,"newsletter":false,"members":null},"layout":"stacked","disableFooterBranding":false,"isSubscriptionModalDisabled":false},"favicon":null,"headerColor":"#ffffff","integrations":{"fbPixelID":"","fathomSiteID":"","fathomCustomDomainEnabled":null,"fathomCustomDomain":"","hotjarSiteID":"","matomoSiteID":null,"matomoURL":"","gaTrackingID":"UA-197110874-1","gTagManagerID":null,"plausibleAnalyticsEnabled":null,"wmPaymentPointer":"","__typename":"PublicationIntegrations"},"imprintV2":null,"postsCount":{"totalDocuments":34,"__typename":"PublicationPostConnection"},"isTeam":false,"links":{"twitter":"https://twitter.com/jarrodWattsDev","instagram":"","github":"https://github.com/jarrodwatts/","website":"https://jarrodwatts.com","hashnode":"https://hashnode.com/@JarrodWatts","youtube":"https://www.youtube.com/channel/UCJae_agpt9S3qwWNED0KHcQ","dailydev":"","linkedin":"https://www.linkedin.com/in/jarrodwatts/","mastodon":"","facebook":null,"__typename":"PublicationLinks"},"domainInfo":{"__typename":"DomainInfo","hashnodeSubdomain":"jarrodwatts","domain":{"__typename":"DomainStatus","host":"blog.jarrodwatts.com","ready":true},"wwwPrefixedDomain":null},"redirectionRules":[],"totalRecommendedPublications":0,"sponsorship":{"content":{"html":"

Hey! 👋

By sponsoring me you are helping support me in creating more content and better content too!

Any money you kindly donate to me will be invested right back into improving my content creation by helping me purchase the tools I use to create it!

Thank you very much for considering supporting my content, it means the world to me.

\n","markdown":"Hey! 👋\n\nBy sponsoring me you are helping support me in creating more content and better content too!\n\nAny money you kindly donate to me will be invested right back into improving my content creation by helping me purchase the tools I use to create it!\n\nThank you very much for considering supporting my content, it means the world to me.\n\n ","__typename":"Content"},"stripe":{"connected":true,"accountId":"acct_1IzAgeJCrrzFfwVF","country":"AU","__typename":"StripeConfiguration"},"__typename":"PublicationSponsorship"},"pro":null,"allowContributorEdits":true,"posts":{"edges":[{"node":{"__typename":"Post","id":"6189c59fce9e5f6dfd785b3b","title":"How To Set Up Next.JS With Jest, React Testing Library and Playwright","slug":"how-to-set-up-nextjs-with-jest-react-testing-library-and-playwright","publishedAt":"2021-11-09T00:49:35.325Z","cuid":"ckvrdluld06jqq5s1cjtdd80o","url":"https://blog.jarrodwatts.com/how-to-set-up-nextjs-with-jest-react-testing-library-and-playwright","subtitle":"","brief":"Introduction\nIn this blog post, we'll explore how to set up a Next.JS project with bulletproof testing libraries, including:\n\nUnit Testing with Jest and React Testing Library\nIntegration Testing and End to End (E2E) Testing with Playwright\n\nAs a bonu...","readTimeInMinutes":11,"views":21367,"author":{"__typename":"User","id":"6024dd894d9e7d4dd727df79","username":"JarrodWatts","name":"Jarrod Watts","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1654398119830/DdanKTcxg.png","followersCount":1714},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1636417150605/5MSoL_LUb.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjE4OWM1OWZjZTllNWY2ZGZkNzg1YjNiXzIwMjEtMTEtMDlUMDA6NDk6MzUuMzI1Wg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"60b5aea65302e8579db4beef","title":"The Ultimate Guide To Firebase With Next.JS 🔥","slug":"the-ultimate-guide-to-firebase-with-nextjs","publishedAt":"2021-05-31T12:35:58.750Z","cuid":"ckpdi71v20a7zb1s146e902jw","url":"https://blog.jarrodwatts.com/the-ultimate-guide-to-firebase-with-nextjs","subtitle":"","brief":"Introduction\nBuilding a full-stack web application can be a daunting task. You'll need to consider:\n\nAuthorization (Signing up and logging in users)\nDatabases (Where you'll store your data and where to host it)\nAPIs (How your application will communi...","readTimeInMinutes":15,"views":55529,"author":{"__typename":"User","id":"6024dd894d9e7d4dd727df79","username":"JarrodWatts","name":"Jarrod Watts","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1654398119830/DdanKTcxg.png","followersCount":1714},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1622464517841/S3hjyQhTm.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjBiNWFlYTY1MzAyZTg1NzlkYjRiZWVmXzIwMjEtMDUtMzFUMTI6MzU6NTguNzUwWg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"60909ac5150acd02607141c6","title":"How To Style Your Next.JS Projects EXACTLY Like Google (in TypeScript)","slug":"nextjs-eslint-prettier-husky","publishedAt":"2021-05-04T00:52:21.721Z","cuid":"cko9bhf4l00xfgws1dvyy69wc","url":"https://blog.jarrodwatts.com/nextjs-eslint-prettier-husky","subtitle":"Learn how to utilize TypeScript, ESLint, Prettier, Husky & VS Code to style a Next.JS Project using Google's TypeScript Style Guide.","brief":"Introduction\nSticking to a consistent style guide is something that we all love doing as programmers. Whether it's spaces instead of tabs, double quotes instead of single, or putting your {'s on a new line (if you are a savage). \nSometimes, however, ...","readTimeInMinutes":10,"views":39068,"author":{"__typename":"User","id":"6024dd894d9e7d4dd727df79","username":"JarrodWatts","name":"Jarrod Watts","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1654398119830/DdanKTcxg.png","followersCount":1714},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1619612287052/-mOMZcjWa.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjA5MDlhYzUxNTBhY2QwMjYwNzE0MWM2XzIwMjEtMDUtMDRUMDA6NTI6MjEuNzIxWg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"6087cba1b81aa72681392904","title":"Get Started With AWS Amplify, Next.JS & Typescript. Full Stack with GraphQL + Authentication in 10 minutes!","slug":"aws-amplify-nextjs-typescript","publishedAt":"2021-04-27T08:30:25.605Z","cuid":"cknzrrjex008slts1ac4c63za","url":"https://blog.jarrodwatts.com/aws-amplify-nextjs-typescript","subtitle":"Build a full-stack authenticated to-do list application using modern serverless frameworks like Next.JS and AWS Amplify.","brief":"Introduction\nThis post aims to guide you on how to get started with AWS Amplify, Next.JS and Typescript, in about 10 minutes. \nWhat we are going to set up is a full-stack, serverless web application using the most modern technologies (in my opinion),...","readTimeInMinutes":13,"views":12379,"author":{"__typename":"User","id":"6024dd894d9e7d4dd727df79","username":"JarrodWatts","name":"Jarrod Watts","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1654398119830/DdanKTcxg.png","followersCount":1714},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1619511902005/9Admi3X1M.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjA4N2NiYTFiODFhYTcyNjgxMzkyOTA0XzIwMjEtMDQtMjdUMDg6MzA6MjUuNjA1Wg==","__typename":"PostEdge"}],"pageInfo":{"endCursor":"NjA4N2NiYTFiODFhYTcyNjgxMzkyOTA0XzIwMjEtMDQtMjdUMDg6MzA6MjUuNjA1Wg==","hasNextPage":false,"__typename":"PageInfo"},"__typename":"PublicationPostConnection"}}}