Set up your Next.js project with TypeScript, Tailwind, React Testing Library, Jest, Prettier, and ESlint.

human hand rising from the ocean
human hand rising from the ocean
Photo by nikko macaspac on Unsplash
  1. Official Next.js starter templates here
  2. Github repo for this tutorial here

There’s a directory in the nextjs GitHub repo that most people ignore, the example’s directory! It contains numerous nextjs starter templates with various partner technologies. Some of these include nextjs with: typescript, tailwind, apollo, urql, relay, redux, chakra ui, docker, react bootstrap, reactstrap, styled components, jest, testing library, etc. All you need to start a nextjs project with any of these templates is to run the create-next-app cli tool with a — example flag.

  1. NextJs with tailwind css
npx create-next-app --example with-tailwindcss name-of-your-project

2. NextJs with typescript

npx create-next-app…


Banner image with GraphQL Logo and written “GraphQL”

Generate GraphQL Schema From Endpoint. Generate GraphQL Queries,Mutations,Subscriptions from GraphQL Schema.

Lets cut to the chase, shall we?

  1. Run get-graphql-schema remotely with npx. Replace the URL obviously 🤷🏿‍♂️
npx get-graphql-schema https://countries.trevorblades.com > schema.graphql

2. A file named schema.graphql is generated in your current working directory.

  1. Run gql-generator remotely with npx
npx gqlg --schemaFilePath schema.graphql --destDirPath ./queries-mutations_subscriptions --depthLimit 5

2. A folder named queries-mutations_subscriptions is created in your current working directory with queries,mutations, and subscriptions sub-folders inside

c). It’s Done!


What are tests. Why test. What to test. What to use to test. How to test.

How to test react applications with jest and react testing library. Image courtesy of morioh.com
  1. TL;DR:
  2. Why Write Tests?
  3. Types of Testing
  4. Which Tests Should I Write?
  5. Which Testing Library/Framework Should I Use?
  6. React Testing Library vs Enzyme
  7. What Should We Test?
  8. Testing Terminology
  9. Test Anatomy
  10. Setup React With Jest and React Testing Library
  11. Writing React Tests With react-testing-library and Jest
  12. Write a testable App
  13. What Do We Want to Test (Test Cases)
  14. Write and run actual Tests
  15. Appendix

TL;DR:

  • You should use React Testing Library and Jest to test React Applications
  • The GitHub repo for this article can be…


What is GraphQL? How can I set it up for my project? And more

React, Apollo, GraphQL. Image courtesy of hackernoon.com

TL;DR:

What is GraphQL?

GraphQL is a query language for (API) data developed by Facebook. GraphQL gives clients (front ends and other APIs) the power to ask for exactly what they want, nothing more or less. …


Containerization on the front-end with React and docker in development and production, and deployment of a React application with docker and nginx

Deploy react app with docker and nginx. Image rights https://www.hkinfosoft.com
  1. The github repo -> https://github.com/machariamuguku/Docker-React-Nginx
  2. Steps:

a) Create a react app

b) Install docker and docker compose

c) Create a dockerfile (with a node image for building and an nginx image for deployment)

d) Create docker compose file

e) deploy the container

Imagine you want to import a laptop¹ from china. You order the laptop online, you are assigned an order tracking number, they package it inside a carton, label the carton with the order number, write it’s details in a catalog², an then pack it alongside other ordered items inside a shipping container. The container is then loaded on…


N/B:

  1. See instructions for Windows here
  2. Tested on Debian based Distros; Linux Mint and Ubuntu
  3. You can only watch FREE TO AIR channels using this method. In Kenya they include channels from Signet, ADN, Pang and Bamba providers.
  4. Excuse my black and white pictures, i had just changed my Linux theme.

Case in point: A globemax DVB-T2 Tv stick (see the naked hardware tear-down for the panasonic MN88472 here ) and the (hardware tear-down for the MN88473 demodulator version here). There are two variants of the stick with the following components:

Key components:
Realtek RTL2832P USB interface
Panasonic MN88472/MN88473 Demodulator (2013 and…


Case in point: A globemax DVB-T2 Tv stick (see the naked hardware tear-down for the panasonic MN88472 here ) and the (hardware tear-down for the MN88473 demodulator version here). There are two variants of the stick with the following components:

Key components:
Realtek RTL2832P USB interface
Panasonic MN88472/MN88473 Demodulator (2013 and 2014 variants respectively)
Rafael Micro R828D Tuner

sample pictures:

Macharia Muguku

A student of the world ; My brain has too many tabs open ; 🇰🇪; www.muguku.co.ke

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store