DEV Community: Muhammad Ali (Nerdjfpb)

How to auto sort imports in frontend, example with typescript & nextjs

Muhammad Ali (Nerdjfpb) — Mon, 12 Jun 2023 14:34:38 +0000

As a frontend developer, I import a lot of things on my every file and they look scary after a while! So I was looking for a way to solve this and I found a quick and easy solution which can use on any project I work on.

There are multiple ways to do the sorting and I always look for the easy and I always do that.

So here is an example of how I’m doing it in my nextjs project. After creating a new nextjs project. I install 2 packages –

npm i -D prettier @trivago/prettier-plugin-sort-imports

Now I add a .prettierrc for my project and it contains

{
  "singleQuote": true,
  "importOrder": [
    "<THIRD_PARTY_MODULES>",
    "^@internal/(.*)$",
    "^[./].*(?<!\\.(c|le|sc)ss)$",
    "^[.]/[-a-zA-Z0-9_]+[.](module)[.](css|scss|less)$"
  ],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true,
  "printWidth": 120
}

I went with my configuration you can go with one you like more. Find out more by clicking here

I generally use vscode and I configured always use prettier for sorting (Also installed a prettier extension). This helps me to apply the prettier on each save.

If you are using vscode just add this in your setting JSON file then it’ll apply prettier every time you save

  "editor.formatOnSave": true,

Source Code

You can find it here – https://github.com/nerdjfpb/auto-sort-import-example

Questions?

Drop a dm on – twitter

Want to be part of an amazing programming community and participate in free programming events?

Join our Discord server

Want to hire me for your next project?

Connect me with linkedin

How to use custom google font with react native expo, NativeBase and Typescript?

Muhammad Ali (Nerdjfpb) — Thu, 10 Mar 2022 15:48:46 +0000

Introduction

Recently, I started working with a react native project with NativeBase. I feel like a custom font guide can be a little hard to understand, so I'm writing this blog to make things easier!

Pre Requisite

To follow along with the blog, you should know a few stuff -

React Basics
React Native basics
Expo Basics
Typescript basics

Things I’m using

Vscode: for writing code
Nodejs: for different commands & npm
Packages
- expo ts template: for creating react native app with ts
- expo-font: for using font in expo
- @expo-google-fonts/inter: google font inter

App initialization with expo and ts

Let's start the app using - (install expo if that's not available in as global package)

expo init custom-font-with-ts

will open up

? Choose a template: » - Use arrow-keys. Return to submit.
    ----- Managed workflow -----
    blank               a minimal app as clean as an empty canvas
>   blank (TypeScript)  same as blank but with TypeScript configuration
    tabs (TypeScript)   several example screens and tabs using react-navigation and TypeScript
    ----- Bare workflow -----
    minimal             bare and minimal, just the essentials to get you started

Choose blank (TypeScript) because we will work with typescript! It'll take some time. Once it's done, let's install our UI component library nativbase using

yarn add native-base
expo install react-native-svg react-native-safe-area-context

Install done. Now let's go to the App.tsx file and add native-base. The file will look like this -

import { NativeBaseProvider, Box } from "native-base";

export default function App() {
  return (
    <NativeBaseProvider>
      <Box flex={1} bg="#fff" alignItems="center" justifyContent="center">
        Hello world
      </Box>
    </NativeBaseProvider>
  );
}

Let's run it using yarn start. We can run it on android, ios or the web. I'll run it in android, and it looks like -

As a default font family, its using

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
  Arial, sans-serif;

Add google font

Now let's add some custom google font here! We are using expo, so we need to follow the expo way to installing custom google font -

expo install expo-font @expo-google-fonts/inter

I am using inter font, so I've installed it here. You can use other fonts as you want. Check the google fonts available by expo from here

Now we've to load the font in our App.tsx

import {
  useFonts,
  Inter_100Thin,
  Inter_200ExtraLight,
  Inter_300Light,
  Inter_400Regular,
  Inter_500Medium,
  Inter_600SemiBold,
  Inter_700Bold,
  Inter_800ExtraBold,
  Inter_900Black,
} from "@expo-google-fonts/inter";
import { NativeBaseProvider, Box, Text } from "native-base";

export default function App() {
  let [fontsLoaded] = useFonts({
    Inter_100Thin,
    Inter_200ExtraLight,
    Inter_300Light,
    Inter_400Regular,
    Inter_500Medium,
    Inter_600SemiBold,
    Inter_700Bold,
    Inter_800ExtraBold,
    Inter_900Black,
  });

  if (!fontsLoaded) {
    return <></>;
  }

  return (
    <NativeBaseProvider>
      <Box flex={1} bg="#fff" alignItems="center" justifyContent="center">
        <Text fontSize="2xl" fontWeight="700" textTransform="uppercase">
          Custom Font App
        </Text>
      </Box>
    </NativeBaseProvider>
  );
}

We can add the custom font, but they are not being used right now. If we look into the app, we'll use find the old font being used. So we need to improve that by changing the theme from native-base!

Let's do it together. Add a theme.ts file in the root and add the fonts there -

import { extendTheme } from "native-base";

export const theme = extendTheme({
  fontConfig: {
    Inter: {
      100: {
        normal: "Inter_100Thin",
      },
      200: {
        normal: "Inter_200ExtraLight",
      },
      300: {
        normal: "Inter_300Light",
      },
      400: {
        normal: "Inter_400Regular",
      },
      500: {
        normal: "Inter_500Medium",
      },
      600: {
        normal: "Inter_600SemiBold",
      },
      700: {
        normal: "Inter_700Bold",
      },
      800: {
        normal: "Inter_800ExtraBold",
      },
      900: {
        normal: "Inter_900Black",
      },
    },
  },

  // Make sure values below matches any of the keys in `fontConfig`
  fonts: {
    heading: "Inter",
    body: "Inter",
    mono: "Inter",
  },
});

Now just link the theme with our current App.tsx

import { theme } from "./theme";
...
<NativeBaseProvider theme={theme}>
...
</NativeBaseProvider>

Now we can see the new font in our app. Let's rerun it by yarn start and see the result -

This is how we can add the google font easily with expo react native and nativebase!

Source Code

You can find it from here - https://github.com/nerdjfpb/custom-font-with-ts

Want to take the project to the next level?

Explore how I structure react code for working with a team (this will saves a ton of time) -
https://blog.nerdjfpb.com/how-to-add-eslint-prettier-and-husky-git-hook-in-react-js-2022

Questions?

Drop a dm on - twitter

Want to be part of an amazing programming community and participate in free programming events?

Join our Discord server

Want to hire me for your next project?

Connect me with linkedin

Random Password Generator – Learn Modern React JS By Projects For FREE In 2022

Muhammad Ali (Nerdjfpb) — Fri, 25 Feb 2022 21:20:01 +0000

Learning React js changed my life completely. I got many freelancing opportunities and my current remote job because I was skilled in React. I want to help others, so I'm creating this tutorial series to make some react projects for beginners to intermediate levels. It'll be focused on the Modern React js and how you'll write it in 2022. I'll come back and keep updating this tutorial if anything else changes. Also, I'll try to publish a new project/blog every upcoming week(from now), so follow nerdjfpb for that. Let's dive into our very first blog -

What we are going to build

This blog is the first tutorial of all series so we will build a random password generator here. Let's see how we can do it with react. We'll add some twists here and there!

Project Features

Generate a random password
Password will be copied to the clipboard
Show a popup message when it copied to the clipboard
Hosted in GitHub pages

Pre Requisite

This blog is specific to reactjs, so you have to know a few things before following this -

Html, Css
Javascript (Intermediate level)
Basic Nodejs (how nodejs, npm works, scripts)

Things I’m using

Vscode: for writing code
Nodejs: for different commands & npm
Packages
- create react app: for creating packages
- react toastify: for showing the popup messages

Starting a New React JS Project

Let's start with exploring React js a little bit. We usually go through a boilerplate called create-react-app to create a new react project. This one use webpack underhood. But nowadays VITE is getting so popular and damn fast, so if you want to start your project with VITE, that can be a great choice too! But for this tutorial, we are going to go with the create-react-app. Let's create a react project for our project -

npx create-react-app react-password-gen // replace react-password-gen with your project name

These commands will create a folder and don't get overwhelmed with lots of folders. Let's go through it one by one! But before that, I guess you have got a question in your mind, right? Why do we write npx instead of npm? Normally we install anything using npm install packageName, right? So why npx? npx is a tool for executing the npm packages. Confusing right? Read more from here

Let's drive into our current situation. We have got a lot of folders. The time I'm making this create-react-app comes with

node_modules
public
src.gitignore
package - lock.json
package.json
README.md

Ignore the node_modules because I guess you already know what's in there. Let's go to the public folder, and there are a few files -

favicon.ico
index.html
logo192.png
logo512.png
manifest.json
robot.txt

If you don't know any of these files, just try a simple google search. It's simple basic, and I'm not going to explain this! But let's have a look into the index.html file -

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

As you can see, this HTML file is just a basic setup, and we have got an id root here. We are loading the react app from the src folder inside this div. Let's have a look inside the src folder now -

App.css
App.js
App.test.js
index.css
index.js
logo.svg
reportWebVitals.js
setupTests.js

we'll make this minimal, and we'll have -

App.css
App.jsx // js to jsx
index.css
index.js

Now, let's start by exploring the index.js file first. We are going to clean it up for now -

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
// import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
// reportWebVitals();

Here we are loading react & react-dom later. We are just passing the app component in place of the root. If you know javascript, then you already know what is happening here. We are going to write es6+ features which usually don't support in browser. So we use webpack/some other bundling tool to convert and make some modifications to serve well in the production. We need to support all major browsers; otherwise our creation will not reach everyone.

CSS files are pretty straightforward, so I'm not going to go over those. Let's jump to app.jsx file and delete all things from here and write some new stuff quick -

import "./App.css";

const App = () => {
  return <div>Hello World</div>;
};

export default App;

We are using a div HTML, so we are writing HTML inside a js function? Kind of yes. But it's not HTML; it calls JSX. Almost similar to HTML; it just has some changes. Look more at here

Building the Project UI

Let's start building our password generator app! We'll use this app.js less complexity this time. Let's begin the design, and I hope you already know HTML and CSS, and this part is just like HTML & CSS -

import "./App.css";

const App = () => {
  return (
    <div className="background">
      <h1 className="heading">Generate a random password</h1>
      <div className="wrapper">
        <div className="password">**********************</div>
        <button className="generate-password">Generate password</button>
      </div>
    </div>
  );
};

export default App;

CSS part -

.background {
  background-image: linear-gradient(
    43deg,
    #4158d0 0%,
    #c850c0 46%,
    #ffcc70 100%
  );

  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.heading {
  color: white;
  font-size: 70px;
  padding-bottom: 30px;
  text-transform: uppercase;
}

.wrapper {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 100px 200px;
}

.password {
  font-size: 60px;
  color: white;
  padding-bottom: 20px;
}

.generate-password {
  background: white;
  color: black;
  border: none;
  outline: none;
  padding: 20px 40px;
  font-size: 18px;
}

Now our style is complete, and it looks exactly the same as the screenshot -

Using the State from React JS

If you look into the app.jsx file, it seems like we are writing HTML inside a javascript function, right? Yeah! That's right! But we are not writing HTML in the javascript file. We are writing jsx. We have some power over the HTML. But before that, let's go over a concept of how we will make this app. Steps are

First get a const variable for holding the password "**************"
Then when button click it'll fire up the a function that'll change the password value
Re-render the part with new value (something like innerHTML maybe?)

But as, react worked based on its concept and has a virtual dom. So we will not follow how we update a dom value in vanilla javascript. React state is like a javascript variable that holds a value that can change. We will follow the hook instead of the old way of classes because the code looks cleaner and is easy to work on in the future. We need to call a useState function to get the state value for the password. So let's call it -

import { useState } from "react";
import "./App.css";

const App = () => {
  const [password, setPassword] = useState("**********************");

  // rest of the codes
};

Confusing right? We are using useState function from react and passing so many stars. useState is actually going put the "**************" in password variable and setPassword is a function that'll help us to update the password field. Checkout more on react website - it's a beta now(also incomplete), old docs can make you confused so better to follow it and also learn more about state component

Now let's write the jsx for updating it

<div className="password">{password}</div>
<button className="generate-password" onClick={generatePassword}>
  Generate password
</button>

So instead of a static value, now we got a state in password div. Now we can change it by clicking and firing the function generatePassword -

const generatePassword = () => {
  // Create a random password
  const randomPassword =
    Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2);

  // Set the generated password as state
  setPassword(randomPassword);

  // Copy the password to the clipboard
  navigator.clipboard.writeText(randomPassword);
};

Relatively straightforward, right? As we are just working with string, pretty easy to set the new state. You have to call the function setPassword and pass the new value. That's it.

Now, this is running as we want. Click on the Generate password button, and this works like magic!

Add a popup message for user (react-toastify)

But we are missing one piece of the puzzle so far! We need to create a message for users to understand the password copied to their clipboards. Let's use a package for this. You can use this for any production project. We are going to use react-toastify to add this. Steps for adding

install react-toastify using npm i react-toastify
import the react-toastify package
import usual style of react-toastify
Fire function from react-toastify when needed
Add the react-toastify container in div somewhere

Let's start with the first step -

import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

Importing done, let's add the function call and container inside the component. Finally, it looks like -

import { useState } from "react";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

import "./App.css";

const App = () => {
  const [password, setPassword] = useState("**********************");

  const generatePassword = () => {
    const randomPassword =
      Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2);

    setPassword(randomPassword);

    // copy the password to the clipboard & fire toast message
    if (navigator.clipboard.writeText(randomPassword)) {
      toast("Password copied to your clipboard");
    }
  };

  return (
    <div className="background">
      <h1 className="heading">Generate a random password</h1>
      <div className="wrapper">
        <div className="password">{password}</div>
        <button className="generate-password" onClick={generatePassword}>
          Generate password
        </button>
      </div>

      {/* adding toast container so that we can showcase the message */}
      <ToastContainer />
    </div>
  );
};

export default App;

Congratulations! You've completed the first level of learning react. The project is done; time to check it!

Final Result

To run the project

npm start

It'll show up in http://localhost:3000

All commands I've used

npx create-react-app react-password-gen // creating the new project
npm i react-toastify // installing toastify package
npm start // to run server

Source Code & Live link

You can find it from here - https://github.com/nerdjfpb/react-password-gen
See the live link here - https://nerdjfpb.github.io/react-password-gen/

What to do next? (Improvement)

Make it using react components (going to teach that in next blog, follow for more content)
Enable a switch for dark mode
Add some animations

Want to take the project to the next level?

Explore how I structure react code for working with a team (this will saves a ton of time) -
https://blog.nerdjfpb.com/how-to-add-eslint-prettier-and-husky-git-hook-in-react-js-2022

You can also create a live link for your react project (free)

// Detect dark theme var iframe = document.getElementById('tweet-1496480073167556613-757'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1496480073167556613&theme=dark" }

Questions?

Drop a dm on - twitter

Want to be part of an amazing programming community and participate in free programming events?

Join our Discord server

Want to hire me for your next project?

Connect me with linkedin

How to add ESlint, Prettier, and Husky (Git Hook) in React JS 2022

Muhammad Ali (Nerdjfpb) — Fri, 18 Feb 2022 18:55:24 +0000

Introduction

Today we are going to make our life easier a little bit! As developers, we have to work in a team (in most cases). Different person has different styles, so it's hard to follow a specific coding pattern. Also, some people like four spaces as a tab, and some like 2. So code format also looks weird if there are no specific rules. Today we are going to fix the problem together. Let's enforce a coding style using eslint and format our code automatically using prettier!

Motivation

There is a reason why I'm writing this blog. I learned to program from tutorials (mostly udemy ones)! I never saw anyone is showing how to add eslint/prettier anywhere. But I learned about it while working with a side project (as freelance work). Around 2020 I was getting a good amount of leads from Fiverr to work. But it was hard for me to work on the projects because I started my current full-time. So, I took the help of my friend, and honestly, the code he wrote looks bad formatted and does not properly follow any coding styles. I always used eslint & prettier in my vscode, so I never faced this issue about formatting & following coding styles. But I wasn't really interested in setup his IDE because it's not something I can force on someone. Then I learned about eslint & prettier more. I made a setup, which helped me gain what I was trying too hard to get. It made my life so easier. After setting up both, I never saw terrible formatting in the app, and minor issues like not using any variables are gone! This is why I'm showing this to you. Maybe it'll save a lot of time for you! If this helps, share it with a person who needs this. Let's make the dev team strong with knowledge sharing! But before that, lets jump into the next section -

Things I’m using

Visual studio code
nodejs
create react app
npm packages
- eslint
- prettier
- eslint-plugin-prettier
- husky
- lint-staged

Basic React app

We'll start with a basic React app, and we'll use create-react-app -

npx create-react-app your-app-name

This will be a react app and we're not going to change anything because this tutorial is not related to reactjs. We're going to work directly on the next step! The more straightforward step of this tutorial is prettier. So let's dive into it!

Prettier

We use prettier to auto-format our code. This saves a lot of time for me. I've also installed a vscode extension, which helps me a lot. So let's install it.

npm i prettier -D

We're using a -D for only installing it as dev dependencies. We don't need to send this into our build. Once it is installed, let's try to format our code with prettier. But to do that, we need to create a prettier config file. Because prettier doesn't know how to format our codes, let's create that file. It'll be on our root folder, and the file name will be .prettierrc.

{
 "trailingComma": "es5",
 "tabWidth": 2,
 "semi": false,
 "singleQuote": true
}

You can configure a lot of things with it. Click here to find out more. But We're going with a simple configuration. I like tabWidth two spaces, and I don't like semicolons much. All will be handled using prettier now. Isn't this awesome???

Eslint

Eslint helps us to enforce a coding style. You can define your own coding style. Mostly I use airbnb style. So let's install it. But if you have time, read the rules from eslint website -

npm i eslint -D

Sadly it's not going to end here. You need to create a config file for eslint. There are two ways to do it; you can do it by

Eslint
Manual

I prefer to use Eslint and I'll show that way because it's easier. Let's start the process by typing -

./node_modules/.bin/eslint --init

Then it'll popup

? How would you like to use ESLint? ...
  To check syntax only
  To check syntax and find problems
> To check syntax, find problems, and enforce code style

I'll choose To check syntax, find problems, and enforce code style because I want to check syntax, find problems, and enforce code style! Then it'll show -

? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

I'll choose Javascript modules (import/export) because I want to use import/export, not the old require/exports. Select and then -

? Which framework does your project use? ...
> React
  Vue.js
  None of these

Choose the framework you are using, and this is a dumb question, right? We're using this inside reactjs. Let's select that -

? Does your project use TypeScript? » No / Yes

We're not using Typescript so let's click at no! Then it'll show -

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node

We'll use the browser to check the results, so select and -

? How would you like to define a style for your project? ...
> Use a popular style guide
  Answer questions about your style

I'll choose the Use a popular style guide one. Because that's easy to install and many developers already know about it. But if you want manual styles, just go with the Answer questions about your style option. Let's select it -

? Which style guide do you want to follow? ...
> Airbnb: https://github.com/airbnb/javascript
  Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo

There are a few style guides already. I choose airbnb most of the time. Go with the one you like!

What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON

I normally just choose JSON because it's the easiest to read. But you can choose whatever you like too!

Checking peerDependencies of eslint-config-airbnb@latest
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-react@^7.28.0 eslint-config-airbnb@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.3 eslint-plugin-jsx-a11y@^6.5.1 eslint-plugin-react-hooks@^4.3.0
? Would you like to install them now with npm? » No / Yes

Let's install the packages now! It'll take a little bit of time. Finally, we'll see the .eslintrc.json file! Have a first look at it.

Our eslint setup is done, but it will not work with prettier well. We need to do some more configuration to enable both to work together!

Configure eslint & prettier together

This section also starts with installing an npm package called eslint-plugin-prettier, which will help us configure eslint and prettier together. We'll install it with -

npm i eslint-plugin-prettier -D

We need to add this plugin inside .eslintrc.json file -

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react", "prettier"
    ],
    "rules": {
      "semi": 0,
      "comma-dangle": 0,
      "prettier/prettier": "error",
      "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
    }
}

I updated the last two-part - plugins and rules. This will help us to work prettier and eslint together. Don't worry; there is no more configuration needed for eslint and prettier.

Also, let's add two scripts to our package.json file. This will help us to lint files by npm run lint and format our code by npm run pretty -

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint --fix",
    "pretty": "prettier --write ."
  }

One quick note: In your project, maybe some files you don't want to lint or format. So you can add them to .eslintignore file -

node_modules
public
build

For the ignore format, you can use .prettierignore

# Ignore artifacts:
build
coverage

# Ignore all HTML files:
*.html

But there is still a problem remaining. This all will work if you use an IDE with extensions like - eslint & prettier. Without it'll not format automatically. We can force it by using script in package.json file. But let's find a better solution!

Husky

To force our coding style & format, we will use git hook. So that if anyone commits any code, it runs some linting and check if there is any issue with it. For this, we're going to use husky and lint-staged -

npm i husky lint-staged -D

This will just install the package. But for using lint-staged we need to edit our package.json file. Let's add some lines -

 "lint-staged": {
  "**/*.{js,jsx}": [
    "npm run lint",
    "prettier --write"
  ]
 }

With these four lines, we are just linting and formatting our code. But it's not called from anywhere now. So we need to call it from somewhere. But before that, we need to install husky properly to run it -

npx husky-init && npm install

This will create a folder called .husky and inside it a file called pre-commit which will run npm test before committing. But for the current project, we don't want to run the npm test, so we are going to change it into -

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

# npm test
npx lint-staged

Now we can try committing in git, and it'll show us if there is an error! Now we are finally ready to test our project!

Result and Testing

We'll not explore the git today with this tutorial. Because git is a big topic and that needs another blog. You can quickly do a crash course on the git. Then came back here to see what I was doing from this point. First, I'll change a little bit on the app.js file; going to add an extra line that we don't need (Just to showcase what we have done so far)

import React from 'react'
import logo from './logo.svg'
import './App.css'

function App() {
  const tempVar = 5

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit
          <code>src/App.js</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

I just added the const tempVar = 5 after the function, and let's try to commit this into the github repo. I'm using

git add .
git commit -m "Initial Commit"

Now I'm getting an error.

[STARTED] Preparing lint-staged...
[SUCCESS] Preparing lint-staged...
[STARTED] Running tasks for staged files...
[STARTED] package.json — 10 files
[STARTED] **/*.{js,jsx} — 2 files
[STARTED] npm run lint
[FAILED] npm run lint [FAILED]
[FAILED] npm run lint [FAILED]
[SUCCESS] Running tasks for staged files...
[STARTED] Applying modifications from tasks...
[SKIPPED] Skipped because of errors from tasks.
[STARTED] Reverting to original state because of errors...
[SUCCESS] Reverting to original state because of errors...
[STARTED] Cleaning up temporary files...
[SUCCESS] Cleaning up temporary files...

✖ npm run lint:
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-eslint-prettier@0.1.0 lint: `eslint --fix "C:/Users/demo/Desktop/nerdworks/Blogs Examples/react-eslint-prettier/src/App.js" "C:/Users/demo/Desktop/nerdworks/Blogs Examples/react-eslint-prettier/src/index.js"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-eslint-prettier@0.1.0 lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\demo\AppData\Roaming\npm-cache\_logs\2022-02-18T18_07_55_543Z-debug.log

> react-eslint-prettier@0.1.0 lint C:\Users\demo\Desktop\nerdworks\Blogs Examples\react-eslint-prettier
> eslint --fix "C:/Users/demo/Desktop/nerdworks/Blogs Examples/react-eslint-prettier/src/App.js" "C:/Users/demo/Desktop/nerdworks/Blogs Examples/react-eslint-prettier/src/index.js"


C:\Users\demo\Desktop\nerdworks\Blogs Examples\react-eslint-prettier\src\App.js
  6:9  error  'tempVar' is assigned a value but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)

husky - pre-commit hook exited with code 1 (error)

Maybe it'll look overwhelming at first. But if you read from last, you'll understand what we are doing here. Here the problem is showing on.

6:9  error  'tempVar' is assigned a value but never used  no-unused-vars

So that tempVar we created is creating an issue. Why? Because we are not using this variable. So just delete this and try to commit again. This time it'll just work fine -

STARTED] Preparing lint-staged...
[SUCCESS] Preparing lint-staged...
[STARTED] Running tasks for staged files...
[STARTED] package.json — 10 files
[STARTED] **/*.{js,jsx} — 2 files
[STARTED] npm run lint
[SUCCESS] npm run lint
[STARTED] prettier --write
[SUCCESS] prettier --write
[SUCCESS] **/*.{js,jsx} — 2 files
[SUCCESS] package.json — 10 files
[SUCCESS] Running tasks for staged files...
[STARTED] Applying modifications from tasks...
[SUCCESS] Applying modifications from tasks...
[STARTED] Cleaning up temporary files...
[SUCCESS] Cleaning up temporary files...
[master 205b14e] Initial Commit
13 files changed, 449 insertions(+), 119 deletions(-)
 create mode 100644 .eslintignore
 create mode 100644 .eslintrc.json
 create mode 100644 .husky/pre-commit
 create mode 100644 .prettierignore
 create mode 100644 .prettierrc
 rewrite README.md (99%)
 delete mode 100644 src/App.test.js
 rewrite src/index.js (78%)
 delete mode 100644 src/reportWebVitals.js
 delete mode 100644 src/setupTests.js

This way, all the files will be used eslint & prettier before going to our GitHub repository!

Outro

I hope that this one helps you to work with your team in a better manner. That was the primary goal of this blog! Also, we can easily see the Eslint error and prettier automatically using vscode extensions. I also use some other extensions; you can check it here -

Github Repo

You can find it from here - https://github.com/nerdjfpb/react-eslint-prettier

Questions?

Drop a dm on - twitter

Want to be part of an amazing programming community and participate in free programming events?

Join our Discord server

Want to hire me for your next project?

Connect me with linkedin

How To Build Simple CRUD RESTful API With NodeJS, ExpressJS And MongoDB in 2022

Muhammad Ali (Nerdjfpb) — Fri, 04 Feb 2022 20:08:06 +0000

Introduction

Node js is a popular backend nowadays! It's fast and easy to write code. If you already know javascript, it can be easy to write node js. So we're going to explore express js today with MongoDB for the database. We'll create the rest API endpoints and implement CRUD operation for the to-do list. The example is quite basic, but we're going to make a good project structure so that you can follow it for your other projects too! Let's dive in -

Things I'm using

Vscode: I've used the vscode for the whole development!
Node js: I've used node js v14.8.0
MongoDB compass: I've used MongoDB v1.30.1 to see all changes in MongoDB graphically
Postman: We'll use this one to test all our api's
Packages:

babel: For transpile the javascript into an older version
cors: For the CORS setting
dotenv: For reading the environment variables
eslint: For enforcing a coding style
express js: The node framework
express-rate-limit: For limiting the API endpoint calls
husky: For git pre-commit to hook for implementing eslint & prettier before committing
joi: Used to validate the user inputs
mongoose: MongoDB ORM for working with MongoDB
morgan: For showing API endpoint details
nodemon: For running the server, when we change a file
prettier: For formatting the code

Project Setup

Basic Project Setup

We'll start with npm init -y on the folder to initialize the node and create the package.json file. You can edit the package.json file as you want! Now create an src folder to write all our code in the folder. We'll also make an index.js file as a starter.

Setup the Express JS with babel
If we usually set up the nodejs with npm init -y, then we can't use the latest features of javascript! To solve this problem, we are going to use babel. Babel is a compiler for javascript; it complies with the new versions of javascript to older javascript. If we active babel, we can use async-await, which will transfer into earlier javascript!

To set up the babel, we need to install -

npm i @babel/cli @babel/core @babel/node @babel/preset-env -D

and also, we need to add a file called .babelrc

{
 "presets": [
 "@babel/preset-env"
 ]
}

We need to adjust the package.json file to work correctly.

"start": "node dist/index.js",
"dev": "nodemon --exec babel-node src/index.js",
"build": "babel src -d dist",

This will complete the babel set up, and you can run it by using npm run dev if you want a production version, then use npm run build first and then try npm start that will start the application!

Improving coding styles & formatting

This part is only needed if you are interested in maintaining good structure and rules throughout the codebase. This will require the eslint and prettier. Eslint will enforce a coding style, so every developer follows specific rules. Prettier will follow the code format automatically! Eslint comes with vscode! So you don't need to install eslint on your vscode. But you need to install the prettier on your codebase because it is necessary for code styles. So how to install them? Let's do it together by installing -

npm install eslint eslint-config-prettier prettier -D

Let's set up the prettier first, which is pretty straightforward. We've to create a file called .prettierrc, and we need to put

{
 "trailingComma": "es5",
 "tabWidth": 2,
 "semi": false,
 "singleQuote": true
}

This is all needed for the prettier now; let's set up the Eslint. For Eslint, setup starts with

./node_modules/.bin/eslint --init

It will pop up some questions. Now select the one based on your interest. For this project, we choose

To check syntax, find problems, and enforce code style
CommonJS (require/exports)
None of these
No
Node
Use a popular style guide
JSON
Yes

Now it'll install some new packages and create .eslintrc.json file! Now we have to edit a little bit here -

"extends": ["airbnb-base","prettier"],

We'll add the prettier here, and we are pretty done. If your vscode has all the extensions already, if you write any wrong code, then you'll see the errors.

If someone doesn't want to use the vscode extensions, they can check the error by running npm run lint. But it'll fail because we didn't add any script like this. So go to the package.json file and add -

"lint": "eslint --fix"

Improving git experience with husky

Our codebase has some rules and formatting ways. But still, it's not going to happen if someone doesn't have those extensions or doesn't care about the errors. Also, many devs work from different IDE; you can't force them to use the same one. So we will play with the git hook a little bit to solve the problem. So whenever anyone tries to commit, we will check the eslint, and then we will format the file with prettier. So how to do it?

We can do it using husky & lint-staged, and we will work on that right now. Let's install husky and lint-staged

npm i husky lint-staged -D

We need to improve the package.json file. Add some extra lines on the last part.

 "lint-staged": {
    "**/*.{js,jsx}": [
        "npm run lint",
        "prettier --write"
    ]
 }

Now we need to enable the git hook.

npx husky install

let's add a git hook which is going to help us to do the lint-staged before committing the changes

npx husky add .husky/pre-commit "npm test"

Now you'll see a .husky folder on the root level with a file inside pre-commit, and let's modify it a little bit.

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
# npm test
npx lint-staged

Now it'll work like magic. Try to commit your changes and see it's doing something before committing, and this way, you can easily enforce something before committing!

Improving security

Now our server is quite ready. Let's jump into the index.js file to start our work. But before that, let's improve the security a little bit. We will use environment variables because we're not going to expose it directly out on our repo! For this, we will use the dotenv npm package. It's super easy.

import'dotenv/config'

The upper line will give us the power to access any value from the .env file (from root)! Check .env-example to get an idea of what I've inside the .env file. It's your credential/secret data, so never upload it to the public git repo! To access any variable, use -

process.env.VARIBALE_NAME

Now let's do some basic stuff.

import Express from 'express'

const app = Express()

const port = process.env.PORT || 3000
app.listen(port, () => console.log(`listening on port ${port}`))

Now let's add some middlewares here. The first one will be cors because it enables you to do the CORS settings! Also, add helmet middleware. It helps you secure your Express apps by setting various HTTP headers! The code will look like

import Cors from 'cors'
import Helmet from 'helmet'

app.use(Cors())
app.use(Helmet())

As we are building the API, there can be some DDoS attack or potential hacker attack, or maybe something is broken, and it keeps calling the API like thousand times in a min. We don't want that. So let's add a limit -

import RateLimit from 'express-rate-limit'

const limiter = RateLimit({
  windowMs: 15 * 60 * 1000,
  max: 100,
  standardHeaders: true,
  legacyHeaders: false,
})

app.use(limiter)

Are we done? Sadly no. We are going to make a slight improvement on the server! We'll check details on every API call in our console.log, so we're going to add a logging package called morgan

import Morgan from 'morgan'

app.use(Morgan('tiny'))

The upper two lines will help us see the API endpoints details on our console.

Finally, for the JSON inputs from user, add the last middleware.

app.use(Express.json())

It parses incoming requests with JSON payloads and is based on body-parser!

Connect to MongoDB

Connecting to MongoDB is pretty straightforward. First, we are going to install the mongoose package. Because it's better than just using MongoDB, it's an ORM and comes with lots of benefits already. So how to connect a DB with it?

import Mongoose from 'mongoose'

Mongoose.connect('mongodb://localhost/demotodo')
 .then(() => console.log('Connected to MongoDB...'))
.catch((err)=>console.log(`Could not connect to MongoDB...${err}`))

See, this is so easy, right? '

Now, let's start writing the API endpoints.

Let's create a post API endpoint first so that we can add some values inside the database demotodo

REST API endpoints

We're going to create five endpoints. Let's look at the URLs first -

/app/v1 -> Post -> add a data to database
/api/v1 -> Get -> get all the data from database
/app/v1/id -> Get -> get a single item data by id from database
/app/v1 -> Delete -> delete a data from database
/app/v1 -> Put -> update a data from database

We'll start with the POST method. But before that, let's make our code a little better. We'll create a folder called routes and model. In the model folder, we'll put the MongoDB database model. In the routes folder, we'll post different routes. You can also create a controller folder to write the controller, called from routes. But for simplicity, I'll go with one single file in routes & model. Let's create a todo.js file in the model & route both folders.

Now lets a go-to model first to create the model. We'll call the mongoose package and make the data structure here. We're going simple. We'll create a title(text) & completed (bool) for the schema, and when we add data from here, it'll always add a unique id by mongo. Let's do this -

import Mongoose from 'mongoose'

const todoSchema = new Mongoose.Schema({
  title: {
    type: String,
    required: true,
    trim: true,
    minlength: 5,
    maxlength: 255,
  },
  completed: {
    type: Boolean,
    default: false,
  },
})

export default TodoModel

Upper lines will create the model. But we also need to do validation when someone sends us data. We'll put the validation function here because it'll be closer and easier to maintain. Let's add the joi package to write the validation function -

import Joi from 'joi'

const TodoModel = Mongoose.model('Todo', todoSchema)

const JoiSchema = Joi.object({
  title: Joi.string().min(5).max(255).required(),
  completed: Joi.boolean(),
})

export const validateTodo = (todo) => JoiSchema.validate(todo)

We'll use this both export from our routes file. Let's do the POST method right now!

POST

As a starter of routes/todo.js we'll call the libraries and model with validations -

import express from 'express'
import Mongoose from 'mongoose'
import Todo, { validateTodo } from '../model/todo'

Now write the router -

const router = express.Router()

It's time to write the post route to add data from the postman! We'll follow some steps to write this part of the code -

is there an error with the validate function from the model/todo.js file? If error then send a response with an error
If there is no error, then create data using the mongoose model
Save it & send a reply to the user


// insert a new data in todo
router.post('/', async (req, res) => {
  // validate using Joi, with factoring function
  const { error } = validateTodo(req.body)

  // if have any error then return bad request with error else just add the new one
  if (error) {
    return res.status(400).json({
      success: false,
      data: [],
      message: error?.details[0]?.message,
    })
  }

  let todo = new Todo({
    title: req?.body?.title,
    completed: false,
  })

  todo = await todo.save()

  return res.json({
    success: true,
    data: todo,
    message: 'New todo adding successful!',
  })
})

Now, let's test it from the postman! Start the app with npm run dev and go to URL localhost:3000/api/v1/ -

GET

Let's find out the steps we need to get all the data from mongodb

Find out all the data using find()
Send as response

// Get request for getting all todo data
router.get('/', async (_req, res) => {
  // sending all data to response
  const todos = await Todo.find()

  return res.json({
    success: true,
    data: todos,
    message: 'Request successful!',
  })
})

It's pretty easy! Right? Start the app with npm run dev and go to URL localhost:3000/api/v1/ -

GET A SINGLE

Let's find out the steps we need to get a single data from mongodb

Check if the given id is a mongodb valid id. If not, send a error response to user
Otherwise, try to get the data using findById(givenID)
Send response based on the data we got

// Get the data about a single todo
router.get('/:id', async (req, res) => {
  if (!Mongoose.Types.ObjectId.isValid(req.params.id))
    return res.status(404).json({
      success: false,
      data: [],
      message: 'It is not a valid mongodb id',
    })

  // search using id In mongodb with mongoose
  const todo = await Todo.findById(req.params.id)

  // checking if todo not found then 404 request
  if (!todo)
    return res.status(404).json(
      res.json({
        success: false,
        data: [],
        message: 'There is no data found related to this id!',
      })
    )

  // if found then send the response
  return res.json({
    success: true,
    data: todo,
    message: 'Finding successful!',
  })
})

It's pretty easy! Right? Start the app with npm run dev and go to URL localhost:3000/api/v1/id -

PUT

Let's find out the steps we need to update the data in MongoDB

First, validate the data user is sending to API; if there is inaccurate data, just send an error response to the user!
Otherwise, try to update data by finding id first. Use findByIdAnUpdate() method to do it with giving the new data
If there is data, then it'll be blank, and the response will error; otherwise, send the success response!

// update an existing todo
router.put('/:id', async (req, res) => {
  // Validating the user input
  const { error } = validateTodo(req.body)

  if (error) {
    return res.status(400).json({
      success: false,
      data: [],
      message: error?.details[0]?.message,
    })
  }

  // find Id and updated it by mongoose
  const todo = await Todo.findByIdAndUpdate(
    req.params.id,
    { title: req?.body?.title, completed: req?.body?.completed },
    {
      new: true,
    }
  )

  // if todo is not available then error or else new updated data send to user
  if (!todo)
    return res.status(404).json({
      success: false,
      data: [],
      message: 'There is no data found related to this id!',
    })

  return res.json({
    success: true,
    data: todo,
    message: 'Update successful!',
  })
})

It's pretty easy! Right? Start the app with npm run dev and go to URL localhost:3000/api/v1/id -

DELETE

Let's find out the steps we need to delete data from MongoDB

We'll try to delete once we get the id by findByIdAndRemove()
Send response based on the result

// delete a todo
router.delete('/:id', async (req, res) => {
  // find an delete the data using moongoose & mongodb
  const deletedTodo = await Todo.findByIdAndRemove(req?.params?.id)

  // checking if todo not found then 404 request & if found then send the response
  if (!deletedTodo)
    return res.status(404).json({
      success: false,
      data: [],
      message: 'There is no data found related to this id!',
    })

  // finally response send with deleted data
  return res.json({
    success: true,
    data: deletedTodo,
    message: 'Delete successful!',
  })
})

It's pretty easy! Right? Start the app with npm run dev and go to URL localhost:3000/api/v1/id -

Let's try to delete the same id again! Let's see what happens -

Final words

I've tried to explain everything as I think. But there is a lot of improvement we can make. I didn't add a try-catch block because this blog will be long after that. But you should add that. If you want to see the code. Please check out - https://github.com/nerdjfpb/expressjs-rest-api-with-mongodb

...

I’ve started a programming community on discord. Click to join Discord Channel

Originally it published on nerdjfpbblog.

You can connect with me in twitter or linkedin or instagram

How to Get a Remote Job in 2022?

Muhammad Ali (Nerdjfpb) — Thu, 27 Jan 2022 15:13:10 +0000

Finding a job is hard. Suppose you are looking for a remote position. In office-based employment, you can quickly build up a team and talk with the team. But in remote jobs, things are a bit different. Hard to build a good bonding from online chat (most cases; not for everyone). But let’s take a step back from thinking about how to do the job and focus on getting a job. If you are reading this blog, I assume you already have some skills and are ready to find a job. I’m going to share how you can find a remote job!

If you don’t have a LinkedIn profile, please create it right away. It works as an online resume and is super helpful to grab a job. Get a professional picture as a profile pic and put a decent cover. Also, write everything honestly, don’t add something you don’t know because the job can come for that skill. Here is an example of a good LinkedIn profile – https://www.linkedin.com/in/brianalkass/

As you can see from one single look, you can find out what he can do, right? Recruiters will just look for a few seconds on your profile to make it as good as you can so that they get hooked with it.

To make a good profile, please add

Experiences
Educations
License and certification (if any)
Skills
Recommendations (from others) Also, try to post what you are learning/developing from time to time. Posting once a day or one post in two days can work well. Just try to network as much as you can.

Once you have a good LinkedIn profile, let’s start searching the jobs. There is a job tab on the navbar. You can just click there and look for the jobs it’s recommended. It’ll mostly recommend local jobs.

Here you also can search for your job and put the location “Remote”

If you are looking for a specific role, you can also search for your position here. So this is the easiest way to apply for a job using LinkedIn. But I’m going to help you to learn something more.

Go to the homepage, search “Remote reactjs” and select posts; the date posted will be 24 hours. Finally, try sort by latest this will give you the post people did in the last 24 hours about the remote reactjs keyword. So here you can find someone who is hiring remote people. This way, you connect with a human instead of mass applying on a job post (which companies can easily ignore). Here is the example –

I hope this will help you to get some remote jobs from LinkedIn. But if it doesn’t work in your case. Let’s go to step 2.

Discord/Slack Communities

Every programming language or framework nowadays has a community. I assume some people are not technical; maybe who is reading this blog. Then you can join some communities where you can get some insight about your position & job board maybe. I’m going to give an example related to react js again. React js has an amazing discord community!

You can easily find a job board here, which posts many jobs related to react js!

Also, if you join in other communities as I joined in –

Then you can also join some slack like this –

Joining communities can help you get a job quickly. So worth trying! If you don’t like this idea, I have got more options for you! Read more to find out!

Remote jobs sites

You can follow many remote jobs sites every day to find new jobs. Here are the popular ones I usually suggest using –

We work remotely – https://weworkremotely.com/
Remote io – https://www.remote.io/
Remote ok – https://remoteok.com/
Angellist – https://angel.co/
4 day week – https://4dayweek.io/
Hacker news jobs – https://news.ycombinator.com/jobs There are tons of websites/newsletters you can follow to get job information. But I feel good with the list I gave. Angellist is mainly about the startup, so go for it first if you like to work on a startup. 4/day week focuses on the jobs where you work four days a week. Hacker news jobs are mostly startup jobs. So I hope this will help you to get jobs from here.

Twitter

If you are still here, then it means that you want to do more. The good thing is I’ve more for you! This step is looking the jobs on Twitter. I usually follow the people who are related to my tech stack. In this way, I can see if someone is hiring people about my stack. Also, some people hire using a tweet. So you can get hired by a tweet. I got my current job from a tweet. So I can say it’s possible. Also, here you connect with a human, which is always better.

Reddit also has many job boards; you can check those out for getting some remote jobs info.

I hope this whole blog will help you get the position you want. I am hoping for the best!

...

If you have a question. Please reach out to me in – instagram, twitter, linkedin

I’m building a developer community. If you want to join then –

https://discord.gg/WBvHdMCYC7

This Is The Most Productive Working From Home Routine I’ve ever made

Muhammad Ali (Nerdjfpb) — Fri, 21 Jan 2022 13:13:16 +0000

My work routine is a mess. Usually, people suggest working in the morning to do a lot of stuff. Many famous people start their day around 3/4/5 AM, and here me! A non-famous nerd starting his day around 2-3 pm, which can be super unhealthy (don’t try this at home).

I had no other choice; I am not too fond of local jobs, and most of the remote jobs are from the US side. So I had to work on US time. Currently, I start working at 8 pm (local time) EST at 9 am and end my work around 4 am (where famous people woke up). So currently, I’m a night owl.

Nighttime can be productive, like morning, but it is also a time where we like to procrastinate! The same thing happens to me; some days, I keep watching youtube during work hours for nothing. I’m kind of just wasting time doing nothing. Maybe making up a routine for my work time would help me. So I started to follow a new pattern that will help me work properly with focus.

If you don’t have a routine yet, stop reading the blog more. Make a routine at least, then come back and read the rest. Finally, improve your routine. Routine is not something you just make once; first, you need to make a demo one, then you’ll try that in your life. If it goes well, then you need to fix that and improve the parts that need to improve! Because a good routine will lead you to a good habit, which will guide you into a success!

Let’s see what I planned for my routine! I usually work around 10 hours per day (8 hours office, 2hours for side projects, part-time, or some other stuff). I work about six days per week (5 days for the office and one day for my side work), and I take one day as a complete break. Also, after a few weeks, I take two whole days off! Also, if I get any off days through the week for different reasons, I just enjoy the day! Working is good, but too much work leads to burnout, and fixing the burnout is a more difficult puzzle that I don’t want to solve!

My routine is well-detailed and well-organized. So my local time 8 pm-4 am I work, I start my working day from 6 pm (sunset around 5.15 pm now). First two hours, I usually break into my two 45mins focus times and 15 mins break after the session! The first hour I spend learning something, I am a tutorial learning person, so I start with a course (any course). But if I follow the same routine for the next six days, it is pretty dull. So I try to grab two courses at a time, and I swap them. Like –

You can also see that I’m swapping my time with part-time and content creation from the table. In this way, I don’t get bored every day. For 45mins, I do a focus session because, after that, I’m getting a 15mins break (where I try to get out of the seat and take some food/water, but most of the time, I just browse social media).

I hope you got an idea of how I am writing this blog! I wrote it somewhere in my content creation slot! Now I’ll reveal how I make a routine for my office work! Let’s talk in detail about it!

Typically we have a daily standup after half-hour of office time start. So every day, I try to start my office around the exact time, so I got some time to check, write and think about the day. First, I go to Jira and check if any ticket needs any status change or any new ticket assigned to me. Also, I try to recap what I did yesterday because, in our daily standup, we talk about what we did yesterday and what we are planning to do today! So in this way. The first half-hour, I plan what I need to do, what questions I’ve to ask my seniors & what I did yesterday!

Usually, daily standup takes around 15-30mins, sometimes more than that. But let’s talk about a normal situation. So my first office hour ends with the meeting most of the time. I try to take a break of 5-10mins here. Before starting the next hour.

From this hour I keep focusing more & more about work. I try to do three 45 mins sessions of work with 15mins break before I take a 1-hour break for dinner!

I try to schedule my meeting calls after dinner, so it’s relaxing work! Also, I try to spend some time learning things related to work this time. This helps me grow; suppose you are doing a react task, maybe you can look online at how people are doing the same thing and become more efficient in your work. Nobody will tell you to do this; only you can make your routine in a way so grow with the company too!

Then I usually do another deep focus work session of 45mins with a 15mins break after it.

I’m generally tired after all the focus sessions in the final hour of the work! So I do some different tasks like checking the Jira, updating tickets, writing new tickets sometimes. Improving our documentation or codebase sometimes, sometimes I just do pair programming with any developer to solve something quickly! We are a small team, so there are not many changes in the codebase every day, but I try to read all merge requests every day. Just look through it, so the codebase seems familiar to me if I work on the same part of it.

This is what kind of my day looks like. Most of the time, it doesn’t go with the plan but try to stick to the first part of the day. I am doing three focus sessions to solve all my tickets on hand. I usually don’t touch my phone in the focus session, not opening any social media, not chatting! I don’t do that to focus entirely on the work. This way, I can do more in less time, which helps me relax later!

In the last part, I mention that your routine is entirely yours. How you become productive depends on you! It’s not a generic solution; find your own and make it better. I’ve put my whole routine in the blog. I hope this will help you to organize your day better!

Feel free to message me anytime with any questions!

Logitech k380 Review: A multi-device Bluetooth Keyboard (Great choice for travel)

Muhammad Ali (Nerdjfpb) — Fri, 14 Jan 2022 15:53:15 +0000

A good keyboard can set your mood any day! I was looking for a new keyboard to carry here and there, and I found this beauty! This Logitech keyboard looks super cool when I first look at it. However, it was pretty expensive because I had never brought a keyboard for more than 10$ before. It cost me around 30$.

Build

I’ll suggest going through Logitech official website page for the details about it – https://www.logitech.com/en-my/products/keyboards/k380-multi-device.920-009579.html

Impact on my life

Three device connectivity: This is one of the main reasons I wanted to buy it. It’s super easy to connect with multiple devices at the same time. I can use it with my desktop; also with my laptop. Easy to switch. Take really low time to reconnect.
Windows & Mac support: Another fantastic feature of this keyboard. You can use just it with mac or windows, and it has specific keys for both! If you have a desktop & a MacBook, this can be an excellent choice!
Compact size: It’s a small, compact size keyboard. I like a big keyboard, but it’s fun to type and has enough space.
Easy to travel with: If you are traveling and thinking about getting a keyboard with you, this is one of the best. I’ve taken this one to multiple places, and the experience was great!
Buttons are comfortable: It has round keys. If you are coming from square keys, it can be a slight issue at the start. But somehow, it’s super comfortable. My typing speed is impressive with it. I got around 90+ words per min with this one!

What I’m missing in it

Numberpad: I’m more into big keyboards, so I miss the number pad here. But as a travel one, this is nothing serious!
Battery: It uses an AAA battery, so I can’t see how much charge it has like other devices. This is sad because I don’t know when it will die. So I’ve to keep the battery on storage, but when I travel, maybe there can be some point I’ll not find the battery because I don’t carry the battery with me.

Getting a proper keyboard is needed. Otherwise, this can affect you in multiple ways. So spend a little bit of time choosing the proper one. Proper one can help you do different stuff efficiently, and if you want to try this model, go ahead and feel free to try it. It’s a fantastic keyboard for sure!

How to ask online as a beginner programmer?

Muhammad Ali (Nerdjfpb) — Fri, 07 Jan 2022 09:55:38 +0000

Learning something new is always harder, where to start! But most probably, if you are reading this, you’ve already started doing something extraordinary. Today, I will cover how to ask on the internet when you are just beginning as a programmer. Many newbies don’t know properly how to ask, and they get no reply from people. I help people using my Instagram, so I know how many weird things newbies usually ask. Still, it’s my personal opinion, so feel free to add more stuff down!

Googling

Googling is a must-needed skill for a newbie. You don’t know how to search and get ideas most of the time. I am not a super expert in this field, but I can do enough. But let me tell you the secret. First, try to search for the problem you have. Most of the time, you’ll find nothing (because you are just putting the whole error message in google, which google doesn’t understand correctly). So try to break it down. Get some part of error the put the language name after it. This way, you’ll get somewhere, not keep checking. Before asking anyone, you should do this. Without googling and spending at least 10mins on google, never ask anyone anything. It doesn’t matter what it is; keep searching for 10mins, and please check the second page of google too!

// Detect dark theme var iframe = document.getElementById('tweet-1477632101335781378-164'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1477632101335781378&theme=dark" }

YouTube

There are so many content creators nowadays, so if you search your issue on YouTube, there is a massive chance that you’ll find it. If you don’t understand English well, just search for it in your language. So many local people are making content nowadays. Nobody can’t teach you everything, so don’t just hook into one single person; use multiple creators to get ideas in your head. Watch numerous explanations on each topic. Suppose you do not understand recursion properly – search recursion in your language, then recursion if it’s a concept. Try to find an animation for it.

// Detect dark theme var iframe = document.getElementById('tweet-1478443504745410566-839'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1478443504745410566&theme=dark" }

Asking questions

Finally, if you don’t find what you are looking for on google/youtube. Time to ask people, so where can we find people to ask? Tough one, right? The good thing is that there are so many helping people in the world that you’ll find help without making tough choices. For programming questions, you should go to StackOverflow (which doesn’t guarantee that people will answer) so go to some instant messaging apps like

discord
slack
whatsApp
telegram You’ll find so many groups of programming and ask there! Okay, but general groups don’t give you a guarantee that you’ll find some solutions. So usually go to a specific group for asking a particular question. Suppose you are looking for a “react” answer. First, join a few react communities; how to find it? One of the quick ways is going to respond and check the community. You’ll mostly find something in there! Reactiflux is an excellent choice.

Same thing you can do for vue and find some excellent links for vue! Most of the products nowadays have a community! If you find nothing, maybe check their repo in GitHub (which can help to ask something in there; or try to ask them on Twitter by tagging them in your post)

So now the main question is how to ask? Normally if it’s a general question, you can find it on google, so you don’t have to go for someone to ask. So you have a specific case to ask, right? If it’s a code-related issue, you need to share your code with the particular question. How to do it?

If it’s a small question, go to carbon and paste your code and share the screenshot. If it’s a more significant part of code, maybe this idea doesn’t work well, then make a public Github repo and share the repo (but it’ll be better if you can specifically tell people where to start looking). If possible, make a diagram to show how things are moving in your app. If it’s a CSS issue, then it’s tough for people to help with that without running, so maybe try to host it somewhere so that people can click and go to the link. With the link, anyone can inspect that help with CSS issues from their browser.

Be smart with what you are asking; if you can’t ask correctly, people will ignore you because they don’t have time to work with your ugly screenshot! They have their own life! So be specific on the point with the helpful stuff; maybe you’ll solve your property before asking anyone in this process. When coding for a reasonable amount of time, we forget the logic we build, or sometimes we focus less on the whole picture! So once we try to explain it to someone else, our brain finds the solution in explaining time. It has happened to me many times; I’m not sure if the brain works in this way. Either way, it’s worth trying!

How to keep up to date with the tech industry?

This is one of the great questions of any newbie. So try to follow people on Twitter. Instagram has many people who share programming content; you can follow there too! Facebook has some, but I use Instagram & Twitter for programming content. Reddit can be a good choice too!

// Detect dark theme var iframe = document.getElementById('tweet-1479072052166356993-888'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1479072052166356993&theme=dark" }

I hope this blog will help at least a little in your journey! Remember, it’s a marathon; you can’t win in one hour, one day, or one month. You need to keep learning and building skills!

This post is originally published on NERDJFPB BLOG

I’ve community where we help each other to learn programming; if you are interest. Feel free to join – https://discord.com/invite/CaUPRUnckR

One level deeper with web development in 2021 (Year review)

Muhammad Ali (Nerdjfpb) — Mon, 20 Dec 2021 13:45:24 +0000

2021 is a particular year for my career because I’m reaching a new height this year. I’m writing this review so anyone can understand how much a mid-level developer can do in a year! Let’s hop inside –

Things I learned

Golang & Micro-Sevices & Google Cloud & Netsuite

This year I’ll say I learned about golang for working in microservices for my current company. For my good work for the company, they switched me into the “golang” team, where I’ve helped automate some business stuff + handle NetSuite (which experience was terrible). Google cloud is something else that I learned this year! Working with micro-services, golang and for business actually gave me more wings this year to explore!

More Next JS

We are using an old version of nextjs. We are not up to date because it’s hard to move from the old one. Lots of things broke; we don’t have time to upgrade because it was a busy year for us (just business is getting better after the corona). I pushed much nextjs code into production this year!

Typescript

I got a chance to work part-time, where I started using typescript and loving it. It’s making my project super easy to work with, but honestly, I’m not great with typescript yet. I use type most of the place because I try to do functions more with nextjs, instead of using any class. I try to going with functional programming more!

Material UI ~ MUI 5

We just got an update of MUI 5 a few months ago; loving the new look and sx props here for styling. The current module is best; I don’t even need to get some old-style type that saves much time!

Writing content

This year opened a few new doors for me. I got a chance to write for logRocket, Aviyel, which is pretty amazing right? I didn’t ask them to give me work, but they reached out to me from my blogs. So keep blogging! Success is just a few blogs away! I have been writing content for the last two years but didn’t get any offers before this year. So don’t think suddenly it came!

Working with multiple teams at a time

I worked with so many people this year and learned much stuff. For communication, I mostly use slack & discord. This year’s notion helped me track down everything I’m doing with different teams & companies.

How I stay productive

Using a routine

Using a routine is a must and must when trying to be productive. Usually, I start my working day two hours earlier than my full-time job, and this time I try to spend on part-time/learning. Also, I’ve two days off in a week. I use one day for my part-time content creation, and another day I take complete rest, and within a few weeks, I usually take two days off from my work. Taking breaks from regular life helps a lot to focus more!

Plan the week if possible

Every Monday, I spend some time working on this week’s schedule. I try to schedule on my notion and follow that throughout the week. But honestly, it’s hard to maintain. Most of the time, things don’t work with a plan, but making a plan gives an idea of how the mess will be this week.

Using notion

At first, when I saw people are using the notion, I was so irritated because I didn’t want to learn a new system to take notes. But after learning it a bit and finding out how powerful the notion is. Now I use it everyday; I even do my monthly budget here!

Things I’ve planned to do this year but failed

Failed ~ Freelancing helping hand

I was getting some freelance projects from different clients, and sadly I didn’t have enough time to work on this. So I asked my one friend to help with it. But sadly the things didn’t turn well. He was not replying to my messages well; he didn’t have enough sincerity to work. I had to do a lot of extra hours to fix his mess. Freelance projects are hard to maintain because they usually have a specific deadline and need to handle the client (feedback is the issue here). So this plan didn’t work!

Failed ~ Blog Idea

After watching my personal blog growth, I felt like let’s try a tutorial blog with a few people, and I got some people to work with the same idea. But it looks like without getting paid; nobody is attentive to building something. So I had to ditch this idea after writing a few blogs with everyone! So this one failed too.

Things I’ve accomplished so far

Pushed microservices stuff into production
Lots of reactjs stuff into prod (with bugs)
Getting a fantastic part-time project (hourly basis)
Writing paid contents
Learned from my mistakes

Plans for the next year

Dev advocate from a full stack developer (if you want to learn more about this, follow my journey anywhere – Instagram, Twitter, or discord server)

How can anyone do the same as me? Advice for juniors!

Things take time so take it easy.
Make a good routine to work with
Share your ideas with the world.
Create content and make it free so that people can find you

I hope 2022 will be a fantastic year for all of you!

Building a simple alarm clock with Dasha, Express, Ejs and tailwind which force user to wake up

Muhammad Ali (Nerdjfpb) — Sun, 12 Dec 2021 19:55:40 +0000

Most probably, the title doesn't give a good idea about what we will build together today! We are trying to build an alarm clock that will call users and solve a riddle. It'd not cut the call unless they got it correct. But there is a chance of saying no if they don't want to wake up at that point. This blog will be vast if I complete the full features. So I'll try to make a minimal version where we'll use Dasha(https://dasha.ai/) to make this. We are going to use

Npm (for installing packages)
Express js (For the API development)
Ejs (templating language for HTML)
TailwindCSS (for styling)
Dasha (for making alarm clock interesting with the help of conversational AI)
Vscode (code editor)
Github (for getting dasha blank app)

Let's start building, but before that, let's learn what it'll look like. Here is the final screenshot -

By putting the phone number, we'll get a call to give the correct answer to end the call! We will build a short version of it because otherwise, the blog will be vast and hard to follow.

Let's explore the Dasha first about learning how we can start. For using Dasha, you need to get an account there first. It's straightforward to register an account in Dasha; go to this URL (https://auth.dasha.ai/account/register) and register your account for your key. It's still in beta mode, so that UI can change from time to time.

Now, let's install the Dasha to log in and use its features. We are following this URL (https://docs.dasha.ai/en-us/default)

npm i -g "@dasha.ai/cli@latest"
dasha account login

After the login, it'll be better to install Dasha studio in our vscode

We will use a blank app from Dasha to build our part! Let clone it from Github.

git clone https://github.com/dasha-samples/blank-slate-app

Now let's install the packages to run it.

npm install

Once we install, we've two paths to run this, either we can use chat or phone. I prefer the phone way so we'll run.

npm start PHONE_NUMBER_HERE

Running this will get me a call on my phone to talk with the Dasha AI bot. But the most exciting part is that there is nothing much to talk about, as this is a small functionality. So let's look at what we've inside

The basic app comes with lots of stuff, but first, ignore the index.js file because that one is set up to run the Dasha part. So let's go to the app folder and look into the main.dsl where things started!

It quite looks like another programming, but there is some weird thing going on, right? Confusing right? It's a Dasha Scripting Language! So it's a little different from others.
If we look into the first part

import "commonReactions/all.dsl";

It's importing something, we can check the common reactions folder, and it'll give us some idea about what is happening here. We are loading some prewritten libraries here. So we can ignore this part for now, and let's go to the second part.

context 
{
    input phone: string;
    input name: string = ""; 
    var1: string = "";
}

This is where we are getting the variables and doing stuff; we can create variables as we want from here and use them through this file.

Below this, you'll find a function like

external function function1(log: string): string;

We can also ignore this one because we're not going to use the complex stuff here. Let's check what is happening in the next part (root node)

start node root 
{
    do 
    {
        #connectSafe($phone); 
        #waitForSpeech(1000);
        #say("greeting", {name: $name} );
        wait *;
    }
    transitions 
    {
        yes: goto yes on #messageHasIntent("yes"); 
        no: goto no on #messageHasIntent("no"); 
    }
}

start node root is the first part where the conversation will start. This node currently has two parts; this has a do & transition. In the do part, it'll try to run it first; then, based on user talk, it'll go to function from transition. This basic app is a basic one, so it'll just ask if the user can hear the AI voice; if the user says something which has an intent of "yes" then it'll just go to "yes function"; otherwise, this will go in no intent route.

Before exploring the next node, I'll start building our part because I think it's good enough to understand what's happening here. As we are going to develop the alarm clock, we can have the common reaction for our app, so in our main.dsl, we are going to import the common reaction first. We'll just keep the phone number input because we're going to connect users using the phone. so it'll look like

import "commonReactions/all.dsl";

context
{
    input phone: string;
}

Now it's time to write our main starting root. We are creating two-part of the start node root; the first part is done. Here we'll try to connect with the phone first; then, we'll try to delay a moment for a user to give a time, then AI will start talking. We'll use the #sayText function, where we'll write what AI will ask the user. Then we'll wait for the user to reply. Here the code ->

start node root
{
    do
    {
        #connectSafe($phone);
        #waitForSpeech(1000);
        #sayText("Hello there! I am from Dasha AI and trying to call you as you requested! Are you interested to play a game?");
        wait *;
    }
}

Based on the user response, we can't go anywhere right now, so we'll create transitions now. For this basic case, we'll either go with yes intention or no intention user. The new code will look like

start node root
{
    do
    {
        #connectSafe($phone);
        #waitForSpeech(1000);
        #sayText("Hello there! I am from Dasha AI and trying to call you as you requested! Are you interested to play a game?");
        wait *;
    }
    transitions
    {
        yes: goto yes on #messageHasIntent("yes");
        no: goto no on #messageHasIntent("no");
    }
}

Now you must be thinking about how it's getting the intent of a user? Is this prewritten? Yes! Because we've cloned the blank app repo, now it's time to explore the data.json file. data.json file has all the intent listed for us. We are using yes & no intent for the first step, so we're not going to change anything right now and go back to our main.dsl file to write the transitions. So let's do the easy part first, suppose the user doesn't want to wake up and say something with no intent. What should we do? We need to on no node to run the rest. Let's write a no node for now -

node no
{
    do
    {
        #say("no");
        exit;
    }
}

We are not even writing a transition because we want to end the call when the user is not interested in waking up at this moment. But here, we didn't use any direct text like old-time; instead, we used #say("no"); which is going to data from phrasemap.json file. Let's have a look in there and change the no text to new text so that it works well with our desired idea.

"no": 
      {
        "first": 
        [{ "text": "Understandable! Have a nice sleep!" }]
      },

This upper one will be our data in the phrasemap.json file. If you create a custom phrasemap, don't forget to add that in macros in the down part of phrasemap.json file!

Now time to build the yes part. So we're going to ask a riddle-type question here to help the user to wake up! Let's keep it simple and use #sayText to tell the text to the user and wait for his response, and based on his response, let's take a transition. The code will look like this -

node yes
{
    do
    {
        #sayText("I am tall when I am young, and I am short when I am old. What am I?");
        wait *;
    }

    transitions
    {
        correct: goto correct on #messageHasIntent("correctAnswer");
        no: goto no on #messageHasIntent("no");
    }
}

Here we are using two transitions; the first part is if they got the correct answer, then it'll go to a correct node. Otherwise, it'll repeat the question once (from the importing common reaction part). If the user doesn't guess correctly or try to say no, it'll end the call for now. This question is tricky, so for answering this question, the user needs to be wake & think, and this is the alarm part! Now let's build the final part of the puzzle, the correct answer node.

The correct node will be really easy to work; we'll just say the answer is correct and end the call. Here is the simple node.

node correct
{
    do
    {
        #sayText("This is a correct answer! Have a nice morning!");
        exit;
    }
}

'
If it's hard to follow, you can check the whole code from the GitHub link -> (https://github.com/nerdjfpb/Dasha-alarm-clock-example/blob/master/app/main.dsl)

We can test the app by running it.

npm start PHONE_NUMBER

But we will improve the app and build a view for the app, so first, start with the API. First, we need to import the expressjs, ejs to start the UI part.
For the express API endpoints, we are going to write (in index.js file, delete the dasha code for now)

// importing express js
const express = require('express')
const app = express()

// using for getting json input
app.use(express.json())

// setting the view engine js so that we can load the file from views/pages
app.set('view engine', 'ejs')

// for showing the ui 
app.get('/', (_req, res) => {
  res.render('pages/index')
})

// post url to send the phone number and run the Dasha part
app.post('/', (req, res) => {
  // Calling dasha will be happen here
  res.json({ success: true })
})

// port selection to run
const port = process.env.PORT || 3000
app.listen(port, () => console.log(`listening on port ${port}`))

Now let's write the view part; I'm using tailwindcss as CDN (which is a really bad idea, but I don't want to really install lots of stuff now and this one is mostly for demonstrating this tutorial). For the UI index.ejs file will look like -

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Alarm Clock By Dasha & Nodejs</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
  <main class="min-h-screen flex flex-col row-column items-center justify-center text-center">
    <h1 class="text-4xl font-bold">
      Alarm Clock With Dasha AI
    </h1>
    <div class="text-gray-400 text-xs italic py-2">please add the country code before your number</div>

    <form class="min-w-[40%]" onsubmit="return handleOnSubmit(event)" method="get" action="#">
      <input
        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        id="phone" type="text" placeholder="Enter your number..." />

      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded my-2" type="submit">
        Alarm Call
      </button>

    </form>
  </main>

  <script>

    function handleOnSubmit(e) {
      e.preventDefault();

      const phone = document.getElementById('phone').value

      if (phone) {
        postData('/', { phone })
          .then(data => {
            if (data.success) {
              alert('Alarm call is coming on your way! Please wait....')
            } else {
              alert('Something went wrong!')
            }
          });
      }

    }


    async function postData(url = '', data = {}) {
      const response = await fetch(url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },

        body: JSON.stringify(data)
      });
      return response.json();
    }
  </script>
</body>

</html>

you can get the file from here -> https://github.com/nerdjfpb/Dasha-alarm-clock-example/blob/master/views/pages/index.ejs

We are ready to finalize the last part for running the Dasha once the user clicks on the Alarm Call. First, require the dasha

const dasha = require('@dasha.ai/sdk')

Now we'll simply use the things from blank-slate-app we are not going to use everything from there; we are just going to use it for a phone call, and here is the simple version.


async function dashaCall(phone) {
  const app = await dasha.deploy('./app')

  app.connectionProvider = async (conv) =>
    conv.input.phone === 'chat'
      ? dasha.chat.connect(await dasha.chat.createConsoleChat())
      : dasha.sip.connect(new dasha.sip.Endpoint('default'))

  app.ttsDispatcher = () => 'dasha'

  app.setExternal('function1', (args) => {
    console.log(args.log)
  })

  await app.start()

  const conv = app.createConversation({ phone: phone })

  if (conv.input.phone !== 'chat') conv.on('transcription', console.log)

  const result = await conv.execute()

  console.log(result.output)

  await app.stop()
  app.dispose()
}

Call this function from the post part of index.js, which will look like -

app.post('/', (req, res) => {
  dashaCall(req.body.phone)
  res.json({ success: true })
})

So we are ready to run our app by

npm start

And it will load, and you can put your number here to get a call from AI.

This app simplifies the overall idea; we can improve a lot. Like
Riddles can be randomize
UI can be rich with a dashboard and alarm time (which I didn't make because this will be really hard to follow if I do that)
Sometimes users can just ignore the call, so if users can't solve a riddle, we should call them again. This feature we can add. We could put a number in the database if they correctly answered. Based on that, we can call again!

Overall there is a lot of scopes to improve. But this was a plan to demonstrate Dasha's conversational ai, which is fun to play with. I hope you enjoyed this tutorial.

If you are looking for the whole code, here is the Github repo - https://github.com/nerdjfpb/Dasha-alarm-clock-example

How to create a documentation site & GitHub Page using Docz with NextJs and Typescript

Muhammad Ali (Nerdjfpb) — Tue, 21 Sep 2021 13:12:26 +0000

Motivation

Making good documentation can help understand a project better. It also saves much time! Creating good documentation and showcasing is a tedious task for big projects. In this blog, we will be going over how to maintain documentation for big projects. We chose Docz for the documentation. Read the rest of the blog to find out why!

Prerequisite

React JS basics
Typescript basics
Github basics

Project Technical Needs

Node JS - https://nodejs.org/en/
Visual Studio Code - https://code.visualstudio.com/
Github account - https://github.com/

Why Chose Docz for All Your Software Documentation Needs

It’s powered by Gatsby, so easy to change themes, and we can give a great look to our documentation.
There is no complex configuration in Docz, it is very straightforward.
MDX is getting popular and widely used nowadays. In Docz, we have the power to write MDX.
Finally, the typescript support is available in Docz. Typescript helps a project to maintain easily, and with Docz integration, it becomes super easy to make documentation. Try the blog for more information.

How to start (initializing the nextjs with typescript)

Initializing a project is super easy. Thanks to nextjs team for this. They already have a typescript boilerplate which will help us to start this quickly. Try

npx create-next-app --ts nextdoczts

npx create-next-app --typescript nextdoczts

Want to find out the rest? Follow the link - https://aviyel.com/post/824/how-to-create-a-documentation-site-github-page-using-docz-with-nextjs-and-typescript