DEV Community: Damian Piwowarczyk

Document Nodejs API with Swagger

Damian Piwowarczyk — Fri, 21 Jan 2022 15:29:55 +0000

What is an API?

API documentation is a technical manual, containing information on how to consume API and how to use it. Documentation also describes what type of data format API is expecting in request and what types are returned from it.

Why do we need API documentation?

As with every technology, there must be a guide to help understand others how to use it. API documentation helps people do understand what type of operation can be performed and what resources they can be accepted & retrieved. Swagger will help us to make our API easy to ready and test some of the functionality.

Today we will focus on creating a simple REST API and integrating swagger with Open API 3.0 specification. Our documentation will be available in a graphical form accessible through the browser and downloadable JSON format file. JSON file could be imported later to the API testing tool or Postman.
For this example, we will use nodejs with express.

What our API documentation will consist of?

Docs for GET, POST, PUT, DELETE
Description of resources
Endpoints and methods
Schema of Request/Response
Datatypes and parameters accepted
Examples

Lets get started!

├── controllers
│   └── hero.controller.js
├── index.js
├── package.json
├── routes
│   ├── hero.routes.js
│   └── index.js
└── swagger.js

In our directory npm init

npm install express swagger-jsdoc swagger-ui-express

In package.json we will add

"type":"module"

to enable ES6 modules.

In index.js we create basic express app and import our swagger config.

import express from 'express'
import router from './routes/index.js'
import swaggerDocs from './swagger.js'

const app = express()
const port = 5000

app.use(express.json())
app.use(router)

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
  swaggerDocs(app, port)
})

swagger.js contains our configuration.

import swaggerJsdoc from 'swagger-jsdoc'
import swaggerUi from 'swagger-ui-express'

const options = {
  definition: {
    openapi: '3.0.0',
    info: {
      title: 'Hero API',
      description: 'Example of CRUD API ',
      version: '1.0.0',
    },
  },
  // looks for configuration in specified directories
  apis: ['./routes/*.js'],
}

const swaggerSpec = swaggerJsdoc(options)

function swaggerDocs(app, port) {
  // Swagger Page
  app.use('/docs', swaggerUi.serve, swaggerUi.setup(swaggerSpec))

  // Documentation in JSON format
  app.get('/docs.json', (req, res) => {
    res.setHeader('Content-Type', 'application/json')
    res.send(swaggerSpec)
  })
}

export default swaggerDocs

Now we setup our API routes along with OpenAPI specification represented in YAML format. All fields in the specification are case-sensitive. For better accessibility & readability we will place specifications just above the API routes.

mkdir routes && cd routes
index.js

import express from 'express'
import heroRoutes from './hero.routes.js'
const router = express.Router()

/**
 * @openapi
 * /healthcheck:
 *  get:
 *     tags:
 *     - Healthcheck
 *     description: Returns API operational status
 *     responses:
 *       200:
 *         description: API is  running
 */
router.get('/healthcheck', (req, res) => res.sendStatus(200))

router.use(heroRoutes)

export default route

Our Hero API will consist of 4 requests.
GET, POST, PUT, DELETE
For each of requests we will write specification that will let API users know what type of input our API expect and what it returns along with response codes.
We will keep our logic separately in controllers directory.

import express from 'express'
import {
  getHeroesHandler,
  addHeroHandler,
  deleteHeroHandler,
  editHeroHandler,
} from '../controllers/hero.controller.js'

const router = express.Router()

/**
 * @openapi
 * '/api/heroes':
 *  get:
 *     tags:
 *     - Hero
 *     summary: Get all heroes
 *     responses:
 *       200:
 *         description: Success
 *         content:
 *          application/json:
 *            schema:
 *              type: array
 *              items:
 *                type: object
 *                properties:
 *                  id:
 *                    type: number
 *                  name:
 *                    type: string
 *       400:
 *         description: Bad request
 */

router.get('/api/heroes', getHeroesHandler)

/**
 * @openapi
 * '/api/hero':
 *  post:
 *     tags:
 *     - Hero
 *     summary: Create a hero
 *     requestBody:
 *      required: true
 *      content:
 *        application/json:
 *           schema:
 *            type: object
 *            required:
 *              - id
 *              - name
 *            properties:
 *              id:
 *                type: number
 *                default: 2
 *              name:
 *                type: string
 *                default: New Hero Name
 *     responses:
 *      201:
 *        description: Created
 *      409:
 *        description: Conflict
 *      404:
 *        description: Not Found
 */
router.post('/api/hero', addHeroHandler)

/**
 * @openapi
 * '/api/hero':
 *  put:
 *     tags:
 *     - Hero
 *     summary: Modify a hero
 *     requestBody:
 *      required: true
 *      content:
 *        application/json:
 *           schema:
 *            type: object
 *            required:
 *              - id
 *              - name
 *            properties:
 *              id:
 *                type: number
 *                default: 1
 *              name:
 *                type: string
 *                default: Hulk
 *     responses:
 *      200:
 *        description: Modified
 *      400:
 *        description: Bad Request
 *      404:
 *        description: Not Found
 */
router.put('/api/hero', editHeroHandler)

/**
 * @openapi
 * '/api/hero/{id}':
 *  delete:
 *     tags:
 *     - Hero
 *     summary: Remove hero by id
 *     parameters:
 *      - name: id
 *        in: path
 *        description: The unique id of the hero
 *        required: true
 *     responses:
 *      200:
 *        description: Removed
 *      400:
 *        description: Bad request
 *      404:
 *        description: Not Found
 */
router.delete('/api/hero/:id', deleteHeroHandler)

export default router

Next we will create functions responsible for handling incoming requests and returning appropriate data.

hero_controler.js

let heroes = [
  {
    id: 1,
    name: 'Batman',
  },
  { id: 2, name: 'Spiderman' },
]

export async function getHeroesHandler(req, res) {
  res.status(200).json(heroes)
}

export async function addHeroHandler(req, res) {
  if (heroes.find((hero) => hero.id === req.body.id)) {
    res.status(409).json('Hero id must be unique')
  }
  else{
    heroes.push(req.body)
    res.status(200).json(heroes)
  }
}

export async function deleteHeroHandler(req, res) {
  const index = heroes.findIndex((hero) => hero.id == req.params.id)
  if (index >= 0) {
    heroes.splice(index, 1)
    res.status(200).json(heroes)
  } else res.status(400).send()
}

export async function editHeroHandler(req, res) {
  const index = heroes.findIndex((hero) => hero.id == req.body.id)
  if (index >= 0) {
    heroes.splice(index, 1, req.body)
    res.status(200).json(heroes)
  } else res.status(400).send()

Now we can start our API with node index.js
and navigate to localhost:4000/docs to view our documentation or we can also get JSON format from localhost:4000/docs.json which can be used for testing or perhaps imported to POSTMAN.

To sum up, this is only a simple demo to demonstrate how to use swagger with OpenAPI 3.0 in our express application. I think the swagger is a great tool because it helps us to create clear and neat documentation, provide an excellent visual page for users who could effortlessly and quickly test API functionality themselves.

I hope this article was helpful to some of you guys. Thanks for reading!
Github repo

React & PDF Rendering

Damian Piwowarczyk — Sun, 09 Jan 2022 15:35:03 +0000

Portable Document Format (PDF) - developed 30 years ago still exists and is one of the most widely-used documents formats. There are many reasons why people still prefer to use them such as the widely supported document format which works is compatible with many devices and apps, and the content always remains the same format.

What is React-PDF ?

React-pdf lets us render documents on server and web.
It exports a set of React primitives that can be used to render things into documents easily and we can use CSS properties for styling and flexbox for layout. A list of supported primitives can be found here It supports rendering text, images, SVGs and many more.

What we going to build ?

Today we will be looking at how we can create and style PDF with react-pdf renderer. React-pdf package lets us create awesome looking PDFs using React. Its simple to use and the documentation is developer-friendly. We will create a simple application that dynamically updates our PDF-styled template which we render in DOM.

This example will show how you can render the document in DOM and how directly save the document into the file without the need of displaying it.

1. Setup



npx create-react-app app && cd app && yarn add @react-pdf/renderer

As in the time of writing tutorial react-pdf render need some extra dependencies and craco configuration.



yarn add process browserify-zlib stream-browserify util buffer assert @craco/craco

Change the scripts section in package.json as below:



  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

Next, create a new file in the root of the project
craco.config.js with



const webpack = require("webpack");

module.exports = {
  webpack: {
    configure: {
      resolve: {
        fallback: {
          process: require.resolve("process/browser"),
          zlib: require.resolve("browserify-zlib"),
          stream: require.resolve("stream-browserify"),
          util: require.resolve("util"),
          buffer: require.resolve("buffer"),
          asset: require.resolve("assert"),
        },
      },
      plugins: [
        new webpack.ProvidePlugin({
          Buffer: ["buffer", "Buffer"],
          process: "process/browser",
        }),
      ],
    },
  },
};



mkdir Components && cd Components && mkdir PDF && cd PDF && touch Preview.js && touch LeftSection.js && touch RightSection.js



├── App.css
├── App.js
├── index.js
├── PDF
│   ├── LeftSection.js
│   ├── Preview.js
│   └── RightSection.js
└── styles
    └── index.js

In our App.js we will create a state that updates on user input when changes are detected we will re-render our page.


 javascript
import Preview from './PDF/Preview'
import React, { useState } from 'react'
function App() {
  const [profile, setProfile] = useState({
    type: 'Profile',
    name: 'John Doe',
    profession: 'Junior Developer',
    profileImageURL: 'https://i.imgur.com/f6L6Y57.png',
    display: true,
    about: 'About...',
  })

  const handleChange = (name, value) => {
    setProfile({ ...profile, [name]: value })
  }

  return (
    <div
      style={{
        width: '100%',
        height: '100vh',
        display: 'flex',
      }}
    >
      <div style={{ width: '50%' }}>
        <div>
          <label>Name</label>
          <input
            name='name'
            defaultValue={profile.name}
            onChange={(e) => {
              handleChange(e.target.name, e.target.value)
            }}
          />
        </div>
        <div>
          <label>Profession</label>
          <input
            name='profession'
            defaultValue={profile.profession}
            onChange={(e) => {
              handleChange(e.target.name, e.target.value)
            }}
          />
        </div>
        <div>
          <label>ImageURL</label>
          <input
            name='profileImageURL'
            defaultValue={profile.profileImageURL}
            onChange={(e) => {
              handleChange(e.target.name, e.target.value)
            }}
          />
        </div>
        <div>
          <label>About</label>
          <input
            name='about'
            defaultValue={profile.about}
            onChange={(e) => {
              handleChange(e.target.name, e.target.value)
            }}
          />
        </div>
      </div>
      <Preview profile={profile} />
    </div>
  )
}

export default App

Preview.js
This will let us render a preview on half of the page and embed the Template document that we are about to create.
We also have PDFDownloadLink which can be used to download pdf without the need of rendering it in the DOM.



import React from 'react'
import { Document, Page, PDFViewer, PDFDownloadLink } from '@react-pdf/renderer'
import LeftSection from './LeftSection'
import { RightSection } from './RightSection'
import styles from '../styles'

const Preview = ({ profile }) => {
  return (
    <div style={{ flexGrow: 1 }}>
      <PDFViewer
        showToolbar={false}
        style={{
          width: '100%',
          height: '95%',
        }}
      >
        <Template profile={profile} />
      </PDFViewer>
      <PDFDownloadLink
        document={<Template profile={profile} />}
        fileName='somename.pdf'
      >
        {({ loading }) => (loading ? 'Loading document...' : 'Download now!')}
      </PDFDownloadLink>
    </div>
  )
}
// Create Document Component
const Template = ({ profile }) => {
  return (
    <Document>
      <Page size='A4' style={styles.page}>
        // We will divide our document into 2 columns
        <LeftSection profile={profile} />
        <RightSection about={profile.about} />
      </Page>
    </Document>
  )
}

export default Preview

We will also create folder with styles where we will keep stylesSheet for react-render primitives.



mkdir styles && cd styles && mkdir index.js

styles



import { StyleSheet } from '@react-pdf/renderer'

export default StyleSheet.create({
  page: {
    display: 'flex',
    flexDirection: 'row',
  },
  section_right: {
    margin: 10,
    padding: 10,
    paddingTop: 20,
    width: '75%',
  },
  section_left: {
    width: '25%',
    height: '100%',
    backgroundColor: '#084c41',
  },
  profile_container: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    marginTop: '20',
    marginBottom: '20px',
    height: '150',
    fontFamily: 'Helvetica-Bold',
  },
  name_text: {
    paddingTop: '10px',
    paddingBottom: '5px',
    fontSize: '14px',
    fontWeight: '900',
    color: 'white',
  },
  profession_text: {
    color: '#d1d5db',
    fontSize: '11px',
  },
  profile_img: {
    width: '60px',
    height: '60px',
    borderRadius: '90',
  },
  profile_line: {
    marginTop: '10px',
    width: '10%',
    height: '1px',
    backgroundColor: '#FFF',
    textAlign: 'center',
  },
})

LeftSection.js



import { View, Text, Image } from '@react-pdf/renderer'
import styles from '../styles'

export const Profile = ({ profile }) => {
  return (
    <View style={styles.profile_container}>
      <Image style={styles.profile_img} src={profile.profileImageURL} />

      <View
        style={{
          justifyContent: 'center',
        }}
      >
        <Text style={styles.name_text}>{profile.name}</Text>
      </View>
      <Text style={styles.profession_text}>{profile.profession}</Text>
      <View style={styles.profile_line} />
    </View>
  )
}

const LeftSection = ({ profile }) => {
  return (
    <View style={styles.section_left}>
      <Profile profile={profile} />
    </View>
  )
}

export default LeftSection

RightSection.js



import styles from '../styles'
import { View, Text } from '@react-pdf/renderer'

export const RightSection = ({ about }) => {
  return (
    <View style={styles.section_right}>
      <Text>{about}</Text>
    </View>
  )
}

Now you know it works you could create something yourself.

More functional example of a resume builder that I built is here.
Resume builder

To sum up, this is only a simple demo to demonstrate how the pdf renderer can be used with react. React pdf package very cool tool that could be used to create things like resume builders, invoicing templates or tickets or receipts, etc. These could be either generated based on the existing data or dynamically updated on user input like in the case of our simple demo.

I hope this article was helpful to some of you guys. Thanks for reading!
Github repo

Build Authentication with NextJS and NextAuth v4

Damian Piwowarczyk — Fri, 31 Dec 2021 02:13:08 +0000

Today we are going to build authentication example app using Nextjs and NextAuth. We will use a custom form and credential provider which will let us bring in effortlessly custom DB or endpoint for credential verification in our project. A Good boilerplate if you need authentication functionality with less code in your project.

What is NextAuth?
Is a complete open-source solution for the nextjs application. It’s designed to simplify handling multiple ways of handling user authentication for your application. It offers built-in support for authentication services such like OAuth, Google, and many more. NextAuth is also perfect solution for authentication with your database as it offers wide database support.

Demo

Project setup

yarn create next-app app && cd app

mkdir components && cd pages && touch login.js && cd api && mkdir auth

npm i next-auth axios

Lets start with editing _app.js
We will import SessionProvider and userSession

Session Provider will allow us to supply session data to our Components.
useSession client-side react hook which will let us determine if the user is authenticated and pull user data.

We will create Auth functional component which will allow us to determine whether user should be allowed to access certain pages or if the user needs to be redirected back to login.

import { SessionProvider, useSession } from 'next-auth/react'
import { useEffect } from 'react'
import { useRouter } from 'next/router'

export default function MyApp({ Component, pageProps: pageProps }) {
  return (
    <SessionProvider session={pageProps.session}>
      {Component.auth ? (
        <Auth>
          <Component {...pageProps} />
        </Auth>
      ) : (
        <Component {...pageProps} />
      )}
    </SessionProvider>
  )
}

function Auth({ children }) {
  const router = useRouter()
  const { data: session, status, token } = useSession()
  const isUser = !!session?.user
  useEffect(() => {
    if (status === 'loading') return // Do nothing while loading
    if (!isUser) router.push('/login') //Redirect to login
  }, [isUser, status])

  if (isUser) {
    return children
  }
  // Session is being fetched, or no user.
  // If no user, useEffect() will redirect.
  return <div>Loading...</div>
}

Now we'll create a dynamic API route to catch all paths from/api/auth as NextAuth by default will need access to these routes. The credential provider lets us implement the logic for user authorization, here we need our database or API to verify that user credentials are valid. Throwing an error will return a message to our login form. In this example for simplicity, I used a hardcoded user. We will use "jwt" an encrypted JWT (JWE) in the session cookie.

Create [...nextauth].js file under pages/api/auth by

import NextAuth from 'next-auth'
import CredentialsProvider from 'next-auth/providers/credentials'

//Api route function that is returned from next auth
export default NextAuth({
  providers: [
    CredentialsProvider({
      async authorize(credentials) {
        // credentials will to passed from our login form
        // Your own logic here either check agains database or api endpoint
        // e.g. verify password if valid return user object.
        const user = {
          id: 1,
          name: 'john',
          email: 'user@example.com',
          password: '12345',
        }
        if (
          credentials.email === user.email &&
          credentials.password === user.password
        )
          return user
        throw new Error('Incorrect Credentials') // This will be error message displayed in login form
      },
    }),
  ],
  callbacks: {
    // called after sucessful signin
    jwt: async ({ token, user }) => {
      if (user) token.id = user.id
      return token
    }, // called whenever session is checked
    session: async ({ session, token }) => {
      if (token) session.id = token.id
      return session
    },
  },
  secret: 'SECRET_HERE',
  session: {
    strategy: 'jwt',
    maxAge: 1 * 24 * 60 * 60, // 1d
  },
  jwt: {
    secret: 'SECRET_HERE',
    encryption: true,
  },
})

Now we will implement login.js
signIn function will call and pass user details to authorize. if credentials match user will be given access and redirected to '/' protected route.

import { signIn, useSession } from 'next-auth/react'
import { useRouter } from 'next/router'
import { useState, useRef } from 'react'

const Login = () => {
  const { status, loading } = useSession()
  const router = useRouter()
  const [error, setError] = useState(false)
  const emailRef = useRef()
  const passwordRef = useRef()

  if (status === 'authenticated') {
    router.push('/')
  }
  const loginHandler = async (e) => {
    e.preventDefault()
    const { error } = await signIn('credentials', {
      redirect: false,
      email: emailRef.current.value,
      password: passwordRef.current.value,
      callbackUrl: '/',
    })
    if (error) setError(error)
  }
  return (
    <>
      {status === 'unauthenticated' && (
        <>
          <p>{status}</p>
          <h3>{error}</h3>
          <h3>Log in</h3>
          <form onSubmit={(e) => loginHandler(e)}>
            <input placeholder='Email' name='email' ref={emailRef} />
            <input placeholder='Pasword' name='password' ref={passwordRef} />
            <input type='submit' />
          </form>
        </>
      )}
    </>
  )
}

export default Login

index.js In our index.js we set Dashboard.auth = true to mark this route as protected. So only authenticated users can access it.

import Navbar from '../components/Navbar'

export default function Dashboard() {
  return (
    <>
      <Navbar />
      <h1>secret dashboard</h1>
    </>
  )
}

Dashboard.auth = true

Lastly, we will create a Navbar with signout button which will let us destroy the session and redirect to the login page.

Navbar.js

import { signOut, useSession } from 'next-auth/react'

const Navbar = () => {
  const { data: session } = useSession()
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'row',
        width: '100%',
        backgroundColor: '#b91c1c',
      }}
    >
      <a>{session.user.name}</a>
      &nbsp;
      <button
        onClick={() => {
          signOut({ redirect: false })
        }}
      >
        Signout
      </button>
    </div>
  )
}
export default Navbar

To sum up, NextAuth is a powerful and flexible authentication solution with developer-friendly documentation. With NextAuth we can simplify user auth for our application and follow good practices and patterns.

I hope this article was helpful to some of you guys. Thanks for reading!

Github repo

Data visualisation with React and Nivo

Damian Piwowarczyk — Tue, 28 Dec 2021 09:00:56 +0000

Today I will walk you though how you can build interactive charts on your website with Nivo & React.

What is Nivo and why?

Nivo is an open-source React visualization library built on top of d3js. It allows for server-side rendering and supports svg, canvas, and HTML charts. Nivo provides 27 highly customizable char types. It has nice motion and trasitions and it is very responsive. Nivo documentation is developer-friendly and contains many examples/templates and storybooks.

In this tutorial, we will build PieChart that takes data from a file and renders SVG pie chart. We'll be able to change our chart based on selected values.

We going to use nextjs starter for this application.

npx create-next-app statsViewer && cd statsViewer && touch data.js && mkdir components && touch PieCharDemo.jsA

yarn add @nivo/core
yarn add @nivo/pie

Imported ResponsivePie component will take a large number of props as it needs specific styling and file with data. Except that the parent component will need a height and width set.
Beyond props used in this example, there is a bunch of other props that let us do pretty styling.

Let's edit PieChartDemo.js


import { ResponsivePie } from '@nivo/pie'

export const PieChartDemo = ({ data }) => (
  <div style={{ width: '600px', height: '500px' }}>
    <ResponsivePie
      data={data}
      margin={{ top: 40, right: 150, bottom: 80, left: 150 }}
      innerRadius={0.5}
      padAngle={0.7}
      cornerRadius={3}
      activeOuterRadiusOffset={8}
      borderWidth={1}
      borderColor={{ from: 'color', modifiers: [['darker', 0.2]] }}
      arcLinkLabelsSkipAngle={10}
      arcLinkLabelsTextColor='#333333'
      arcLinkLabelsThickness={2}
      arcLinkLabelsColor={{ from: 'color' }}
      arcLabelsSkipAngle={10}
      arcLabelsTextColor={{ from: 'color', modifiers: [['darker', 2]] }}
      valueFormat={(value) => `${Number(value)} %`}
      legends={[
        {
          anchor: 'bottom',
          direction: 'row',
          justify: false,
          translateX: 0,
          translateY: 56,
          itemsSpacing: 0,
          itemWidth: 90,
          itemHeight: 18,
          itemTextColor: '#999',
          itemDirection: 'left-to-right',
          itemOpacity: 1,
          symbolSize: 15,
          symbolShape: 'circle',
          effects: [
            {
              on: 'hover',
              style: {
                itemTextColor: '#000',
              },
            },
          ],
        },
      ]}
    />
  </div>
)

Here is data.js file that I look created based on data from hashnode. I took numbers and convert them to percentages instead.

const totalFollowers = 594.2
const totalMostPopularPosts = 434
const convertToPercent = (val, total) => {
  return ((val / total) * 100).toFixed(1)
}
export const data = {
  tagsByNumOfFollowers: [
    {
      id: 'General Programing',
      label: 'GP',
      value: convertToPercent(228.8, totalFollowers),
    },
    {
      id: 'JavaScript',
      label: 'JavaScript',
      value: convertToPercent(100.6, totalFollowers),
    },
    {
      id: 'Nodejs',
      label: 'Nodejs',
      value: convertToPercent(74.3, totalFollowers),
    },
    {
      id: 'React',
      label: 'React',
      value: convertToPercent(74.4, totalFollowers),
    },
    {
      id: 'Python',
      label: 'Python',
      value: convertToPercent(59.5, totalFollowers),
    },
    {
      id: 'CSS',
      label: 'CSS',
      value: convertToPercent(56.6, totalFollowers),
    },
  ],
  mostPopularPostsThisWeek: [
    {
      id: 'JavaScript',
      label: 'JavaScript',
      value: convertToPercent(134, totalMostPopularPosts),
    },
    {
      id: 'Web Dev',
      label: 'Web Dev',
      value: convertToPercent(97, totalMostPopularPosts),
    },
    {
      id: 'React',
      label: 'React',
      value: convertToPercent(60, totalMostPopularPosts),
    },
    {
      id: 'Dev Blogs',
      label: 'Dev Blogs',
      value: convertToPercent(46, totalMostPopularPosts),
    },
    {
      id: 'Python',
      label: 'Python',
      value: convertToPercent(60, totalMostPopularPosts),
    },
    {
      id: 'CSS',
      label: 'CSS',
      value: convertToPercent(37, totalMostPopularPosts),
    },
  ],
}

Lastly we import our PieChartDemo component and fed it with data. I used useState hook and wired it to select input so we rerender PieChart component and feed it other data.

import styles from '../styles/Home.module.css'
import { MyResponsivePie } from '../components/MyResponsivePie'
import { useState } from 'react'
import { data } from '../data'

export default function Home() {
  const [selected, setSelected] = useState('tagsByNumOfFollowers')

  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <select
          onChange={(e) => {
            setSelected(e.target.value)
          }}
        >
          <option value='tagsByNumOfFollowers'>Tags followed</option>
          <option value='mostPopularPostsThisWeek'>
            Most popular posts this week
          </option>
        </select>
        <MyResponsivePie data={data[selected]} />
      </main>
    </div>

To conclude, Nivo is a great library that has many components with out-of-the-box templates and rich documentation. The number of props maybe look overwhelming especially for beginners however, it gives us developers the power of customization that other chart libraries may be limited to.

I hope this article was helpful to some of you guys. Thanks for reading!

Github Repo

Node.js MongoDB - multi-tenant app by example

Damian Piwowarczyk — Wed, 22 Dec 2021 14:12:02 +0000

In my last post, I compared single-tenancy vs multi-tenancy software architecture. Today we will look at how we can build a simple application that will let us handle multiple tenant. We will go with clean nodejs, mongodb, and mongoose for object modeling.

Let's imagine we need to build an API that lets customers to log in and perform CRUD operations on their company databases. Our resources are limited, we need isolation for our customer's data and ability to scale quickly. Spinning up new application instances for each customer will cost too much time and effort. We want something that will allow us to add new clients easily.

We will look at how we could design such an application so we can isolate customer data and add new clients effortlessly. We will only go through a simple example that hopefully will let you understand how you could use this approach in your application.

npm i dontenv mongodb mongoose

touch app.js
Create self-executing function in app.js this will be our start.

;(async function main() {
  console.log(employees)
})()

mkdir services

create mongo.connect.js with services directory.
Now we going to import mongoose and dotenv
Then we going to create function that will return our initial connection to database.

import mongoose from 'mongoose'
import dotenv from 'dotenv'
dotenv.config()
const mongoOptions = {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  autoIndex: true,
  connectTimeoutMS: 10000,
  socketTimeoutMS: 30000,
}

function connectDB() {
  return new Promise((resolve, reject) => {
    const mongoURL = `mongodb://${process.env.MONGO_USER}:${process.env.MONGO_PASSWORD}@${process.env.MONGO_IP}:${process.env.MONGO_PORT}/?authSource=admin`
    mongoose
      .connect(mongoURL, mongoOptions)
      .then((conn) => {
        console.log('connected')
        resolve(conn)
      })
      .catch((error) => reject(error))
  })
}

export default connectDB

Great, now we have our connection to mongodb established. OK, how are we going to handle our connection to databases? The operation of closing and opening databases is very expensive so we will use a different approach. We have something called a connection pool in mongo client.

A connection pool is a cache of open, ready-to-use database connections maintained by the driver. Your application can seamlessly get connections from the pool, perform operations, and return connections back to the pool. Connection pools are thread-safe.

MongoDB client by default gives us pool size of 5, which means we can only perform 5 concurrent operations at the time. Other operations will have to wait until connection is returned to the pool. Lucky we can easily increase our pool size by passing it in our mongoOption config that we defined earlier.

Benefits of a Connection Pool
A connection pool helps reduce application latency and the number of times new connections are created.

A connection pool creates connections at startup. Applications do not need to manually return connections to the pool. Instead, connections return to the pool automatically.

Some connections are active and some are inactive but available. If your application requests a connection and there’s an available connection in the pool, a new connection does not need to be created.

The larger size of pools defined the more resource-hungry our database service will be.

Ok, lets create folder models and define employeeSchama.js and tenantSchema.js Tenant will represent our customers who will use the application. Each tenant will have a database where employeeSchema will be used as a blueprint for employee data.

import mongoose from 'mongoose'

const employeeSchema = mongoose.Schema({
  employeeId: {
    type: String,
    unique: true,
  },
  name: {
    type: String,
  },
  companyName: {
    type: String,
  },
})
export default employeeSchema

import mongoose from 'mongoose'

const tenantSchema = mongoose.Schema({
  name: {
    type: String,
  },
  email: {
    type: String,
  },
  password: {
    type: String,
  },
  companyName: {
    type: String,
    unique: true,
  },
})

export default tenantSchema

Now we can import everything in our app.js file

import connectDB from './services/mongo.connect.js'
import TenantSchema from './models/tenantSchema.js'
import EmployeeSchema from './models/employeeSchema.js'

// Indicates which Schemas are used by whom
const CompanySchemas = new Map([['employee', EmployeeSchema]])
const TenantSchemas = new Map([['tenant', TenantSchema]])


/** Switch db on same connection pool
 * @return new connection
 */
const switchDB = async (dbName, dbSchema) => {
  const mongoose = await connectDB()
  if (mongoose.connection.readyState === 1) {
    const db = mongoose.connection.useDb(dbName, { useCache:true })
    // Prevent from schema re-registration
    if (!Object.keys(db.models).length) {
      dbSchema.forEach((schema, modelName) => {
        db.model(modelName, schema)
      })
    }
    return db
  }
  throw new Error('error')
}

/**
 * @return model from mongoose
 */
const getDBModel = async (db, modelName) => {
  return db.model(modelName)
}

The following example does not contain checks if database exists, so once we pass db name that doesn't exist new database will be created

getDBModel will allow us to get the registered model for our db.

Lets write function to create our fake customers


const initTennants = async () => {
  const tenantDB = await switchDB('AppTenants', TenantSchemas)
  const tenant = await getDBModel(tenantDB, 'tenant')
  await tenant.deleteMany({})
  const tenantA = await tenant.create({
    name: 'Steve',
    email: 'Steve@example.com',
    password: 'secret',
    companyName: 'Apple',
  })
  const tenantB = await tenant.create({
    name: 'Bill',
    email: 'Bill@example.com',
    password: 'secret',
    companyName: 'Microsoft',
  })
  const tenantC = await tenant.create({
    name: 'Jeff',
    email: 'Jeff@example.com',
    password: 'secret',
    companyName: 'Amazon',
  })
}

call function in our main method

await initTennants()

Now we have a database with 3 customers in it.

Here is another function that will let check.

const getAllTenants = async () => {
  const tenantDB = await switchDB('AppTenants', TenantSchemas)
  const tenantModel = await getDBModel(tenantDB, 'tenant')
  const tenants = await tenantModel.find({})
  return tenants
}

Now we will create for each customer separated db with company name and create employee in each of them.

const initEmployees = async () => {
  const customers = await getAllTenants()
  const createEmployees = customers.map(async (tenant) => {
    const companyDB = await switchDB(tenant.companyName, CompanySchemas)
    const employeeModel = await getDBModel(companyDB, 'employee')
    await employeeModel.deleteMany({})
    return employeeModel.create({
      employeeId: Math.floor(Math.random() * 10000).toString(),
      name: 'John',
      companyName: tenant.companyName,
    })
  })
  const results = await Promise.all(createEmployees)
}

List of employees for each company database

const listAllEmployees = async () => {
  const customers = await getAllTenants()
  const mapCustomers = customers.map(async (tenant) => {
    const companyDB = await switchDB(tenant.companyName, CompanySchemas)
    const employeeModel = await getDBModel(companyDB, 'employee')
    return employeeModel.find({})
  })
  const results = await Promise.all(mapCustomers)
  return results
}

This is what will end up with.

Our main function should look like this

;(async function main() {
  await initTennants()
  await initEmployees()
  const tenants = await getAllTenants()
  const employees = await listAllEmployees()
  console.log(tenants)
  console.log(employees)
})()

Excellent, based of that example you could take it further and create a fully functional API where you could authenticate customers and let them pull data from their databases.

Thanks for reading.
if you learned something from it press like and I will create more similar content :)

Github repo

Multi-tenancy vs Single-tenancy application architecture

Damian Piwowarczyk — Mon, 20 Dec 2021 15:26:09 +0000

What is multi-tenancy?

Multi-tenancy is a software architecture that let a single software deployment serve multiple tenants. Application resources are shared among all tenants however, each tenant has guaranteed data isolation and privacy.

What is single-tenancy?

Single tenancy is an architecture that enables one tenant per instance of the software. Every new tenant will need new instance of application.

Pros and cons of multi-tenancy architecture

Pros:

Applications are easy to deploy
The application can be deployed and managed as one instance of software application. One instance of application could serve all customers.
Lower cost
Multi-tenancy architectures allow for efficient usage of compute and hardware resources as they all being shared which reduces overall cost.
Single software instance is much easier to maintain, secure, and optimize.
The multi-tenant application architecture is designed in such a way that it makes it much more efficient to manage.
Fast Scaling
Adding new customers should be effortless and achievable within a software application. It does require extra configuration or spinning new containers.

Cons:

Design & Development Designing a multi-tenant application may be challenging as it requires considering data segregation for a single entity and Cross tenant access where some tables may need to be accessed by multiple customers.
Higher Security Risk
In case of a data breach or security vulnerability, all customer data can be damaged.
More downtime
Multi-tenant application can experience more downtime.When the application is maintained or updated more customers may be affected by downtime.

Single-tenancy architecture pros and cons

Pros:

Improved Security
As single-tenant application lives in an isolated environment it is more secure and independent therefore, it increases customer's data protection.
Easy to restore & backups
In the single-tenant system, the tenant can manage updates by downloading and upgrading local applications. When configuring backups and recovery options, this model allows for better overall control. This lets manage client individual backups more efficiently as each backup can be done separately.
Individual Upgrades/Updates
The application can be upgraded/Updated separately without affecting other customers.
Self-Hosted migration - Tenant will have the option to migrate an application or change hosting provider. Software instances could be migrated from the cloud to on-premises if requested.

Cons

Resource underutilized
Often underutilized resources are a common issue when running multiple instances as each tenant needs a new software instance with allocated resources.
More effort to deploy
Single-tenant applications take more time to deploy, as each customer gets a separate instance running.
Higher costs
The cost of ownership and maintenance is a lot higher.
Number of instances grows quickly
Adding a new customer requires adding a new instance, which means more resources and more costs.
Difficult to manage
Maintaining, securing, and optimizing multiple software instances is difficult, and requires a much bigger team.

To sum up, both single tenancy and multi-tenancy architectures have their pros and cons. Security-wise single-tenant architecture is the preferred option. On the other hand, when cost-efficiency is highly considered by the business multi-tenant architecture is a better option. Multi-tenant application adds additional complexity and development effort as it needs to maintain metadata for each tenant. The initial development time of multi-tenant can be much longer compared to single-tenant application.

React & Formik & Tailwind Build elegant forms

Damian Piwowarczyk — Mon, 20 Dec 2021 08:54:29 +0000

In my last post, I went through building custom components with formik. Today we will build something more practical responsive login/registration page that uses formik components and tailwind styling. In the end, we will add yup validation schema that will enable effortless error handling. Hopefully, by the end, you will see how powerful the combination of these tools can be when building reusable pages/forms.

What is TailwindCSS and what is benefit of using it?

It is a collection of css utility classes, it allows to reduce your code and use standardised approach when designing.
Tailwind out of the box does not provide prebuilt components like bootstrap, materialui or other css libraries. Instead it let you to rapidly build your own components which can be lightweight and customizable.
Tailwind is for devs who what to build fast highly customizable stuff. Tailwind works well with JavaScript libraries.

What is Formik?

Formik is one of the most popular open-source form libraries for React & React Native. API is well documented and the library lets us choose whether we want to use formik components or utilize it with HTML elements.
Formik takes care of the repetitive and annoying stuff—keeping track of values/errors/visited fields, orchestrating validation, and handling submission—so you don't have to. This means you spend less time wiring up state and change handlers and more time focusing on your business logic.

This is what we are going to build

Large Screen

Small screen

1. Setting up the project

Install Next.js boilerplate

npx create-next-app app &&
cd app

Instal Formik & Yup

npm i formik && npm i yup

Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer &&
npx tailwindcss init -p

Once installation is completed navigate totailwind.config.js
and replace content with

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the @tailwind directives to your ./styles/globals.css file to include tailwind styles in our project.

@tailwind base;
@tailwind components;
@tailwind utilities;

2. Build Form components

Create files

mkdir components && cd components && touch LoginForm.js && touch RegisterForm.js

Formik out of the box comes with powerful wrappers <Form/> <Field/> <ErrorMessage/> we can directly hook up form elements to <Formik/> it will look at name attribute to match form elements. This will mean onSubmit and onChange methods don't need to be linked form/input manually. We pass predefined tailwind styles from the parent component to avoid repetition and keep our form file tidy.
LoginForm.js

import { Formik, Field, Form, ErrorMessage } from 'formik'
//import { loginSchema } from './validation/loginSchema'

export const LoginForm = ({styles}) => (
  <>
    <Formik
      initialValues={{
        email: '',
        password: '',
      }}
     // validationSchema={loginSchema}
      onSubmit={(values) => {
        alert(JSON.stringify(values, null, 2))
      }}
    >
      <Form>
        <label className={styles.label} htmlFor='Email'>
          Email
        </label>
        <Field className={styles.field} id='email' name='email' />
        <ErrorMessage component='a' className={styles.errorMsg} name='email' />
        <label className={styles.label} htmlFor='Email'>
          Password
        </label>
        <Field className={styles.field} id='password' name='password' />
        <ErrorMessage
          component='a'
          className={styles.errorMsg}
          name='password'
        />
        <div className='mt-8'>
          <button type='submit' className={styles.button}>
            Login
          </button>
        </div>
      </Form>
    </Formik>
  </>
)

Our registration form will look almost identical.
RegisterForm.js

import { Formik, Field, Form } from 'formik'

export const RegisterForm = ({styles}) => (
  <>
    <Formik
      initialValues={{
        name: '',
        email: '',
        password: '',
      }}
      onSubmit={(values) => {
        alert(JSON.stringify(values, null, 2))
      }}
    >
      <Form>
        <label className={styles.label} htmlFor='Name'>
          Full Name
        </label>
        <Field className={styles.field} id='name' name='name' />

        <label className={styles.label} htmlFor='Email'>
          Email
        </label>
        <Field className={styles.field} id='email' name='email' />

        <label className={styles.label} htmlFor='Password'>
          Password
        </label>
        <Field className={styles.field} id='Password' name='Password' />
        <div class='mt-8'>
          <button type='submit' className={styles.button}>
            Register
          </button>
        </div>
      </Form>
    </Formik>
  </>
)

3.Create Member Page

Now we going to create memberPage.js in pages. This will be common component for both Login and Register Form. We will use useState react hook to store info which form should be rendered for user. When user click Become member registration form will be render and when Back to login clicked we will render back login form.

import { useState } from 'react'
import { LoginForm } from '../components/LoginForm'
import { RegisterForm } from '../components/RegisterForm'

export const MemberPage = ({ brand, logoUrl }) => {
  const [isLogin, setIsLogin] = useState(true)
  return (
    <div className='flex flex-row w-full'>
      <div className='py-12 flex-1'>
        <div className='flex bg-white rounded-lg shadow-2xl overflow-hidden mx-auto max-w-sm lg:max-w-4xl'>
          <div
            className='hidden lg:block lg:w-1/2 bg-auto bg-no-repeat    '
            style={{ backgroundImage: `url(${logoUrl})` }}
          ></div>
          <div className='w-full p-8 lg:w-1/2'>
            <h2 className='text-2xl font-semibold text-gray-600 text-center'>
              {brand}
            </h2>
            <a
              onClick={() => {
                setIsLogin(!isLogin)
              }}
              className='flex items-center justify-center mt-4 text-white rounded-lg shadow-md hover:bg-gray-100'
            >
              <h1 className='px-4 py-3 w-5/6 text-center text-gray-600 font-bold'>
                {isLogin ? 'Become Member' : 'Back to Login'}
              </h1>
            </a>
            <div className='mt-4 flex items-center justify-between'>
              <span className='border-b border-red-700 w-1/5 lg:w-1/4'></span>
              <a
                href='#'
                className='text-xs text-center text-gray-500 uppercase'
              >
                {isLogin ? 'Login' : 'Register'}
              </a>
              <span className='border-b w-1/5 border-red-700 lg:w-1/4'></span>
            </div>
            {isLogin ? (
              <LoginForm styles={styles} />
            ) : (
              <RegisterForm styles={styles} />
            )}
          </div>
        </div>
      </div>
    </div>
  )
}

And finally we can go to index.js

import { MemberPage } from './memberPage'

export default function Home() {
  return (
    <main className='flex justify-center items-center w-screen h-screen'>
      <MemberPage
        brand={'Brand Name'}
        logoUrl='https://i.imgur.com/l1kG0LQ.png'
      />
    </main>
  )
}

Now last step is to define our validation schema so we can see error messages on invalid input.

Setup Directory

cd components && mkdir validation && touch loginSchema.js

loginSchema.js

import * as Yup from 'yup'
export const loginSchema = Yup.object().shape({
  email: Yup.string().email().required('Required'),
  password: Yup.string().required('Required').min(3, 'Too Short!'),
})

Now we can uncomment following lines from LoginForm.js

//import { loginSchema } from './validation/loginSchema'
// validationSchema={loginSchema}

Now we have good looking login and registration form. We could reuse it for other projects. Next step could be adding forgot password form, validation schema or tweaking styling.

Designing complex forms can be time consuming. I am sure that with this approach we can safe up a some time.

Thanks for reading! Hope this tutorial was helpful.
Stay tuned for next part where we will add redux and implement user authentication.

Github repo

React & Formik Build forms more efficiently

Damian Piwowarczyk — Thu, 16 Dec 2021 14:21:20 +0000

Re-usability and smart design are crucial aspects when building web applications. Planning earlier how the user interface can be broken into components and how components can be reused over different data will reduce spaghetti code and improve the structure of our application.

Building forms can be sometimes challenging. In this tutorial, I will describe how we can design reusable form components with the implementation of formik lightweight library which can help us to speed up the process of building forms for our application.

What is Formik

In this example we will build LoginForm with custom react components that will let you build. We utilise Formik to speed up process of building forms and yup to create validation schema. We will handle and display error messages based on our validation schema. We will use nextjs as boilerplate application.
Lets get started!

Create next.js project & install dependencies

npx create-next-app nextjs-formik &&
cd nextjs-formik && npm i formik && npm i yup

Project setup

mkdir components && cd components && mkdir Form && cd Form && touch InputField.js && touch LoginForm.js && FormLabel.js && mkdir validation && cd validation && touch loginSchema.js

We will start with creating InputField and FormLabel components that we will can be reused later in our application.

export const InputField = ({ id, type, style, onChange }) => (
  <>
    <input id={id} type={type} onChange={onChange} style={style}></input>
  </>
)

export const FormLabel = ({ text, style }) => (
  <>
    <label style={style}>{text}</label>
  </>
)

LoginForm

Now we will create create login form with Formik and our components

import { useFormik } from 'formik'
import { InputField } from './InputField'
import { FormLabel } from './FormLabel'
//import { loginSchema } from './validation/loginSchema'

const LoginForm = () => {
  const formik = useFormik({
    initialValues: {
      email: '',
      password: '',
    },
    //validationSchema: loginSchema,
    onSubmit: (values) => {
      // Once form submited ex. {Email: 'John@example.com', Password: 'secret'}
    },
  })
  return (
    <>
      <form id='loginform' onSubmit={formik.handleSubmit}>
        <FormLabel text='Email: ' />
        <InputField
          id='email'
          name='email'
          onChange={formik.handleChange}
          style={{ backgroundColor: 'gray' }}
        />
        <FormLabel style={{ color: 'red' }} text={formik.errors.email} />
        <br></br>
        <FormLabel text='Password: ' />
        <InputField
          id='password'
          onChange={formik.handleChange}
        />
        <FormLabel style={{ color: 'red' }} text={formik.errors.password} />
      </form>
      <button form='loginform' type='submit'>
        Login
      </button>
    </>
  )
}

export default LoginForm

Excellent! We just created our login form. Now we can add validation using yup a JavaScript schema builder that gives us the power to create custom validation schemas. Yup schemas will let us validate form input and with a combination of formik we can display errors based on rules that we specified in our schema object.
It's a good practice to keep validation schemas in separated files as it improves the readability of code.

Let add validation schema to loginSchema

import * as Yup from 'yup'
export const loginSchema = Yup.object().shape({
  email: Yup.string().email().required('Required'),
  password: Yup.string().required('Required').min(3, 'Too Short!'),
})

Now we can uncomment following

// import { loginSchema } from './validation/loginSchema'
// validationSchema: loginSchema

Last part is to go to pages/index.js

import LoginForm from '../components/Form/LoginForm'

export default function Home() {
  return (
    <div>
      <LoginForm />
    </div>
  )
}

This shows how we speed up form building process and save some time in the future.
By using our simple custom build react components we could extend it even further by adding additional props, styles that suit our needs.

In the next article, I will cover how we can add tailwind and style our forms.

Hope this tutorial was helpful. Thanks for reading!

github repo

Efficient way of building forms with React-Hook-Form

Damian Piwowarczyk — Tue, 14 Dec 2021 05:53:07 +0000

Building reusable forms can be sometimes challenging. In this tutorial, I will demonstrate how we can build reusable form components with the implementation of react useForHook.
We will use next.js boilerplate for this example.

React Hook Form

React Hook Form adopts the use of uncontrolled inputs using ref instead of depending on the state to control the inputs. This approach makes the forms more performant and reduces the number of re-renders.

The package is small in size and has zero dependencies. The API is well documented and provides a seamless experience to developers when working with forms. React Hook Form follows HTML standards for validating the forms using constraint-based validation API.

Create next.js project

npx create-next-app nextjs-useformhook &&
cd nextjs-useformhook && npm i react-hook-form

Project Setup

mkdir components && cd components && mkdir Form && cd Form && touch InputField.js && touch LoginForm.js

First, we will start with creating InputField component with some props and register function that will allow applying validation rules to our input element.

export const InputField = ({ label, register, type, error }) => (
  <>
    <label>{label}</label>
    <input
      style={{ background: 'gray' }}
      type={type}
      {...register(label)}
    ></input>
    <p>{error}</p>
  </>
)

Now we will look at implementing out LoginForm where we can reuse our InputField component.

import { useForm } from 'react-hook-form'
import { InputField } from './InputField'

export const LoginForm = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm()

// This will contain all form data once submit button is clicked.
  const onSubmit = (data) => {
    console.log(data)
    // {Email: 'John@example.com', Password: 'secret'}
  }

  register('Email', { required: { value: true, message: 'Email is required' } })
  register('Password', {
    required: { value: true, message: 'Password is required' },
  })
  return (
    <>
      <form id='loginForm' onSubmit={handleSubmit(onSubmit)}>
        <InputField
          label='Email'
          type='email'
          register={register}
          error={errors.Email?.message}
        />
        <InputField
          label='Password'
          type='password'
          register={register}
          error={errors.Password?.message}
        />
      </form>
      <button style={{ background: '#5757ff' }} type='submit' form='loginForm'>
        Login
      </button>
    </>
  )
}

To sum up, why use react-form-hook ?
React form hook can help save us time when creating complex forms, increase our application performance by preventing unnecessary re-renderings, and help to manage validation.

Github repo

File upload with React & NodeJS

Damian Piwowarczyk — Wed, 01 Sep 2021 15:51:31 +0000

Hi there,

Today I will briefly describe how to upload images/files from React front-end to NodeJS back-end using express and multer. I will omit all validations to keep it short & simple.

Frontend

We will use create react app as a boilerplate



mkdir imgUploadExample && cd imgUploadExample
npx install create-react-app frontend
```

&nbsp;
Once installation completed we should see App.js file in frontend folder.

We will start first with creating a simple form where we can upload our image. 


```javascript
return (
    <div className='App'>
      <h1>Upload to server</h1>
      {image.preview && <img src={image.preview} width='100' height='100' />}
      <hr></hr>
      <form onSubmit={handleSubmit}>
        <input type='file' name='file' onChange={handleFileChange}></input>
        <button type='submit'>Submit</button>
      </form>
      {status && <h4>{status}</h4>}
    </div>
  )
```

&nbsp;
We will need to create two functions 

**handleFileChange** -  triggered when file is uploaded, displays an image preview & stores our image data in the state.

**handleSubmit** - let us submit the image to the server.


```javascript
 function App() {
  const [image, setImage] = useState({ preview: '', data: '' })
  const [status, setStatus] = useState('')
  const handleSubmit = async (e) => {
    e.preventDefault()
    let formData = new FormData()
    formData.append('file', image.data)
    const response = await fetch('http://localhost:5000/image', {
      method: 'POST',
      body: formData,
    })
    if (response) setStatus(response.statusText)
  }

  const handleFileChange = (e) => {
    const img = {
      preview: URL.createObjectURL(e.target.files[0]),
      data: e.target.files[0],
    }
    setImage(img)
  }
```
 Once we start react app with npm run start we should see form with select & submit button.


![Alt text](https://i.imgur.com/EUad0B8.png"running server")


**Backend**

Now we going to create node application that will handle our POST request with image data send from the fronted. Once image is received it will save it our working directory.

To create new directory run command 


````bash
mkdir backend && cd backend && mkdir images
```


then we initialize our application with npm init 

We will install few required packages by running command


````bash
npm install express cors multer
```



**Our working directories should look like this**



````bash
├── backend
│   ├── app.js
│   ├── node_modules
|   ├── images
│   ├── package.json
│   └── package-lock.json
└── frontend
    ├── node_modules
    ├── package.json
    ├── public
    ├── README.md
    ├── src
    └── yarn.lock
```


**Multer** is a middleware that will let us handle multipart/form data sent from our frontend form.

**Cors** will let us accept cross origin request from our frontend to backend.



```javascript
const express = require('express')
const app = express()
const port = 5000
const cors = require('cors')
const multer = require('multer')

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'images/')
  },
  filename: (req, file, cb) => {
    cb(null, file.originalname)
  },
})

const upload = multer({ storage: storage })

app.use(cors())

app.post('/image', upload.single('file'), function (req, res) {
  res.json({})
})

app.listen(port, () => {
  console.log(`listening at http://localhost:${port}`)
})

```


We initialized multer storage, now received images will be stored at backend/images with original filename.

Start backend with 


````bash
 node app.js
```


 Go to the frontend & upload an image.

![Alt text](https://i.imgur.com/HJICsbH.png"upload OK")

Thanks for reading hope someone will find it useful :)

[Github repo](https://github.com/przpiw/imageUpload)