In this tutorial, we will be building a React Calculator app. You will learn how to make a wireframe, design a layout, create components, update states, and format the output.

To get you inspired, here is [the link](https://calculator-madza.netlify.app/) to the deployed project of what we will be building.

Also, here is the [source code](https://github.com/madzadev/calculator), just for the reference if you need help in any stage of the project.

## Planning

Since we will be building a Calculator app, let's pick a scope, that is not too complicated for learning but also not too basic for covering different aspects of creating an app.

The features we will implement include:

1. Add, subtract, multiply, divide
2. Support decimal values
3. Calculate percentages
4. Invert the values
5. Reset functionality
6. Format larger numbers
7. Output resize based on length

To start off, we will draw a basic wireframe to display our ideas. For this, you can use free tools like [Figma](https://figma.com) or [Diagrams.net](https://diagrams.net).

![Wireframe](https://cdn.madza.dev/uploads/2021/11/1629922850_1093x592.png)

Note that in this phase, it is not that important to think about colors and styling. What matter the most is that you can structure the layout and it's best if you can identify the components.

## Design

Since we already know the layout and the components, all that's left to do to complete the design is to pick a nice color scheme.

Below are the rules that would make the app look great:

1. The wrapper has a great contrast to the background
2. The screen and button values are easy to read
3. The equal button is in a different color, to give some accent

Based on the criteria above, we are gonna use the following color schema:

![Color scheme](https://cdn.madza.dev/uploads/2021/11/1629922943_1054x295.png)

## Set up the project

To start, open the terminal in your Projects folder and create a boilerplate template using the [create-react-app](https://create-react-app.dev/). To do that, run the command:

`npx create-react-app calculator`

It's the fastest and easiest way to set up a fully working React app with zero-config. All you need to do after that is run `cd calculator` to switch to the newly created project folder and `npm start` to start your app in the browser.

![Browser view](https://cdn.madza.dev/uploads/2021/11/1629816928_1264x667.png)

As you can see it comes with some default boilerplate, so next we are gonna do some clean up in the project folder tree.

Find the `src` folder, where the logic of your app will live and remove everything except `App.js` to create your app, `index.css` to style your app, and `index.js` to render your app in the DOM.

![Project tree](https://cdn.madza.dev/uploads/2021/11/1629923847_854x288.png)

## Create components

Since we already did some wireframing before, we already know the main building blocks of the application. Those are Wrapper, Screen, ButtonBox, and Button.

First create a `components` folder inside the `src` folder. We will then create a separate `.js` file and `.css` file for each component.

### Wrapper

The `Wrapper` component will be the frame, holding all the children components in place. It will also allow us to center the whole app afterward.

#### Wrapper.js

```javascript
import React from "react";
import "./Wrapper.css";

const Wrapper = ({ children }) => {
  return <div className="wrapper">{children}</div>;
};

export default Wrapper;
```

#### Wrapper.css

```css
.wrapper {
  width: 340px;
  height: 540px;
  padding: 10px;
  border-radius: 10px;
  background-color: #485461;
  background-image: linear-gradient(315deg, #485461 0%, #28313b 74%);
}
```

### Screen

The `Screen` component will be the top section children in the `Wrapper` component and its purpose will be to display the calculated values.

In the features list, we included display output resize on length, meaning longer values must shrink in size. We will use a small (3.4kb gzip) library called [react-textfit](https://www.npmjs.com/package/react-textfit) for that.

To install it, run `npm i react-textfit` and then import and use it like shown below.

#### Screen.js

```javascript
import React from "react";
import { Textfit } from "react-textfit";
import "./Screen.css";

const Screen = ({ value }) => {
  return (
    <Textfit className="screen" mode="single" max={70}>
      {value}
    </Textfit>
  );
};

export default Screen;
```

#### Screen.css

```css
.screen {
  height: 100px;
  width: 100%;
  margin-bottom: 10px;
  padding: 0 10px;
  background-color: #4357692d;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: white;
  font-weight: bold;
  box-sizing: border-box;
}
```

### ButtonBox

The `ButtonBox` component, similarly to the `Wrapper` component, will be the frame for the children - only this time for the `Button` components.

#### ButtonBox.js

```javascript
import React from "react";
import "./ButtonBox.css";

const ButtonBox = ({ children }) => {
  return <div className="buttonBox">{children}</div>;
};

export default ButtonBox;
```

#### ButtonBox.css

```css
.buttonBox {
  width: 100%;
  height: calc(100% - 110px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-gap: 10px;
}
```

### Button

The `Button` component will provide the interactivity for the app. Each component will have the `value` and `onClick` props.

In the stylesheet, we will also include the styles for the `equal` button. We will use `Button` props to access the class later on.

#### Button.js

```javascript
import React from "react";
import "./Button.css";

const Button = ({ className, value, onClick }) => {
  return (
    <button className={className} onClick={onClick}>
      {value}
    </button>
  );
};

export default Button;
```

#### Button.css

```css
button {
  border: none;
  background-color: rgb(80, 60, 209);
  font-size: 24px;
  color: rgb(255, 255, 255);
  font-weight: bold;
  cursor: pointer;
  border-radius: 10px;
  outline: none;
}

button:hover {
  background-color: rgb(61, 43, 184);
}

.equals {
  grid-column: 3 / 5;
  background-color: rgb(243, 61, 29);
}

.equals:hover {
  background-color: rgb(228, 39, 15);
}
```

## Render elements

The base file for rendering in React apps is `index.js`. Before we go further, make sure your `index.js` looks as follows:

```javascript
import React from "react";
import ReactDOM from "react-dom";

import App from "./App";
import "./index.css";

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

Also, let's check `index.css` and make sure we reset the default values for `padding` and `margin`, pick some great font (like [Montserrat](https://fonts.google.com/specimen/Montserrat) in this case) and set the proper rules to center the app in the viewport.

```css
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

* {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fbb034;
  background-image: linear-gradient(315deg, #fbb034 0%, #ffdd00 74%);
}
```

Finally, let's open the main file `App.js`, and import all the components we created previously.

```javascript
import React from "react";

import Wrapper from "./components/Wrapper";
import Screen from "./components/Screen";
import ButtonBox from "./components/ButtonBox";
import Button from "./components/Button";

const App = () => {
  return (
    <Wrapper>
      <Screen value="0" />
      <ButtonBox>
        <Button
          className=""
          value="0"
          onClick={() => {
            console.log("Button clicked!");
          }}
        />
      </ButtonBox>
    </Wrapper>
  );
};

export default App;
```

In the example above we have rendered just a single `Button` component.

Let's create an array representation of the data in the wireframe, so we can map through and render all the buttons in the `ButtonBox`.

```javascript
const btnValues = [
  ["C", "+-", "%", "/"],
  [7, 8, 9, "X"],
  [4, 5, 6, "-"],
  [1, 2, 3, "+"],
  [0, ".", "="],
];
```

Next, include this code between the `ButtonBox` tags.

```javascript
{
  btnValues.flat().map((btn, i) => {
    return (
      <Button
        key={i}
        className={btn === "=" ? "equals" : ""}
        value={btn}
        onClick={() => {
          console.log(`${btn} clicked!`);
        }}
      />
    );
  });
}
```

Now open your browser. If you followed along, your current result should look like this:

![App design](https://cdn.madza.dev/uploads/2021/11/1629922296_1322x733.png)

If you want, you can also open Dev tools (from the browser `Settings` or by pressing `F12`) and test out the log values for each button pressed.

![Console.log](https://cdn.madza.dev/uploads/2021/11/1629924446_843x300.png)

## Define states

Next, we will declare the state variables using React `useState` hook.

Specifically, there will be three states: `num` - the entered value, `sign` - the selected sign, and `res` - the calculated value.

In order to use the `useState` hook, we must first import it in `App.js`.

```javascript
import { useState } from "react";
```

In the App function, we will use an object to set all states at once.

```javascript
let [calc, setCalc] = useState({
  sign: "",
  num: 0,
  res: 0,
});
```

## Functionality

Our app looks nice, but there is no functionality. Currently it can only output button values into the browser console. Let's fix that!

We will start with the `Screen` component. Set the following conditional logic to `value` prop, so it knows when and what input to display:

```javascript
<Screen value={calc.num ? calc.num : calc.res} />
```

Now lets edit the `Button` component, so it can detect different button types and execute the assigned function once the specific button is pressed. Use the code below:

```javascript
<Button
	key={i}
	className={btn === "=" ? "equals" : ""}
	value={btn}
	onClick={
		btn === "C"
			? resetClickHandler
			: btn === "+-"
			? invertClickHandler
			: btn === "%"
			? percentClickHandler
			: btn === "="
			? equalsClickHandler
			: btn === "/" || btn === "X" || btn === "-" || btn === "+"
			? signClickHandler
			: btn === "."
			? comaClickHandler
			: numClickHandler
	}
/>
```

Now we are ready to create all the necessary functions.

### numClickHandler

The `numClickHandler` function gets triggered only if any of the number buttons (0-9) is pressed. Then it gets the value of the `Button` and adds that to the current `num` value.

It will also make sure that:

1. No whole numbers start with zero
2. No multiple zeros before the comma
3. Format to "0." if "." is pressed first
4. Enter numbers up to 16 integers long

```javascript
const numClickHandler = (e) => {
  e.preventDefault();
  const value = e.target.innerHTML;

  if (calc.num.length < 16) {
    setCalc({
      ...calc,
      num:
        calc.num === 0 && value === "0"
          ? "0"
          : calc.num % 1 === 0
          ? Number(calc.num + value)
          : calc.num + value,
      res: !calc.sign ? 0 : calc.res,
    });
  }
};
```

### comaClickHandler

The `comaClickHandler` function gets fired only if the coma value ('.') is pressed. It adds the coma to the current `num` value, making it a decimal number.

It will also make sure that no multiple commas are possible.

```javascript
const comaClickHandler = (e) => {
  e.preventDefault();
  const value = e.target.innerHTML;

  setCalc({
    ...calc,
    num: !calc.num.toString().includes(".") ? calc.num + value : calc.num,
  });
};
```

### signClickHandler

The `signClickHandler` function gets fired when the user press either '+', '-', '*' or '/'. The particular value is then set as a current `sign` value in the `calc` object.

It will also make sure that there is no effect on repeated calls.

```javascript
const signClickHandler = (e) => {
  e.preventDefault();
  const value = e.target.innerHTML;

  setCalc({
    ...calc,
    sign: value,
    res: !calc.res && calc.num ? calc.num : calc.res,
    num: 0,
  });
};
```

### equalsClickHandler

The `equalsClickHandler` function calculates the result when the equals button ('=') is pressed. The calculation is based on the current `num` and `res` value, as well as the `sign` selected (see the `math` function).

The returned value is then set as the new `res` for the further calculations.

It will also make sure that:

1. There is no effect on repeated calls
2. Users can't divide with 0

```javascript
const equalsClickHandler = () => {
  if (calc.sign && calc.num) {
    const math = (a, b, sign) =>
      sign === "+"
        ? a + b
        : sign === "-"
        ? a - b
        : sign === "X"
        ? a * b
        : a / b;

    setCalc({
      ...calc,
      res:
        calc.num === "0" && calc.sign === "/"
          ? "Can't divide with 0"
          : math(Number(calc.res), Number(calc.num), calc.sign),
      sign: "",
      num: 0,
    });
  }
};
```

### invertClickHandler

The `invertClickHandler` function first checks if there is any entered value (`num`) or calculated value (`res`) and then inverts them by multiplying with -1.

```javascript
const invertClickHandler = () => {
  setCalc({
    ...calc,
    num: calc.num ? calc.num * -1 : 0,
    res: calc.res ? calc.res * -1 : 0,
    sign: "",
  });
};
```

### percentClickHandler

The `percentClickHandler` function checks if there is any entered value (`num`) or calculated value (`res`)  and then calculates the percentage using JS built in `Math.pow` function, which returns the base to the exponent power.

```javascript
const percentClickHandler = () => {
  let num = calc.num ? parseFloat(calc.num) : 0;
  let res = calc.res ? parseFloat(calc.res) : 0;

  setCalc({
    ...calc,
    num: (num /= Math.pow(100, 1)),
    res: (res /= Math.pow(100, 1)),
    sign: "",
  });
};
```

### resetClickHandler

The `resetClickHandler` function defaults all the initial values of `calc`, returning the `calc` state as it was when the Calculator app was first rendered.

```javascript
const resetClickHandler = () => {
  setCalc({
    ...calc,
    sign: "",
    num: 0,
    res: 0,
  });
};
```

## Input Formatting

One last thing to complete the feature list in the intro would be to implement value formatting. For that, we could use a modified Regex string posted by [Emissary](https://stackoverflow.com/users/1238344/emissary).

```javascript
const toLocaleString = (num) =>
  String(num).replace(/(?<!\..*)(\d)(?=(?:\d{3})+(?:\.|$))/g, "$1 ");
```

Essentially what it does is take a number, format it into the string format and create the space separators for the thousand mark.

If we reverse the process and want to process the string of numbers, first we need to remove the spaces, so we can later convert it to number. For that you can use the function:

```javascript
const removeSpaces = (num) => num.toString().replace(/\s/g, "");
```

Check out the next section with full code on how to add `toLocaleString` and `removeSpaces` to the handler functions for the `Button` component.

## Putting it all together

If you followed along, the whole `App.js` code would look like this:

```javascript
import React, { useState } from "react";

import Wrapper from "./components/Wrapper";
import Screen from "./components/Screen";
import ButtonBox from "./components/ButtonBox";
import Button from "./components/Button";

const btnValues = [
  ["C", "+-", "%", "/"],
  [7, 8, 9, "X"],
  [4, 5, 6, "-"],
  [1, 2, 3, "+"],
  [0, ".", "="],
];

const toLocaleString = (num) =>
  String(num).replace(/(?<!\..*)(\d)(?=(?:\d{3})+(?:\.|$))/g, "$1 ");

const removeSpaces = (num) => num.toString().replace(/\s/g, "");

const App = () => {
  let [calc, setCalc] = useState({
    sign: "",
    num: 0,
    res: 0,
  });

  const numClickHandler = (e) => {
    e.preventDefault();
    const value = e.target.innerHTML;

    if (removeSpaces(calc.num).length < 16) {
      setCalc({
        ...calc,
        num:
          calc.num === 0 && value === "0"
            ? "0"
            : removeSpaces(calc.num) % 1 === 0
            ? toLocaleString(Number(removeSpaces(calc.num + value)))
            : toLocaleString(calc.num + value),
        res: !calc.sign ? 0 : calc.res,
      });
    }
  };

  const comaClickHandler = (e) => {
    e.preventDefault();
    const value = e.target.innerHTML;

    setCalc({
      ...calc,
      num: !calc.num.toString().includes(".") ? calc.num + value : calc.num,
    });
  };

  const signClickHandler = (e) => {
    e.preventDefault();
    const value = e.target.innerHTML;

    setCalc({
      ...calc,
      sign: value,
      res: !calc.res && calc.num ? calc.num : calc.res,
      num: 0,
    });
  };

  const equalsClickHandler = () => {
    if (calc.sign && calc.num) {
      const math = (a, b, sign) =>
        sign === "+"
          ? a + b
          : sign === "-"
          ? a - b
          : sign === "X"
          ? a * b
          : a / b;

      setCalc({
        ...calc,
        res:
          calc.num === "0" && calc.sign === "/"
            ? "Can't divide with 0"
            : toLocaleString(
                math(
                  Number(removeSpaces(calc.res)),
                  Number(removeSpaces(calc.num)),
                  calc.sign
                )
              ),
        sign: "",
        num: 0,
      });
    }
  };

  const invertClickHandler = () => {
    setCalc({
      ...calc,
      num: calc.num ? toLocaleString(removeSpaces(calc.num) * -1) : 0,
      res: calc.res ? toLocaleString(removeSpaces(calc.res) * -1) : 0,
      sign: "",
    });
  };

  const percentClickHandler = () => {
    let num = calc.num ? parseFloat(removeSpaces(calc.num)) : 0;
    let res = calc.res ? parseFloat(removeSpaces(calc.res)) : 0;

    setCalc({
      ...calc,
      num: (num /= Math.pow(100, 1)),
      res: (res /= Math.pow(100, 1)),
      sign: "",
    });
  };

  const resetClickHandler = () => {
    setCalc({
      ...calc,
      sign: "",
      num: 0,
      res: 0,
    });
  };

  return (
    <Wrapper>
      <Screen value={calc.num ? calc.num : calc.res} />
      <ButtonBox>
        {btnValues.flat().map((btn, i) => {
          return (
            <Button
              key={i}
              className={btn === "=" ? "equals" : ""}
              value={btn}
              onClick={
                btn === "C"
                  ? resetClickHandler
                  : btn === "+-"
                  ? invertClickHandler
                  : btn === "%"
                  ? percentClickHandler
                  : btn === "="
                  ? equalsClickHandler
                  : btn === "/" || btn === "X" || btn === "-" || btn === "+"
                  ? signClickHandler
                  : btn === "."
                  ? comaClickHandler
                  : numClickHandler
              }
            />
          );
        })}
      </ButtonBox>
    </Wrapper>
  );
};

export default App;
```

## Final notes

Congratulations! You have created a fully functional and styled app. Hopefully, you learned a thing or two during the process!

![Demo](https://cdn.madza.dev/uploads/2021/11/1629924447_1305x720.gif)

Some ideas for you would be to add some scientific features or to implement the memory with the list of previous calculations.

If you have any issue reports or feature requests, feel free to leave them in the [GitHub repo](https://github.com/madzadev/calculator). If you like the project, feel free to star it.

---

Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!


How to Build a React Calculator from Scratch

State management is the core of any modern web application since it determines what data is displayed on the screen during the app usage session while the user interacts with it. 

Think of ticking checkboxes on online surveys, adding products to a shopping cart on an e-commerce store, or selecting audio from a playlist in a music player. It is all possible due to keeping track of each action the user makes.

In this article, we will review many different state management methods that you can use to keep track of the states in your [NextJS](https://nextjs.org) applications. For each solution, I will provide a practical example, so it is easier to understand how each approach works.

We will use the top to bottom approach, reviewing the simplest methods first and moving into more advanced solutions for more complex use cases.

## How does a state work?

A state is a JavaScript object that holds the current status of the data. A good real-life comparison would be a light switch, that can have either On or Off states. Now, transfer the same principle to the React ecosystem and imagine the use of the Light and Dark mode toggle.

Each time the user clicks on the toggle the opposite state is being activated. That state is then being updated in the Javascript state object, so your application knows which state is currently active and what theme to display to the screen. 

Regardless of how the application manages its data, the state must always be passed down from the parent element to the children element.

## NextJS file structure

Since NextJS is a framework, it follows a specific file structure. In order to review different ways to store the states, we first need to understand how the NextJS file system is built.

If you run `npx create-next-app project-name` in your terminal, it will create a fully working NextJS application, that consists of 4 main blocks: root level and the `pages`, `public`, and `styles` folders in it.

For managing states, we will only use `pages` folder and the two files inside it: `_app` and `index.js`. The first is the root file for the whole application, where all the globally accessed components are usually configured. The latter is the base route file for the Home component. 

There is also an `api` folder inside the `pages` folder and that is a built-in way on how NextJS handles the creation of API endpoints, allowing them to receive requests and send responses. We will work with this folder towards the end of the tutorial.  

## The useState hook

One of the most common ways for state management is the `useState` hook. We will build an application that lets you increase the score by clicking the button.

Navigate into `pages` folder and include the following code in `index.js`:

```javascript
import { useState } from "react";

export default function Home() {
  const [score, setScore] = useState(0);
  const increaseScore = () => setScore(score + 1);

  return (
    <div>
      <p>Your score is {score}</p>
      <button onClick={increaseScore}>+</button>
    </div>
  );
}
```

We first imported the `useState` hook itself, and then set the initial state to be `0`. We also provided a `setScore` function so we can update the score later.

Then we created a function `increaseScore`, that accesses the current value of the score and use the `setState` to increase that by `1`. We assigned the function to the `onClick` event for the plus button, so each time the button is pressed the score is increased.

## The useReducer hook

The `useReducer` hook works similarly to the reduce method for arrays. We pass a reducer function and an initial value. The reducer receives the current state and an action and returns the new state.

We will create an app that lets you multiple the currently active result by `2`. Include the following code in `index.js`:

```javascript
import { useReducer } from "react";

export default function Home() {
  const [multiplication, dispatch] = useReducer((state, action) => {
    return state * action;
  }, 50);
  return (
    <div>
      <p>The result is {multiplication}</p>
      <button onClick={() => dispatch(2)}>Multiply by 2</button>
    </div>
  );
}
```

First, we imported the `useReducer` hook itself. We passed in the reducer function and the initial state. The hook then returned an array of the current state and the dispatch function.

We passed the dispatch function to the `onClick` event so that the current state value gets multiplied by `2` each time the button is clicked,  setting it to the following values: `100`, `200`, `400`, `800`, `1600` and so on.

## The prop drilling technique

In more advanced applications,  you will not work with states directly in a single file. You will most likely divide the code into different components so it is easier to scale and maintain the app.

As soon as they are multiple components the state needs to be passed from the parent level to the children. This technique is called prop drilling and it can be multiple levels deep. 

For this tutorial, we will create a basic example just two levels deep to give you an idea of how the prop drilling works. Include the following code to the `index.js` file:

```javascript
import { useState } from "react";

const Message = ({ active }) => {
  return <h1>The switch is {active ? "active" : "disabled"}</h1>;
};

const Button = ({ onToggle }) => {
  return <button onClick={onToggle}>Change</button>;
};

const Switch = ({ active, onToggle }) => {
  return (
    <div>
      <Message active={active} />
      <Button onToggle={onToggle} />
    </div>
  );
};

export default function Home() {
  const [active, setActive] = useState(false);
  const toggle = () => setActive((active) => !active);

  return <Switch active={active} onToggle={toggle} />;
}
```

In the code snipped above the `Switch` component itself does not need `active` and `toggle` values, but we have to "drill" through the component and pass those values to the children components `Message` and `Button` that needs them. 

## The use of Context API

The `useState` and `useReducer` hooks combined with the prop drilling technique will cover the majority of the use cases for most of the basic apps you build. 

But what if your app gets way more complex, the props need to be passed down multiple levels, or you have some states that need to be accessible globally?

In this case, it is recommended to avoid prop drilling and use [Context API](https://reactjs.org/docs/context.html), which will let you access the state globally.

It's always a great practice to create separate contexts for different states like authentication, user data, and so on. We will create an example for theme state management.

First, let's create a separate folder in the root and call it `context`. Inside it create a new file called `theme.js` and include the following code:

```javascript
import { createContext, useContext, useState } from "react";

const Context = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
  return (
    <Context.Provider value={[theme, setTheme]}>{children}</Context.Provider>
  );
}

export function useThemeContext() {
  return useContext(Context);
}
```

We first created a new `Context` object, created a `ThemeProvider` function, and set the initial value for the `Context` to 'light'. 

Then we created a custom `useThemeContext` hook that will allow us to access the theme state after we import it into the individual pages or components of our app.

Next, we need to wrap the `ThemeProvider` around the whole app, so we can access the state of the theme in the entire application. Head to the `_app.js` file and include the following code:

```javascript
import { ThemeProvider } from "../context/theme";

export default function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}
```

To access the state of the theme, navigate to `index.js` and include the following code:

```javascript
import Link from "next/link";
import { useThemeContext } from "../context/theme";

export default function Home() {
  const [theme, setTheme] = useThemeContext();
  return (
    <div>
      <h1>Welcome to the Home page</h1>
      <Link href="/about">
        <a>About</a>
      </Link>
      <p>Current mode: {theme}</p>
      <button
        onClick={() => {
          theme == "light" ? setTheme("dark") : setTheme("light");
        }}
      >
        Toggle mode
      </button>
    </div>
  );
}
```

We first imported the `useThemeContext` hook and then accessed the `theme` state and `setTheme` function to update it when necessary. 

Inside the `onClick` event of a toggle button, we created an update function that switches between the opposite values between 'light' and 'dark', depending on the current value.

## Accessing Context via routes

NextJS uses `pages` folder to create new routes in your app. For example, if you create a new file `route.js`, and then refer to it from somewhere via `Link` component, it will be accessible via `/route` in your URL.

As you most likely noticed, in the previous code snippet we created a route to the `About` route. This will allow us to test that the theme state is globally accessible. 

This route currently do not exist, so let's create a new file called `about.js` in the `pages` folder and include the following code:

```javascript
import Link from "next/link";
import { useThemeContext } from "../context/theme";

export default function Home() {
  const [theme, setTheme] = useThemeContext();
  return (
    <div>
      <h1>Welcome to the About page</h1>
      <Link href="/">
        <a>Home</a>
      </Link>
      <p>Currently active theme: {theme}</p>
      <button
        onClick={() => {
          theme == "light" ? setTheme("dark") : setTheme("light");
        }}
      >
        Toggle mode
      </button>
    </div>
  );
}
```

We created a very similar code structure that we used in the Home route earlier. The only differences were the page title and a different link to navigate back to Home.

Now try to toggle the currently active theme and switch between the routes. Notice that the state is preserved in both routes. You can further create different components and the theme state will be accessible whenever in the app file tree it is located.

## Data fetching from an API

The previous methods would work when managing states internally in the app. However, in a real-life scenario, you will most likely fetch some data from outside sources via API.

The data fetching can be summarized as making a request to the API endpoint and receiving the data after the request is processed and the response is sent. 

We need to take into consideration that this process is not immediate, so we need to manage states of the response like the state of waiting time while the response is being prepared and also handle the cases for potential errors.

Keeping track of the waiting state lets us display a loading animation to improve the UX and the error state lets us know that the response was not successful, and lets us display the error message, which gives us further information about the cause. 

## The Fetch API and the useEffect hook

One of the most common ways to handle the data fetching is to use the combination of the native [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) and the `useEffect` hook.

The `useEffect` hook lets us perform side effects once some other action has been completed. With it, we can track when the app has been rendered and we are safe to make a Fetch call.

To fetch the data in NextJS, transform the `index.js` to the following:

```javascript
import { useState, useEffect } from "react";

export default function Home() {
  const [data, setData] = useState(null)
  const [isLoading, setLoading] = useState(false)

  useEffect(() => {
    setLoading(true)
    fetch('api/book')
      .then((res) => res.json())
      .then((data) => {
        setData(data)
        setLoading(false)
      })
  }, [])

  if (isLoading) return <p>Loading book data...</p>
  if (!data) return <p>No book found</p>

  return (
    <div>
      <h1>My favorite book:</h1>
      <h2>{data.title}</h2>
      <p>{data.author}</p>
    </div>
  )
}
```

We first imported the `useState` and `useEffect` hooks. Then we created separate initial states for received data to `null` and loading time to `false`, indicating that no Fetch call is been made.

Once the app has been rendered, we set the state for loading to `true`, and create a Fetch call. As soon as the response has been received we set the data to the received response and set the loading state back to `false`, indicating that the fetching is complete. 

Next, we need to create a valid API endpoint, so navigate to `api` folder and create a new file called `book.js` inside it, so we get the API endpoint we included it the fetch call in the previous code snippet. Include the following code:

```javascript
export default function handler(req, res) {
  res
    .status(200)
    .json({ title: "The fault in our stars", author: "John Green" });
}
```

This code simulates a response about the book title and author you would normally get from some external API but will do fine for the purpose of this tutorial.

## The use of SWR

There is also an alternate method created by the NextJS team itself, to handle data fetching in an even more convenient way. 

It's called [SWR](https://swr.vercel.app/) - a custom hook library that handles caching, revalidation, focus tracking, refetching on the interval, and more. To install it, run `npm install swr` in your terminal.

To see it in action, let's transform the `index.js` file to the following:

```javascript
import useSWR from "swr";

export default function Home() {
  const fetcher = (...args) => fetch(...args).then((res) => res.json());
  const { data, error } = useSWR("api/user", fetcher);

  if (error) return <p>No person found</p>;
  if (!data) return <p>Loading...</p>;

  return (
    <div>
      <h1>The winner of the competition:</h1>
      <h2>
        {data.name} {data.surname}
      </h2>
    </div>
  );
}
```

Using SWR simplifies a lot of things, the syntax looks cleaner and easier to read, and well suited for scalability. Errors and response states get handled in a couple of lines of code.

Now, let's create the API endpoint so we get some response. Navigate to the `api` folder, create a new file called `user.js` and include the following code:

```javascript
export default function handler(req, res) {
  res.status(200).json({ name: "Jade", surname: "Summers" });
}
```

This API endpoint simulates the fetching of the name and surname of the person, which you would normally get from a database or an API containing a list of publically available names.

## Conclusion

In this tutorial we built several mini-applications starting from number increaser, value multiplier, switch toggle, global theme provider and then couple apps that return data from API endpoints and track states during the request-response process.

Each of them used different state management solutions. From all of the above, we can be certain, that the biggest challenge for picking the most appropriate state management solution is your ability to identify what states you need to track.

Beginners often struggle and choose overkill solutions for managing simple states, but it gets better with time, and the only way to improve it is by practicing. Hopefully, this article helped you to take a step in the right direction towards achieving that.


Understanding State Management in NextJS

How I Built an Audio Player to Showcase my own Tracks

No success story is the same, we all have had our ups and downs in the learning process and things we wish we knew when we started out.

If you are a new, aspiring developer, these 65 things will prepare you for the long journey ahead. Use them as a shortcut in your own learning path.

---

### 1. Coding is about problem-solving.
Being a programmer is way more than sitting in front of the computer and randomly pressing buttons on the keyboard. It's a powerful tool to solve a lot of real-world problems and make people's lives easier. If you are capable to do it, you will always be looked after.

### 2. The golden rule is planning.
Each and every successful project starts with lots of planning. Make sure you identify the goal, define tasks, know your audience, etc. Use a pen and paper or any online wireframing tool and try to come up with a clear schema of what your solution would look like. 

### 3. The content is king.
Without content your site is empty. If you are dealing with static content, make sure it is well presented. If the content is dynamic always try to project what type of content you will create or receive and design your layout, code, and database structures based on that. 

### 4. Coding should be the last phase of a project.
Beginners may think that every project always starts with coding. It's actually just the technical implementation of all the planning that was done before and should be the last step of solving the problem.

### 5. You have everything at your fingertips.
It's not the 50s or 60s anymore, where you would have to go to the library to study some topic. All the info you need is within reach of the hand. Use your brain and the internet.

### 6. You don't need extreme hardware to code.
Cutting edge processor, massive amounts of RAM, and 5 monitors are all optional. A mid-range laptop is more than enough to get started out.

### 7. You don't need to be great at math.
Coding has often been associated with some geniuses with a 200+ IQ, based on the movies we have seen. It could get math-heavy in topics like artificial intelligence, robotics, cryptography, etc, but in order to start, you need to know just the basic operations. 

### 8. Finding the right workflow is not easy.
Each of us has different preferences. Experiment with different extensions and settings. It will take lots of time to understand what works for you and how to tie everything together. But it will be very rewarding for your productivity later on.

### 9. The perfect timing is now.
Saving in bookmarks is just a fancy word for procrastination. Your best bet to be productive is to do it now.

### 10. Syncing makes you mobile.
Sync all the browser and IDE/code editor extensions and settings on every machine you work on. It will assure that you work in the same environment wherever you are.

### 11. There are multiple ways of achieving.
Once I started to code, I thought the logic in code is very strict and has to follow a certain pattern. In reality, the only strict variable is the syntax of the language used.

### 12. Naming things is hard.
It might sound like an easy task at the beginning, but you will find out how challenging it can be, especially for larger-scale projects.

### 13. Take mistakes as lessons.
If you take any success story, you will find it's actually a continuous try and error pattern, persistence and curiosity are the keys.

### 14. Recreating is 10X easier than writing ground-up.
When re-creating an existing app, you have a clear understanding of the layout and building principles of the project. And those are often the most challenging parts.

### 15. It's important to find your niche.
Wandering around from niche to niche will take you nowhere. Define your interest and research the fields available before jumping into one.

### 16. Be curious about why things work.
Always try to discover the under-the-hood stuff. Don't be enough with seeing stuff somehow magically working.

### 17. Tools are your keys to productivity.
A man/woman is only as good as his/her tools. Invest time in creating a proper tool-stack as it pays off big time!

### 18. Passionate projects keep you going. 
When it comes to side project ideas, pick something you are truly interested in. This will boost your motivation as you care for the end result.

### 19. It's a marathon, not a sprint.
The development space is constantly evolving, so prepare yourself for continuous learning. By starting too fast, you will get tired quickly.

### 20. People you follow are the information you consume. 
Pay attention to the people you follow on social media. That dictates the quality of the feed you read and the information you take in.

### 21. Do not reinvent the wheel.
Before jumping into the project, take a look at what other developers have used to solve similar problems. There should already be the solution for virtually anything, it's just a matter of how good are you at searching.

### 22. It's easy to get carried away. 
Being active in the community is a great thing, but be aware it will often lead you to discover more optimized technologies, more modern-looking UIs, etc. That does not always mean your current stack is bad and you should switch it.

### 23. Tutorials often mislead you.
Tutorials are mostly based on already pre-coded and re-factored code. Once you start comparing yourself to it, you get desperate, cause you can not come up with the solutions that fast and write as clean code on the first go. Be aware it's only a bright side of a coin and the creators struggled, too.

### 24. Tutorials won't make you independent.
Watching or reading a tutorial might be good for getting an overview of the tech, but they will not help you to stand up on your feet. Try to read official docs besides to develop your analytical thinking and try to come up with your own solutions. 

### 25. No tech is perfect. 
Each and every tech has it's own advantages and disadvantages. When in doubt, put your alternatives side by side, do some research on them, and compare how they tackle particular tasks.

### 26. Your ability to pick up stuff matters.
When applying for a company, the chances are you are not gonna be familiar with their tech stack. What matters is not how many technologies you know but how fast you can pick up the particular tech you come across.

### 27. Version control is a must.
Clients often ask for previous designs and are undecided on features. Version control is a must to save you and also assures your code is always backed up.

### 28. Bugs can be really intimidating.
Be prepared for challenging bugs that can take hours or even days to fix. You will be intimidated by the low productivity levels during those times but will be elevated once you fix them.

### 29. Learn what not to learn.
Nowadays it's easy to get confused in the vast ocean of technologies. Ironically, one of the best skills today is to learn what not to learn.

### 30. Reading code makes you better, too. 
By writing your own code, you are reflecting on what you know. It's important to read code by other devs, to learn different design patterns and best practices.

### 31. Be humble and others will respect you.
Celebrate your achievements inside, but be humble about them outside. Bragging won't get you far.  

### 32. Being a perfectionist will slow you down.
Aiming for quality over quantity is a great thing. Tho don't over exaggerate, as you will end up with hundreds of unfinished projects.

### 33. Open source is awesome.
From individuals to large companies, open-source has bloomed in the community. It's a wonderful thing and I believe together we are making better projects. Make sure you study the best practices and design patterns used by other people.

### 34. The diploma is optional.
Clients often do not care about the diploma, but your practical ability to solve their problems.

### 35. Break it down when you get stuck.
Often times coming up with a solution may seem hard as the problem is too comprehensive. Break it down into chunks and tackle each piece bit by bit.

### 36. Corporate companies need you for CRUD apps.
The heart of corporate companies is mostly CRUD operations. Learn and be ready to work with them daily, if you are planning to apply. 

### 37. The project is never fully finished.
There will always be ways to improve and optimize each project. Think of it more like the project meets the requirements and is good enough for being shipped.

### 38. Good code is easy to read and maintain.
Whether or not you are working alone, always try to write code as somebody else will work with it. In trickier parts leave some comments, explaining the working principles.

### 39. The first language is always the hardest. 
I've seen people often asking what's the hardest language to learn. In reality, the difficulty is related to your experience.

### 40. Googling and using Stack Overflow is acceptable.
Those resources are there for you to help. Don't be ashamed of Googling or reading SO in front of someone. Know for a fact, they do, too.

### 41. Communication skills are underrated.
The code alone will not always determine your success. It's important to practice interaction with people.

### 42. Sharpen your negotiation skills.
Knowing all the cutting edge tech has no power if you do not know how to negotiate. They need you not the other way around.

### 43. Having an online presence is important.
Dozens of local projects have no meaning if no one knows about them. Build yourself a great online presence to promote them.

### 44. Always be aware of the 20/80 rule.
Keep in mind that the last 20% of a project takes 80% of the time. So think twice before reporting any progress updates to a client.

### 45. Don't over-engineer without a cause.
It's always a good practice to aim for a state where there are no more features to remove rather than add.

### 46. Frameworks come and go.
It is 10X more valuable to learn a tech that they are based on, this way you are all set to pick up a particular framework if the necessity arises.

### 47. Knowing something well is better than pretend to know a bit of everything.
Instead of trying to pick up and master everything, do some research on the field you are interested in, study the available stacks, pick one and master it to the core. Trying to become a jack of all trades will ultimately leave you a master of none.

### 48. Testing is there for a reason.
Make a good habit of writing tests. Despite you might feel you are doing unnecessary work at first, they will help you save lots of time, especially in large code-bases.

### 49. Achievements boost your motivation best.
Appreciate all those 'a-ha' moments when learning, finally getting challenging features to work, seeing people being amazed, and feeling valuable.  Treat them as fuel for your motivation.

### 50. Do not put up more than you can carry.
Find a fine line between choosing a problem of a scale, that is challenging enough for you to learn something new, but also narrow enough to be solvable.

### 51. Do not compare yourself to others.
It's easy to get frustrated if you compare yourself to the achievements of other devs. You learn at your own rate and it's perfectly fine.

### 52. Do not take criticism personally. 
Constructive criticism is valuable feedback, pointing out the mistakes or improvements you did not see yourself. Ultimately it will lead to a better quality product. 

### 53. Everyone has written a bad code.
Don't worry about looking at the code you have written a few years back from now. It might seem like you don't believe your eyes and you might feel shame. Tho remember it's actually a clear sign, that you have progressed.

### 54. One finished project is better than 10 half-finished ones.
Try to work on one or a couple of projects at a time and try to follow the idea-execution pattern. Remember that deployed projects are those that count.

### 55. The best way to learn is by teaching others.
In order to teach others, you have to study the concept yourself. This assures you get to know the concept to the core and is a win-win as you share your knowledge.

### 56. You are never ready to apply for a job.
Learning to code is a journey, not a destination, so you will always feel like being in the middle to achieve something. Don't let that fool you and apply anyway.

### 57. The hype train is real.
Be aware of the trends, but only to the point, where you understand their main working principles and use cases. That way you will know which problems it solves best and will pick up the actual tool just when the necessity arises. 

### 58. Practice leads to mastery.
Repetition is the mother of all knowledge and one of your safest bets to master something is to be persistent in practicing it.

### 59. Focus on the indexes, not the content. 
Nowadays what matters is to find information fast. If you know what you need and where to look, it's only a matter of time to pick it up.

### 60. Be a sponge for knowledge.
Develop a habit to learn each and every day in order to stay competitive and knowledgeable. Pay attention to whom you subscribe to. Seek quality over quantity.

### 61. Learn to say no.
If you will never say no to anything, others will start to take advantage of it sooner or later and you will end up working more than you should often.

### 62. Note-taking is your rescue for writing block.
Whatever you do and wherever you are, always try to track down your ideas. Create a back-log of information for the times you are feeling less inspired.

### 63. Schedule the week and prioritize.
Try to dedicate some time to plan ahead. That way it is easier to identify all the tasks you deal with and prioritize the execution order of them. 

### 64. Taking breaks make wonders.
If you get stuck, try to do nothing coding-related for a while. Spend time with your family, or practice your hobbies or go for a jog. Often times you will re-visit the project and come up with the solution easily.

### 65. Sports and proper sleep boost productivity.
When it comes to productivity, you will often do more with 8 hours of sleep and 4 hours of work, than the other way around. Combine it with regular physical activities for the full effort. 

---

Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

65 Things I wish I knew when I started to Code

Nowadays in our busy schedules and tight deadlines, it's critical to choose tools that increase productivity.

Here I have compiled a list of some of my favorite NPM packages. I've also sorted them into categories, so the information is more structured and it's easier to navigate.

Surely, you don't have to install and learn them all. In most cases picking one from each category should be enough. I wanted to provide alternatives, so each reader can find something. Enjoy!

---

### 💻 Frontend frameworks

1.[React](https://www.npmjs.com/package/react)

React uses a virtual DOM to manage sections of a page as individual components, allowing you to refresh a component without refreshing the entire page. Often used with [React-dom](https://www.npmjs.com/package/react-dom) and [React-router-dom](https://www.npmjs.com/package/react-router-dom).

2.[Vue](https://www.npmjs.com/package/vue)

Vue was built by combining the best approaches from React and others, focusing on features that made writing Web apps faster, easier, and more pleasant. Great documentation. Often used with [Vue-router](https://www.npmjs.com/package/vue-router) and [Vuex](https://www.npmjs.com/package/vuex).

3.[Svelte](https://www.npmjs.com/package/svelte)

Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.

*Other notable frameworks include [Angular](https://www.npmjs.com/package/angular), [Ember](https://www.npmjs.com/package/ember), [Backbone](https://www.npmjs.com/package/backbone), [Preact](https://www.npmjs.com/package/preact) and many others. You can do wonders with any of them, the golden rule is to learn [modern JS (ES6 and above)](https://javascript.info/) well before.*

### 🎨 Styling frameworks

4.[Bootstrap](https://www.npmjs.com/package/bootstrap)

World’s most popular framework for building responsive, mobile-first sites. Intuitive and powerful, tho relatively bulky in size. Many modern UI kits are based on it like [React Bootstrap](https://www.npmjs.com/package/react-bootstrap) or [Reactstrap](https://www.npmjs.com/package/reactstrap). 

5.[Tailwind](https://www.npmjs.com/package/tailwindcss)

A low-level, utility-first CSS framework for rapid UI development. Built from the ground-up to be super customizable. 

6.[Styled-components](https://www.npmjs.com/package/styled-components)

CSS-in-JS tool that bridges the gap between components and styling, offering numerous features to get you up and running in styling components in a functional and reusable way.

*Other great solutions include [Foundation](https://www.npmjs.com/package/foundation-sites), [Bulma](https://www.npmjs.com/package/bulma), [Materialize](https://www.npmjs.com/package/materialize-css) and [Ant Design](https://www.npmjs.com/package/antd). If you prefer to write Vanilla CSS, you can use some CSS extension language like [SASS](https://www.npmjs.com/package/sass), to extend its features.*

### 🔲 Backend frameworks

7.[Express](https://www.npmjs.com/package/express)

Fast, unopinionated, minimalist web framework for Node.js. It is relatively minimal with many features available as plugins. Often referred to as a standard server framework for Node.js.

8.[Hapi](https://www.npmjs.com/package/@hapi/hapi)

Hapi was originally used for the Express framework. With Hapi you can build powerful, scalable applications, with minimal overhead and full out-of-the-box functionality.

9.[Sails](https://www.npmjs.com/package/sails)

Sails is the most popular MVC framework for Node.js with support for the requirements of modern apps: data-driven APIs with a scalable, service-oriented architecture.

*Same as for frontend frameworks, there are lots of backend alternatives as well like [Adonis](https://www.npmjs.com/package/@adonisjs/cli) and [Koa](https://www.npmjs.com/package/koa). Pick one that suits your needs and learn it well.*

### 🔗 CORS and requests

10.[Cors](https://www.npmjs.com/package/cors)

Node.js middleware for providing a Connect/Express middleware that can be used to enable cross-origin resource sharing with various options.

11.[Axios](https://www.npmjs.com/package/axios)

A promise-based HTTP client for the browser and Node.js. It's easy to set-up, intuitive, and simplifies a lot of stuff compared to JS built-in [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).

12.[Body-parser](https://www.npmjs.com/package/body-parser)

Body parsing middleware, that extracts the entire body portion of an incoming request stream and exposes it on req.body as something easier to interface with.

### 🧩 API services

13.[Restify](https://www.npmjs.com/package/restify)

A Node.js web service framework optimized for building semantically correct RESTful web services ready for production use at scale. Restify optimizes for introspection and performance.

14.[GraphQL](https://www.npmjs.com/package/graphql)

A query language for APIs and a runtime for fulfilling those queries with your existing data. Provides a complete description of the data in your API, gives clients the power to ask for exactly what they need.

### 🤝 Web sockets

15.[Socket.io](https://www.npmjs.com/package/socket.io)

Socket.IO enables real-time, bidirectional, and event-based communication. It works on every platform, browser, or device, focusing equally on reliability and speed.

16.[WS](https://www.npmjs.com/package/ws)

Simple to use, fast, and thoroughly tested WebSocket client and server implementation. A great, less abstract, and bare alternative to Socket.io.

### ✍ Loggers

17.[Morgan](https://www.npmjs.com/package/morgan)

Specifically, an HTTP request logger, storing HTTP requests and giving you concise insight into how your app is being used, and where there could be potential errors.

18.[Winston](https://www.npmjs.com/package/winston)

A logger for just about everything with support for multiple means of transport. Has been out there for longer than Morgan, it also has a bigger community of maintainers and more downloads.

### 💾 Database tools

19.[Mongoose](https://www.npmjs.com/package/mongoose)

Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment. Mongoose supports both promises and callbacks.

20.[Sequelize](https://www.npmjs.com/package/sequelize)

Sequelize is a promise-based Node.js ORM for Postgres, MySQL, MariaDB, SQLite and Microsoft SQL Server. It features solid transaction support, relations, eager and lazy loading, read replication and more.

### 🔓 Auth tools

21.[Passport](https://www.npmjs.com/package/passport)

Passport's purpose is to authenticate requests through an extensible set of plugins known as strategies. You provide Passport a request to authenticate, and Passport provides hooks for controlling what occurs when authentication succeeds or fails.

22.[Bcrypt](https://www.npmjs.com/package/bcrypt)

A library to help you hash passwords. Bcrypt is a password-hashing function designed by Niels Provos and David Mazières, based on the Blowfish cipher and presented at USENIX in 1999.

23.[JSONWebToken](https://www.npmjs.com/package/jsonwebtoken)

JSON Web Tokens (JWT) are an open, industry-standard RFC 7519 method for representing claims securely between two parties. This package allows you to decode, verify, and generate JWT.

### 🔧 Config modules

24.[Config](https://www.npmjs.com/package/config)

Settings are stored in configuration files within your application and can be overridden and extended by environment variables, command line parameters, or external sources.

25.[Dotenv](https://www.npmjs.com/package/dotenv)

Zero-dependency module that loads environment variables from a .env file into process.env.

### 📃 Static site generators

26.[Gatsby](https://www.npmjs.com/package/gatsby)

A modern site generator that creates fast, high-quality, dynamic React apps, from blogs to e-commerce sites to user dashboards. Great plugin ecosystem and templates.

27.[NextJS](https://www.npmjs.com/package/next)

NextJS first and foremost supports server rendering as well as statically generated content. You can also define serverless functions as API endpoints.

28.[NuxtJS](https://www.npmjs.com/package/nuxt)

NuxtJS is basically a NextJS alternative in Vue's ecosystem. NuxtJS's goal is to make web development powerful and performant with great developer experience in mind.

### 🌟Templating languages

29.[Mustache](https://www.npmjs.com/package/mustache)

Mustache is a logic-less template syntax. It can be used for HTML, config files, source code - anything. It works by expanding tags in a template using values provided in a hash or object.

30.[Handlebars](https://www.npmjs.com/package/handlebars)

Uses a template and an input object to generate HTML or other text formats. Handlebars templates look like a regular text with embedded Handlebars expressions. Handlebars is largely compatible with Mustache templates.

31.[EJS](https://www.npmjs.com/package/ejs)

EJS is a simple templating language that lets you generate HTML markup with plain JavaScript with a simple syntax, speedy execution, and easy debugging. EJS has a large community of active users, and the library is under active development.

### 📷 Image processing

32.[Sharp](https://www.npmjs.com/package/sharp)

A great module to convert large images in common formats to smaller, web-friendly JPEG, PNG and WebP images of varying dimensions.

33.[GM](https://www.npmjs.com/package/gm)

Thanks to the Node.js module GM you can use two popular tools for creating, editing, composing, and converting images - GraphicsMagick and ImageMagick directly from within your code.

34.[Cloudinary](https://www.npmjs.com/package/cloudinary)

Dedicated module to ease work with cloud service that offers a solution to a web application's entire image management pipeline.

### 📅 Date formatting

35.[DayJS](https://www.npmjs.com/package/dayjs)

DayJS is a fast and lightweight alternative to [MomentJS](https://www.npmjs.com/package/moment) (in maintenance mode since September, 2020). Uses similar API - if you have used MomentJS, you already know how to use most of DayJS.

36.[Luxon](https://www.npmjs.com/package/luxon)

If you like another light-weight alternative, with a slightly different API, Luxon might be the right choice for you.

### 🧙‍♂️ Data generators 

37.[Shortid](https://www.npmjs.com/package/shortid)

Creates amazingly short non-sequential url-friendly unique ids. Perfect for url shorteners, DB ids, and any other ids.

38.[Uuid](https://www.npmjs.com/package/uuid)

Handy tiny package to quickly and easily generate more complex universally unique identifiers (UUIDs).

39.[Faker](https://www.npmjs.com/package/faker)

Useful package for generating massive amounts of fake data in the browser and Node.js.

### ✅ Validators

40.[Validator](https://www.npmjs.com/package/validator)

Handy library of string validators and sanitizers. Lots of useful methods available, like `isEmail()`, `isCreditCard()`, `isDate()` and `isURL()`.

41.[Joi](https://www.npmjs.com/package/joi)

Powerful schema description language and data validator for JavaScript.

### 📧 Forms and emails

42.[Formik](https://www.npmjs.com/package/formik)

Formik is a popular open-source form library for React and React Native. It's easy to use, declarative, and adaptive.

43.[Multer](https://www.npmjs.com/package/multer)

Multer is a Node.js middleware for handling multipart/form-data, which is primarily used for uploading files.

44.[Nodemailer](https://www.npmjs.com/package/nodemailer)

Nodemailer is a module for Node.js applications to allow easy email sending. The project got started back in 2010, today it is the solution most Node.js users turn to by default.

### 🧪 Testing

45.[Jest](https://www.npmjs.com/package/jest)

Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It allows you to write tests with an approachable, familiar, and feature-rich API that gives you results quickly.

46.[Mocha](https://www.npmjs.com/package/mocha)

Mocha is a JavaScript test framework, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting while mapping uncaught exceptions to the correct test cases.

### 💫 Web scraping and automation

47.[Cheerio](https://www.npmjs.com/package/cheerio)

Cheerio is widely used for web scraping work and sometimes in automating the tasks. It pretty quick and fast as it is based on jquery. Cheerio wraps around Parse5 parser and is capable enough to parse any type of HTML and XML documents.

48.[Puppeteer](https://www.npmjs.com/package/puppeteer)

Puppeteer is widely used for automating browser tasks and can only work with google chrome headless browser i.e chromium. Puppeteer can also be used for web scraping tasks. It is much powerful and feature-rich compared to the Cheerio module.

### 🌷 Linters and formaters

49.[ESLint](https://www.npmjs.com/package/eslint)

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code. ESLint is completely pluggable, every single rule is a plugin and you can add more at runtime.

50.[Prettier](https://www.npmjs.com/package/prettier)

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

### 📦 Module bundlers and minimizers

51.[Webpack](https://www.npmjs.com/package/webpack)

A well-known and powerful module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

52.[HTML-Minifier](https://www.npmjs.com/package/html-minifier)

Lightweight, highly configurable, and well tested Javascript-based HTML compressor/minifier (with Node.js support).

53.[Clean-CSS](https://www.npmjs.com/package/clean-css)

Fast and efficient CSS optimizer for Node.js platform and any modern browser. Highly configurable and lots of compatibility modes.

54.[UglifyJS2](https://www.npmjs.com/package/uglify-js)

JavaScript parser, minifier, compressor and beautifier toolkit. It can take multiple input files and supports lots of configuration options.

### 👨‍💻 Process managers and runners

55.[Nodemon](https://www.npmjs.com/package/nodemon)

Simple monitor script for use during the development of a Node.js app. Useful for development, since it’s incredibly easy to restart and has file-watching enabled and baked in by default

56.[PM2](https://www.npmjs.com/package/pm2)

Production process manager for Node.JS applications with a built-in load balancer. More comprehensive and better for production. Gives you lots of parameters to tune/act on. 

57.[Concurrently](https://www.npmjs.com/package/concurrently)

Simple and straight to the point - useful tool for running multiple commands concurrently.

### 🚧 CLI and debuggers

58.[Commander](https://www.npmjs.com/package/commander)

Provides a fluent API for defining various aspects of CLI applications like the commands, options, aliases and help. Simplifies the creation of applications for the command line.

59.[Inquirer](https://www.npmjs.com/package/inquirer)

An easily embeddable and beautiful command-line interface for Node.js. Provides awesome inquiry session flow.

60.[Chalk](https://www.npmjs.com/package/chalk)

Chalk is an extremely simple library, created for one, simple purpose - styling your terminal strings.

61.[Debug](https://www.npmjs.com/package/debug)

A tiny JavaScript debugging utility. Simply pass a function the name of your module, and it will return a decorated version of console.error for you to pass debug statements to.

### 🧰 Utilities

62.[Lodash](https://www.npmjs.com/package/lodash)

A modern JavaScript utility library delivering modularity, performance & extras. Exposes many useful methods on JavaScript arrays, objects and other data structures.

63.[Underscore](https://www.npmjs.com/package/underscore)

Underscore provides lots of commonly used functional helpers as well as more specialized goodies: function binding, javascript templating, creating quick indexes, deep equality testing, etc.

64.[Async](https://www.npmjs.com/package/async)

Async is a utility module that provides straight-forward, powerful functions for working with asynchronous JavaScript.

### 🔩 System modules

65.[Fs-extra](https://www.npmjs.com/package/fs-extra)

Fs-extra contains methods that aren't included in the vanilla Node.js `fs` package like `copy()`, `remove()`, `mkdirs()`.

66.[Node-dir](https://www.npmjs.com/package/node-dir)

A module for some common directory and file operations, including for getting an array of files, subdirectories, and methods for reading and processing the contents of files.

67.[Node-cache](https://www.npmjs.com/package/node-cache)

A simple caching module that has set, get and delete methods and works a little bit like [memcached](https://memcached.org/). Keys can have a timeout (ttl) after which they expire and are deleted from the cache. 

### 🧷 Others:

68.[Helmet](https://www.npmjs.com/package/helmet)

Helps you secure your apps by setting various HTTP headers. It's Connect-style middleware, which is compatible with frameworks like Express.

69.[PDFKit](https://www.npmjs.com/package/pdfkit)

DFKit is a PDF document generation library for Node and the browser that makes creating complex, multi-page, printable documents easy. 

70.[CSV](https://www.npmjs.com/package/csv)

Comprehensive CSV suite combining 4 well-tested packages to generate, parse, transform and stringify CSV data.

71.[Marked](https://www.npmjs.com/package/marked)

Low-level compiler for parsing markdown without caching or blocking for long periods of time.

72.[Randomcolor](https://www.npmjs.com/package/randomcolor)

A tiny script for generating attractive random colors. You can pass an options object to influence the type of color it produces. 

73.[Pluralize](https://www.npmjs.com/package/pluralize)

This module uses a pre-defined list of rules, applied in order, to singularize or pluralize a given word. There are many cases where this is useful, such as any automation based on user input.

---

Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

73 Awesome NPM Packages for Productivity

For the last few months, I've been working on a personal portfolio. I've always believed that a separate portfolio is important for any dev since it connects you to future opportunities and it helps you to grow your network.

Today I deployed it on [madza.dev](https://madza.dev). There's still some stuff to improve, like testing browser compatibility, tweaking some UX, etc, so it's still a WIP, for sure. But hey, everyone has to start somewhere, right?

I tried to document everything during the process and thought it would be useful to share the planning phases, technical execution, and the major takeaways from the project.

## Planning
I've always liked to write, code, and do some music production in my spare time, so I wanted my portfolio to reflect all that. I came up with an idea to dedicate a separate space for each.

![Planning](https://cdn.madza.dev/uploads/2021/03/1616605355_1356x359.png)

On the UI/UX side, I wanted my portfolio to be simple, clean, and easy to navigate on both mobile and desktop devices. Also, the content should be easy to filter and search.

## Wireframing

Once I had identified the main purpose, content blocks, and features, I started to put my ideas on paper to come up with the blueprints of the layout.

### Landing

I believe that the landing area creates the first impression for the visitors, which further dictates whether or not they want to explore more of the site and get to know more about the developer.

I decided to display a short and concise introduction of myself, contact info, and some dev-related visuals to grab the visitor's attention.

![Landing Page](https://cdn.madza.dev/uploads/2021/03/1616508483_1356x707.png)

### Blog

Then I began to work on my content sections. I started by drawing a simplified wireframe for my blog. My aim was to list all my articles, sort them via tags and be able to browse them using the search component.

Since I knew my portfolio would be fully self-hosted (including all the content), I planned each title of the article to be a clickable link, which would then open the particular article for further reading.

![Blogs Page](https://cdn.madza.dev/uploads/2021/03/1616508600_1356x707.png)

### Projects

For my projects, I wanted to showcase all my websites, apps, and games. I also wanted to assure that the users are able to open external links to the projects, see source code, as well as read more about the projects.

Visitors should also be able to filter projects using the category tags as well as search for a specific project using the search component.

![Projects Page](https://cdn.madza.dev/uploads/2021/03/1616508654_1356x707.png)

### Music

In order to showcase my music, I wanted to design a music player with basic playback controls. So I came up with a player component with play, pause, next, previous, loop, shuffle, volume, time, progress bar, and playlist.

As in both previous pages, the tracks should be sorted across tags. Except I removed the search since I did not plan to include that many tracks, where it would be hard to find them by their title.

![Music Page](https://cdn.madza.dev/uploads/2021/03/1616508698_1355x707.png)

## Color Scheme
Next, I had to decide which colors to use to color my wireframes. I'm a fan of dark modes, so I knew I would go with some dark tones as dominant ones.

In order the give some accents, I had to pick another color shade, that gives contrast and looks nice. I decided to go with purple, as for me it has always worked well with very dark tones.

So I ended up with the following color scheme:

![Color Scheme](https://cdn.madza.dev/uploads/2021/03/1616508782_1356x334.png)

For anyone wondering - the light mode switch is something I have considered and might implement in the future.

## Fonts
I believe typography is a very important part of any website. And, as I've seen, it's also often undervalued for devs. Finding nice fonts that work well together can make a massive difference in both looks and ease of use.

I've always been a fan of rounded fonts, therefore I knew my main typography would be based on them. Tho, I included a couple of different families as well, to make a nice mixture.

[Varela Round](https://fonts.google.com/specimen/Varela+Round) - one of my favorite fonts. Easy for the eyes and nice-looking, so I chose it for headers and blog text.

![Varela Round Font](https://cdn.madza.dev/uploads/2021/03/1616607765_1000x106.png)

[Quicksand](https://fonts.google.com/specimen/Quicksand) - clean and relatively slim font. Fitted perfectly for sub-titles, card text, and component-level text.

![Quicksand Font](https://cdn.madza.dev/uploads/2021/03/1616607887_769x110.png)

[Poppins](https://fonts.google.com/specimen/Poppins) - quality and professional-looking font (out of those, that are free). I decided to use it for the hero area, logo, and navigation text.

![Poppins Font](https://cdn.madza.dev/uploads/2021/03/1616607996_822x119.png)

[Inter](https://fonts.google.com/specimen/Inter) - Simple and great-looking font. I used to give contrast to round fonts for description text and sub-headers.

![Inter Font](https://cdn.madza.dev/uploads/2021/03/1616608062_800x107.png)

## Designs

After I got all my blueprints done and I knew all the color tones and fonts I would use, finally, it was time to put everything together. 

### Landing

For the landing area, I highlighted the keywords, so it's easy to tell what I focus on right away. The contact button looked great on purple and made it stand out, so visitors would not have to spend time searching for ways to reach out.

I also ended up including an SVG animation from [Undraw.co](https://undraw.co/). I went a bit further and customized the color shades and added some animations to it using CSS. 

![Home Page](https://cdn.madza.dev/uploads/2021/03/1616510442_1920x937.png)

### Blog

For the blog section, I used panels, that are few shades lighter than the background. They looked nice and assured it's easier to distinguish between the articles.

I also included the post date and approximate reading time, as well as wrote a custom function to generate a preview of the article from the body.

![Blog Page](https://cdn.madza.dev/uploads/2021/03/1616510964_1902x918.png)

### Projects

I used a panel system for projects as well, to stay consistent and keep the theme thorough the portfolio. I also included the icons linking to external links.

Same as for the blog section, project titles looked great on white, while descriptions looked nice on darker shades to give some contrast.

![Projects Page](https://cdn.madza.dev/uploads/2021/03/1616510532_1920x937.png)

### Music

The music component was focused more on functionality and involved less text. Thus I found some nice icons on [Icons8](https://icons8.com/) and gave them great contrast to the background.

For playlist items, I used the same theme as for the headers and descriptions in the Blog and Project section, with the active track being highlighted.

![Music Page](https://cdn.madza.dev/uploads/2021/03/1616510559_1920x937.png)

## Content

At this point, I had all the main blocks of my portfolio designed. Tho, in the developer world, there is a belief, that the content is king.  That meant I had to work on the separate sections for the content to be opened. 

I came up with the wireframe displaying the title, details, hero image, body, and sharing options for the articles in the Blog and Project sections.

![Content Wireframe](https://cdn.madza.dev/uploads/2021/03/1616959769_1356x707.png)

Then I had to pick the colors I would use. Instead of going with my main black - purple color palette again, I decided I would go with something that would highlight the main HTML elements. 

![Content Color Scheme](https://cdn.madza.dev/uploads/2021/03/1616959835_1356x257.png)

Here is an example of one of my projects being displayed by using the color theme above. Notice just the `h3`, `ol`, and `a` elements are being used in this rather short example.

![Content Design](https://cdn.madza.dev/uploads/2021/03/1616959769_1208x1684.png)

## Tech stack

The portfolio is created using NextJS framework and based on Contentful to assist in content management. With exception of some Node utility packages for UX, the rest of the site is written from the ground up. 

### [NextJS](https://nextjs.org/)

![NextJS](https://cdn.madza.dev/uploads/2021/03/1616663439_997x264.png)

NextJS is a production-ready framework that allows developers to quickly create static and dynamic JAMstack websites and provide a layer of abstraction to aid in common tasks in traditional React apps.

Some of my favorite features include Static vs Server Side Rendering, Dynamic routing, Static file serving, Image optimization, CSS modules among many others.

### [Contentful](https://www.contentful.com/)

![Contentful](https://cdn.madza.dev/uploads/2021/03/1616609181_1552x403.png)

Contentful has been around for a long time and during that time has proven itself as a rock-solid CMS solution. Designing content models and managing the content is very straightforward.

With it we can use all the content types we would ever need - starting from simple Boolean values to Rich Text and Markdown fields.

### Extra modules
[Framer Motion](https://www.framer.com/motion/) is a React library for animations. It provides users with production-ready animations and a low-level API we can interact with to integrate these animations into your applications.

[Nprogress](https://ricostacruz.com/nprogress/) is used to display the load progress of the site. It works well with next-router and I thought it improved the overall UX of the site by a lot.

[Remark-highlight.js](https://github.com/remarkjs/remark-highlight.js) is used for code block highlighting on Blog posts and Project pages.

[React-share](https://www.npmjs.com/package/react-share) is a tiny package intended for exactly what the name implies - to share content across social media platforms. I used it on blog articles and project pages.

## Deployment

The source code is being stored on [GitHub](https://github.com). Usually, this is my preferred workflow as my code gets backed up and I get version history in case I need it sometime later.

![Github](https://cdn.madza.dev/uploads/2021/03/1616609777_1228x430.png)

From the GitHub repo, it's further deployed on [Vercel](https://vercel.com/) (formerly Zeit). This way the live site gets updated in real-time each time there is a new feature or a fix being pushed up on GitHub.

![Vercel](https://cdn.madza.dev/uploads/2021/03/1616663825_770x253.png)

Both services have been on top of the game and I chose the latter for the hosting as NextJS is their own product and their platform is specifically designed to support it in the first place.

## Final notes
This project definitely learned a couple of things for me. It has not only improved my overall dev skills but also helped me to understand what areas I care more about and where I want to be in the dev space.

From now on, I'm looking to work on new projects and add more content to my portfolio. I believe that quality over quantity is the right way to go, so I keep reminding myself to be patient.

Hopefully, you learned a thing or two and got some ideas or inspiration to build or re-design your own portfolio, as well. Be persistent and remember the best is yet to come!

---

Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

Hooray! I Created My First Portfolio!

Hooray! I Created my First Portfolio!

Companies usually want to test a specific area of knowledge. Quizzes are an engaging method to measure your expertise in the particular field.

That's why I created [DevQuizzes](https://quizzes.madza.dev), an online platform where you can test your knowledge across various DEV topics.

Over the last 6 months I read a lot of official documentation and studied dozens of tutorials to create the content basis for initial launch.

I ended up creating over 500 questions in 20 categories.

### Features
1. 500+ questions
2. Review Questions
3. Reward Badges
4. Save Progress
5. Submit and Edit
6. Top Contributors
7. Social Sharing

### Tech stack
The project is created using [NextJS](https://nextjs.org/).


DevQuizzes GIF

DevQuizzes

Creating a radio app was a project that I had in mind for quite a while. I have always felt a special connection to music. It has always inspired me and boosted my productivity.

It was initially meant as a pet project for personal use, but the more time I spent on it, the more it started to take shape of something the developer community could benefit from as well, so I decided to make it accessible for the public.

### Features
1. Change stations
2. Change backgrounds
3. Play/pause
4. Repeat track
5. Volume controls
6. Recent played list
7. Save last settings
8. Responsive design
9. Loading screen
10. Keyboard controls

### Tech stack
The project is created using [NextJS](https://nextjs.org/). The audio source is [SoundCloud API](https://developers.soundcloud.com/docs/api/explorer/open-api). Deployed on [Vercel](https://vercel.com).


Online radio with various genre stations to boost productivity.

DevTunes GIF

DevTunes FM

If you are a content creator, the chances are you have come across stretched, shrank, non-centered or pixelated images after the posting of your material. Those are mostly caused due to uploading images with a low resolution or inappropriate aspect ratio.

I came up with a solution, that allows you to forget about all the technical issues with resolutions and aspect ratios.

### Features

1. Image upload - Supported formats .JPG and .PNG
2. Presets - Currently there are 33 presets from 10 commonly used platforms
3. Custom mode - User is allowed to switch to custom resolutions
4. Ratio lock - User can lock any custom aspect ratio
5. Input validation - Informative warning messages for invalid inputs
6. Move tools - User can move the image around
7. Zoom tools - Zoom the image in or out to get the precise crops
8. Rotate tools - Rotate image clockwise or counter-clockwise by 45-degree increments
9. Transform image - Swap image on X or Y axis
10. Helper grid - Providing help for centering
11. Resolution data - Updated in real-time as you resize the crop window
12. Crop score - Real-time crop score of the fit for the target use
13. Image preview - The user is allowed to preview the crop
14. Reset - Reset image and crop windows as they were when the image was uploaded
15. Download - Download the image in .PNG and .JPG
16. Responsive - Use it on any device

### Tech stack
The project is created using [NextJS](https://nextjs.org/) and [Chakra-UI](https://chakra-ui.com/).

The project is under the [MIT](https://choosealicense.com/licenses/mit/) licence and the code is available on [GitHub](https://github.com/madzadev/cropper).

### Final notes

The full article on the making of the app can be read [here](https://madza.hashnode.dev/introducing-cropscore-an-image-cropper-for-content-creators).

Hi, I'm Madza!