Instead of using WordPress to create my portfolio and/or blog, I decided to build it in Next.js because I am an epic developer. Also because I wanted to learn more about what a website is made of; how it is built. By the same vein, it is why I chose to integrate a headless CMS to power the site, even though I could (and did) simply put all the pictures and markdown files in the /public directory.

# Using Sanity as Headless CMS to Next.js Pages Router

Instead of using WordPress to create my portfolio and/or blog, I decided to build it in Next.js because I am an epic developer. Also because I wanted to learn more about what a website is made of; how it is built. By the same vein, it is why I chose to integrate a headless CMS to power the site, even though I could (and did) simply put all the pictures and markdown files in the /public directory.

This article is going to be a brief overview of how I setup and integrate Sanity as my headless CMS to my portfolio site.

## 1. Setting Up Sanity

After creating an account with Sanity, the next step is embedding Sanity Studio into my Next.js project. I started a new Sanity project with:

```jsx
// portfolio is the name of the Sanity project
npx sanity@latest init --env --create-project "portfolio" --dataset production
```

It asked a bunch of prompts that I just answered, most importantly the option to embed Sanity Studio into the project in a new directory, `/sanity`.

After the initialisation, Sanity created a `.env` file, which we need to rename to `.env.local` - just a Next.js thing so we can use `process.env.` to access it.

Navigating to `http://[localhost:3000](http://localhost:3000)/studio` will be met with a pop up, saying that `localhost:3000` should be added to CORS origin. Following the link and adding the link to the CORS settings of my Sanity project, navigating back to the Studio, and voila! My very own Sanity Studio is setup.

After following the Day One course in Sanity, I found myself creating a my first Sanity schema.

## 2. Configuring Schemas

Schemas are used to structure data in Sanity. I think of it as something similar to a JSON object, with extra meta-tags on them. The only schema I have is a `projectType`.

To initialise a custom schema, I created a new directory inside `/sanity` called `schemaTypes`. Created a `projectType.ts` in `/sanity/schemaTypes` and built the schema.

```tsx
import { defineField, defineType } from "sanity";

export const projectType = defineType({
    name: "project",
    title: "Project",
    type: "document",
    fields: [
        defineField({
            name: "title",
            type: "string",
            validation: (rule) => rule.required(),
        }),
        defineField({
            name: "slug",
            type: "slug",
            options: { source: "title" },
            validation: (rule) => rule.required(),
        }),
        defineField({
            name: "description",
            type: "string",
            validation: (rule) => rule.required(),
        }),
        defineField({
            name: "thumbnail",
            type: "image",
            validation: (rule) => rule.required(),
        }),
        // Sanity doesn't support markdown out of the box
        defineField({
            name: "markdownContent",
            type: "markdown",
        }),
    ],
});
```

In `defineField()`, `validation` is a function that returns a rule - in this case the fields are required for data entry. However, it is to note that markdown is not supported out of the box. Sanity uses `PortableText` specification to store their data. In order to store markdown (because all my content was created in markdown), I had to install a plugin from Sanity.

Simply run this command to install the plugin (and its peer dependency)

```tsx
npm install --save sanity-plugin-markdown easymde@2
```

Afterwards, add the plugin to the `sanity.config.ts` and the type “markdown” is available in `defineField()`.

```tsx
export default defineConfig({
    ...,
    plugins: [
        markdownSchema(),
        ...
        ,
    ],
});
```

Complete the new schema setup by adding it to `schema.ts`

```tsx
import { type SchemaTypeDefinition } from "sanity";
import { projectType } from "./schemaTypes/projectType";

export const schema: { types: SchemaTypeDefinition[] } = {
    types: [projectType],
};
```

After schemas are created, they can be viewed by opening the Sanity Studio, in this case `http://localhost:3000/studio`. Data can then be inserted into Sanity. Next up, let’s see how I use the data from Sanity to create the UI.

## 3. Populating the page with Sanity data

In `client.ts`, we can use a helper function recommended by Sanity.

```tsx
// helper function that only caches for 30s in dev. 
// in production, caches for an hour.
export async function sanityFetch<QueryResponse>({
    query,
    params = {},
    tags,
}: {
    query: string;
    params?: QueryParams;
    tags?: string[];
}) {
    return client.fetch<QueryResponse>(query, params, {
        next: {
            revalidate: process.env.NODE_ENV === "development" ? 30 : 3600,
            tags,
        },
    });
}
```

I used this helper function to fetch data from Sanity from inside of `getStaticProps()` of a page. This ensures that the page is compiled at build-time, and a snappier experience when navigating through the website.

 Other than the props of the data itself, I have put in `revalidate: 10` in the return object. This ensures that any update or changes to the content in Sanity is reflected in the webpage itself. Next will revalidate the cache every 10 seconds to check if the content of the page is up-to-date. If it is, the next time the page is requested, Next will serve the most updated page.

```tsx
export async function getStaticProps() {
    const GET_PROJECTS_QUERY = groq`*[_type=='project']{title, slug, description, thumbnail, markdownContent}`;
    const projects = await sanityFetch<GET_PROJECTS_QUERYResult>({
        query: GET_PROJECTS_QUERY,
    });

    return {
        props: {
            projects,
        },
		    revalidate: 10,
    };
}
```

You might notice that the `sanityFetch()` function uses a type. This type can be generated with `sanity typegen generate` using the Sanity CLI. I am not covering it in this article, though I highly recommend checking it out yourselves [here.](https://www.sanity.io/docs/sanity-typegen)

Now, we need to take the `projects` prop in the page component itself, and parse the data.

```tsx

interface Props {
    projects: Project[];
}

export default function Home({ projects }: Props) {
    return (
        <>
         ...
		    <div className='projects-grid'>
              {/* List of Projects */}
              {projects.map((project) => (
                  <ProjectItemCard
                      project={project}
                      key={project.title}
                  />
              ))}
          </div>
          ...
        </>
    );
}
```

## 4. Wrapping-Up

So that’s how I used Sanity to back my portfolio! This project entry will be sent to Sanity, and if this is live, Sanity has fully integrated into my website. My experience with Sanity has been great - everything is quite straightforward, and the documentation is ample. Then again, my current website does not require a lot of data manipulation or complex **groq** queries. Be sure to check my [Github](https://github.com/shawnanuptra/shawn-am) for more insight!

Sanity as Headless CMS to Next.js Pages Router

When developing my portfolio, I wanted to have a section of the website just for me. An admin side, so to speak. While I have used Firebase before, I wanted to explore new technologies that I have not used before. Since the portfolio is built on top of Next.js, I decided to use NextAuth (v4) for this project.

# Using NextAuth in Next Pages Router

When developing my portfolio, I wanted to have a section of the website just for me. An admin side, so to speak. While I have used Firebase before, I wanted to explore new technologies that I have not used before. Since the portfolio is built on top of Next.js, I decided to use NextAuth (v4) for this project.

It’s important to note that this project would be using the `/pages` directory, instead of `/app`.

## Installation

```jsx
	npm install next-auth
```

## Add `[...nextauth.ts]`

In `/pages/api`, add `/auth/[...nextauth.ts]`. Here, I initialised and configured `NextAuth()` itself.

```jsx
import NextAuth from "next-auth/next";
import GithubProfile from "next-auth/providers/github";

export default NextAuth({
    providers: [
        GithubProfile({
            clientId: process.env.GITHUB_ID as string,
            clientSecret: process.env.GITHUB_SECRET as string,
        }),
    ],
    callbacks: {
        // only allow sign in from my email
        async signIn({ user }) {
            if (user.email == "shawnanuptraamartin@gmail.com") {
                return true;
            } else {
                return false;
            }
        },
    },
    secret: process.env.NEXTAUTH_SECRET as string,
});

```

I configured `NextAuth` properties: `providers`, `callbacks`, and `secret`. The `providers` options is used to configure the different ways to authenticate users. Google, Twitter, Discord, and many more are available. I chose Github because I am a well respected developer, and definitely not because my mentor suggested it.

The `callbacks` option basically states callback functions that are called after an action was run. I only used the `signIn` callback as an authorisation tool - ensuring only one email can be used to sign in and access the page. `return true` to continue the auth flow, `return false` will bring up the default error page.

While it is not needed in development, the `secret` option is essential in production as it will not complete the build process without it. It is used to encrypt JWTs and hash email tokens.

The use of `process.env` variables is used so that I do not expose my keys. It’s never fun to have someone else use your keys.

## Implementation

Firstly, we need to wrap the entire app with `<SessionProvider>` with the prop `session`.

```jsx
import Layout from "@/components/layout";
import { GlobalStyles } from "@/components/styles";
import { Session } from "next-auth";
import { SessionProvider } from "next-auth/react";
import type { AppProps } from "next/app";

export default function App(
    { Component, pageProps }: AppProps,
    session: Session
) {
    return (
        <SessionProvider session={session}>
            <Layout>
                <GlobalStyles />
                <Component {...pageProps} />
            </Layout>
        </SessionProvider>
    );
}
```

The `<SessionProvider>`  allows sessions to be shared between browser tabs. However, it is to note that the `session` prop will need to be populated later.

Now the fun part: using it in the UI!

```jsx
import { signIn, signOut, getSession, GetSessionParams } from "next-auth/react";
import { useRouter } from "next/router";

const Login = ({ session }: any) => {
    if (session?.user?.email) {
        return (
            <div>
                Signed in as {session?.user?.email} <br />
                <button onClick={() => signOut()}>Sign out</button>
            </div>
        );
    } else {
        return (
            <div>
                <button onClick={() => signIn()}>Sign in</button>
            </div>
        );
    }
};

export default Login;

export async function getServerSideProps(ctx: GetSessionParams | undefined) {
    const session = await getSession(ctx);
    return { props: { session } };
}
```

When `/admin` is first loaded, since there are no sessions, the page will render the Sign in button. After clicking the button and invoking `signIn()` , the user will be redirected to a sign in page auto generated by NextAuth. After the sign in process, when the user is redirected back to `/admin`, the `async signIn()` that was configured in `callbacks` before was invoked, determining if the current user is able to access the page.

If the user is successfully signed in and redirected to the page, the page will need reload to load new information (a new session object). I mentioned before that the `SessionProvider` will need to be populated; since the page contains dynamic content (based on user authorisation), we need to implement Server Side Rendering (SSR), or the page won’t work properly. This is why we have `export async function getServerSideProps()`.

By using `getServerSideProps()`, we are telling Next.js to fetch some data before rendering and sending the HTML back to the browser. In this case, getting the `session` object. This `session` object is passed and accessed in the `Login()` component through the props.

This can also be seen in `/admin/dashboard` below.

```jsx
import { getSession, GetSessionParams } from "next-auth/react";
import React from "react";

const Dashboard = ({ session }: any) => {
    return (
        <div>
	          Dashboard
        </div>
    );
};

export default Dashboard;

export async function getServerSideProps(ctx: GetSessionParams | undefined) {
    const session = await getSession(ctx);
    // if no session, redirect to home
    if (!session) {
        return {
            redirect: {
                destination: "/",
                permanent: false,
            },
        };
    }
    return { props: { session } };
}
```

Note in the above code that there are extra functionalities in `getServerSideProps()`. This just means that the user will be redirected if the page is accessed before the session object is created.

And now you’re all set! Time to push to production!

## Pushing 🅿️(roduction)

Using Vercel as a host makes the process of pushing to production really easy. Just connect your Github account with Vercel, and you can deploy any of your public repository. There are a few things to keep in mind:

1. Remember to change / add the URL of your deployed site to your auth provider! I used Github for my project, and I created a production-only app since Github only allows one domain and authorised callback url.
2. When deploying in Vercel, your main domain name is [https://www.your-domain.com](https://www.your-domain.com). **Please take note of the www!!!** It took me 3 days of work to figure this out. Don’t make the same mistake as I did and make sure all your authorised callback urls contains the www.

## Conclusion

We have gone through the process of implementing authentication and authorisation with NextAuth with Next.js. The process is relatively straightforward (at least with Github), as long as the correct configuration steps are followed. 

Now you can go and make your own authenticated websites! Goodluck and have fun 🥳🥳

### P.S.

It’s very annoying to use NextAuth in preview branches in Vercel. The build constantly fails, and I have no intentions of using other methods to authenticate. It might just be an OAuth thing instead, though.

NextAuth in Next.js Pages Router

A simple web-based game that uses vanilla JavaScript to run.

# Flappy Bird Clone!

[https://github.com/shawnanuptra/flappy-bird-ripoff](https://github.com/shawnanuptra/flappy-bird-ripoff)

A simple web-based game that uses vanilla JavaScript to run.

This project consists of only 3 files - the index.html, style.css, and script.js

<video
src='/flappy-bird-clone/flappy_bird_muted.mp4'
width='100%'
height='auto'
controls

> </video>

## Index.html

The index.html is served as the ‘canvas’ of the game. It consists of all the elements in the game, such as the #game boundaries itself, #pipes for the moving pipe in Flappy Bird, #character for the player hitbox.

```html
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Flappy Bird</title>
        <link rel="stylesheet" href="style.css" />
        <link
            href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
            rel="stylesheet"
        />
    </head>
    <body style="text-align: center;">
        <br /><br /><br /><br /><br /><br />

        
        <div id="game">
            
            <div id="pipes"></div>
            
            <div id="hole"></div>
            
            <div id="character"></div>
            <div id="text">
                CLICK <br />
                OR <br />
                SPACEBAR <br />TO START
            </div>
        </div>

        <div id="title" style="margin: 20px;">
            <h1>
                <span>SCORE: </span>
                <span id="score">0</span>
            </h1>
        </div>
    </body>
    <script src="script.js"></script>
</html>
```

## Style.css

This is where all the styling of the HTML elements are set. Game boundary, character and pipe stylings, and text styling. Animations are also configured here!

```jsx
* {
    ...,
    touch-action: manipulation;
}
```

Setting touch-action to **manipulation** disallows the use of double-tap to zoom. Disabling double-tap to zoom removes the delay of click events when the user taps the screen, leading to a more responsive game.

```scss
@keyframes pipes {
    0% {
        left: 400px;
    } /*during start, position of #pipes is left:400px*/
    100% {
        left: -50px;
    } /*at the end, position of #pipes is left: -50px,
    because the width of the pipes is 50px,
    so the position has to be 50px less than 0, in order for the pipe to 'disappear'*/
}

@keyframes fadeAnimation {
    0% {
      opacity: 100%;
    }
    50% {
      opacity: 100%;
    }
    75% {
      opacity: 0%;
    }
    100% {
      opacity: 100%;
    }
}
```

Above are the animations that are used in the project. **Pipes** are used for both #hole and #pipes, as they will need to move together and overlap in the game, in order to give the effect of a 2 pipes (top and bottom) with a hole in the middle.

## Script.js

This is where all the game logic and states are stored. There are 3 main functions that used: **jump(), animationIteration(),** and **startGame().**

Jump() is used to calculate the position of the #character when they click on the screen, and execute the changing of the #character position relative to time.


```js
function jump() {
    let characterTop = parseInt(
        window.getComputedStyle(character).getPropertyValue("top")
    );

    //if it is currently jumping, clear the previous Interval, and the next jumpInterval will be made
    //allows to jump while jump animation is not done. clearInterval clears the previous jump information, frame=0 resets the jump animation
    if (jumping) {
        clearInterval(jumpInterval);
        jumpFrame = 0;
    }

    //set jumping flag as true
    jumping = true;

    //setInterval in 60fps (updates 1000/60ms once)
    jumpInterval = setInterval(() => {
        //when animation first starts (frame == 0), use characterTop as jump 'starting point'
        //after frame > 0, use prevCharTop as jump 'starting point'
        if (jumpFrame == 0) {
            character.style.top =
                easeOutCubic(jumpFrame / 60, characterTop, -70, 0.3) + "px";
            prevJumpCharTop = characterTop;
        } else {
            character.style.top =
                easeOutCubic(jumpFrame / 60, prevJumpCharTop, -70, 0.3) + "px";
        }

        //increments the frame, so easeOutCubic can return a different value
        jumpFrame++;

        //stop jumping after animation is done (length of jump = 20 frames)
        if (jumpFrame >= 20) {
            //set jumping flag to false
            jumping = false;
            //stop the jumpInterval (stopping the jumping animation)
            clearInterval(jumpInterval);
            //resets the frame to 0
            jumpFrame = 0;
        }
    }, 1000 / 60);
}
```

AnimationIteration() is used to randomise the position of the #hole, and increasing the score everytime the #character successfully goes through the #hole.

```jsx
function animationIteration() {
    // we want hole.style.top range from -450 until -200
    // this is so that the hole is always inbetween the pipes (visually)
    let random = -(Math.random() * 250 + 200);
    hole.style.top = random + "px";
    //increment the score after the character has passed the hole, aka new pipes animation iterates
    score++;
    scoreOutput.innerHTML = score;
}
```

StartGame() is used to process user input (spacebar or click). If it’s during a game, jump(). If the game’s over, reset all states to initial starting screen and state. If it’s in the initial state, start game logic. This includes starting gravity logic, clearing start screen text, initiating pipe animations, and hitbox logic to end the game if the #character hits the pipe or the bottom.

```jsx
function startGame() {
    //if game is running, run jump();
    if (gameState === 1) {
        jump();
    }
    //if game is in starting screen,
    else if (gameState === 0) {
        //set game to state 1, to signal it's starting to run
        gameState = 1;
        //RESET TO NEW GAME SETTINGS
        score = 0;
        gravFrame = 0;
        prevGravCharTop = 250;
        //clear the board
        text.innerHTML = "";
        //start the animation
        pipes.style.animation = "";
        hole.style.animation = "";
        // addEventListener to #hole, so an anonymous function will be triggered to randomize the position of #hole
        hole.addEventListener("animationiteration", animationIteration);

        //GRAVITY FUNCTION PART OF THE CODE
        startInterval = setInterval(() => {
            // get the value of the 'top' property of the character
            let characterTop = parseInt(
                window.getComputedStyle(character).getPropertyValue("top")
            );

            //if currently not jumping
            if (jumping === false) {
                //set new character style top value. adding the top value will move the element down => 'gravity'
                //use prevGravCharTop as 'a point where the char starts falling'
                character.style.top =
                    easeInQuad(gravFrame / 60, prevGravCharTop, 500, 1.15) +
                    "px";
                //increments gravFrame to continue animation. easeInQuad will return diff values everytime setInterval is run
                gravFrame++;
            }
            //when it's jumping, set the prevGravCharTop to the most updated position of the char, characterTop.
            //resets the gravity animation, gravFrame = 0;
            else {
                prevGravCharTop = characterTop;
                gravFrame = 0;
            }

            //HIT DETECTION PART OF THE CODE
            let pipesLeft = parseInt(
                window.getComputedStyle(pipes).getPropertyValue("left")
            );
            let holeTop = parseInt(
                window.getComputedStyle(hole).getPropertyValue("top")
            );
            let cTop = -(500 - characterTop);

            //if character 'hits' the bottom of game div, go to gameState 2
            //OR
            //if character 'hits' the pipes, go to gameState 2
            //if pipes.left < char.width AND pipes.left < -pipes.width+char.width AND (cTop is taller than holeTop OR cTop is shorter than lowerHoleTop-char.height)
            if (
                characterTop >= 470 ||
                (pipesLeft < 50 &&
                    pipesLeft > -20 &&
                    (cTop < holeTop || cTop > holeTop + 150 - 30))
            ) {
                pipes.style.animation = "none"; //stops the animation
                hole.style.animation = "none"; //stops the animation

                text.innerHTML = "GAME OVER <br><br>TRY AGAIN?";
                //disables fadingAnimation
                text.style.animation = "none";
                //sets gameState = 2;
                gameState = 2;
            }
        }, 1000 / 60);
        jump(); //jump new game is starting
    } else {
        //if gameState = 2, and startGame() is invoked:
        //set to main screen settings
        text.innerHTML = "CLICK<br>OR<br>SPACEBAR<br>TO START";
        text.style.animation = "";
        //RESET TO DEFAULT SETTINGS
        //resets the position of the character, and score
        score = 0;
        scoreOutput.innerHTML = score;
        character.style.top = "50%"; //resets the char position
        gravFrame = 0; //resets the gravity
        clearInterval(jumpInterval);
        jumping = false;
        prevGravCharTop = 250;
        jumpFrame = 0;
        clearInterval(startInterval);
        hole.removeEventListener("animationiteration", animationIteration);
        //sets gameState = 0;
        gameState = 0;
    }
}
```

Flappy Bird Clone

This project is about making an API to access a local data. The API works within a Node.js application wrapped in Express. An automatic API doc was also used using auto-generated documentation by APIDOC (apidocjs.com)

# API in Express App

[https://github.com/shawnanuptra/task2](https://github.com/shawnanuptra/task2)

This project is about making an API to access a local data. The API works within a Node.js application wrapped in Express. An automatic API doc was also used using auto-generated documentation by APIDOC (apidocjs.com)

<iframe src="https://www.youtube.com/embed/VAVmIMOsLzk" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>

## Setting Up Express

Using the official Express documentation, getting the server setup is straightforward. Simply create a new directory, execute **_npm init_**, and follow the instructions on the terminal. In this project, the entry point will be **_index.js_**, and we will create the API itself in a different file, by creating **_api.js_**.

In the directory, install Express by running **_npm install express._** After it finishes installing, we will start setting up **_api.js_** and the entry point of the app, **_index.js_**.

The database that we can access is called **_assetsDB.db,_** an SQLite database. We have to put it inside the **/src** directory. To access the SQLite database, we need to install a module to interact with the database by **_npm install sqlite3._**

**_Multer_** will also be used as _middleware,_ and we install the module by **_npm install multer_**.

## Setting Up the API

In **_index.js_**,

```jsx
const app = require("./api");

//listening at port 3000: access through web browser
app.listen(3000);
console.log("App up and running at port 3000");
```

In **_api.js_**,

First, we initiate the Express app, sqlite3, and Multer

```jsx
const express = require("express");
const app = express();

const sqlite3 = require("sqlite3").verbose();
const db = new sqlite3.Database("./assetsDB.db");

const multer = require("multer");
const upload = multer();
```

And for **app** module to be able to imported in **_index.js_**, it needs to be exported.

```jsx
module.exports = app;
```

## API Endpoints

Express offers CRUD (Create, Read, Update, and Delete) operations using 4 keywords:

1. **post** for create
2. **get** for read
3. **put** for update
4. **delete** for delete

Building API endpoints is basically exposing these CRUD operations to users, so they can use the database to their liking without risking the data in the database. In other words, making CRUD operations cleaner and simpler.

For example, to get all the data from the assets, we can create an endpoint ‘/assets’

```jsx
app.get("/assets", (req, res) => {
    db.all("select * from assets", (err, rows) => {
        //prints error, if err is not null
        err && console.log(err.message);

        //show results, or message if there are none
        rows ? res.jsonp(rows) : res.send("No assets registered");
    });
});
```

When accessing this endpoint, it will show all the assets in a JSON format, or ‘No assets registered’ when there are no assets in the database.

We are also able to use parameters, for example to search a specific asset using its id.

```jsx
app.get("/assets/:id", (req, res) => {
    const id = req.params.id;
    db.get(`select * from assets where id = ${id}`, (err, rows) => {
        //prints error, if err is not null
        err && console.log(err.message);

        //show results, or message if there are none
        rows ? res.jsonp(rows) : res.send("No assets with specified id");
    });
});
```

To add a new asset to the database, we use the **post** function.

```jsx
app.post("/add", upload.array(), (req, res) => {
    //get from POST form fields
    const type = req.body.type;
    const location = req.body.location;

    db.run(
        "insert into assets (type, location) values (?, ?)",
        type,
        location,
        (error) => {
            if (error) {
                console.log(error);
                res.status(500);
            } else {
                res.status(201);
            }
            res.end();
        }
    );
});
```

This is the same with using **put** for updating a specific asset, and **delete** to delete a specific asset.

```jsx
// update specific id
app.put("/assets/:id", upload.array(), (req, res) => {
    const id = req.params.id;
    //get from POST form fields
    const type = req.body.type;
    const location = req.body.location;

    db.run(
        "update assets set type=?, location=? where id=?",
        type,
        location,
        id,
        (error) => {
            if (error) {
                console.log(error);
                res.status(500);
            } else {
                res.status(200);
            }
            res.end();
        }
    );
});

// delete specific id
app.delete("/assets/:id", function (req, res) {
    const id = req.params.id;

    db.run("DELETE from assets WHERE id=?", id, (error) => {
        if (error) {
            console.err(error);
            res.status(500); //error
        } else {
            res.status(204); //deleted
        }
        res.end();
    });
});
```

This Express app will also contain an API for a search function. This will made of a switch case with redirects based on the parameters of the endpoint.

```jsx
app.get("/search", (req, res) => {
    //get the type and location params
    const type = req.query.type || null;
    const location = req.query.location || null;

    //logic based on type and location params
    switch (true) {
        //if type and location is not null
        case type !== null && location !== null:
            db.all(
                `select * from assets where upper(type) like upper('%${type}%') AND upper(location) like upper('%${location}%')`,
                (err, rows) => {
                    //show results, or message if there are none
                    rows
                        ? res.jsonp(rows)
                        : res.send("No assets with specified queries");
                }
            );
            break;

        //if type is not null, but location is
        case type !== null && location === null:
            //redirect to /type/:type
            res.redirect(`../type/${type}`);

            break;

        //if type is null, but location is not null
        case type === null && location !== null:
            //redirect to /location/:location
            res.redirect(`../location/${location}`);
            break;

        //if both queries are null
        case type === null && location === null:
            //redirect to /assets (show all)
            res.redirect("../assets");
            break;

        default:
            res.send("No results");
            break;
    }
});
```

## Auto-generated documentation with API Doc

Documentation is essential to make any tool more accessible and usable. With API Doc, we can have an auto-generated documentation page for our API, simply by commenting on the code. Not only will it make the API code more readable (and more maintainable), it will also make the adoption of the API quicker, as users can refer to the documentation to see endpoints, responses, etc.

First, let’s setup the API Doc itself.

```jsx
// install apidoc
npm install apidoc -g

// state that input is /src, making a new dir as output /apidoc
apidoc -i src -o apidoc
```

A new directory will appear /apidoc, and we don’t need to change any of this for a default output of the API documentation. Next, we need to setup **_apidoc.json_** and add the documentation itself by commenting in **_index.js_**.

**_apidoc.json_** is a configuration document. For this project, I configured it as below

```jsx
{
	"name": "Inventory API Docs",
	"version": "1.0.0",
	"description": "Official documentation of the Inventory API. Built with Node and Express",
	"template": {
		"forceLanguage": "en"
	}
}
```

The settings I configured can be seen at [https://apidocjs.com/#getting-started](https://apidocjs.com/#getting-started).

Using the [apidocjs.com](http://apidocjs.com) documentation, I created documentation for each endpoint I created. An example for **_/assets_** endpoint:

```jsx
/**
 * @api {get} /assets Displays in JSON all available assets
 * @apiVersion 1.0.0
 * @apiName GetAllAssets
 * @apiGroup Inventory
 *
 * @apiSuccessExample {json} Success
 *    HTTP/1.1 200 OK
 *    [{
 *      "id": 1,
 *      "type": "printer",
 *      "location": "St Peters"
 *    },
 *      {
 *      "id": 2,
 *      "type": "phone",
 *      "location": "CitySpace"
 *      }]
 * @apiErrorExample {json} List error
 *   HTTP/1.1 500 Internal Server Error
 */
app.get("/assets", (req, res) => {
    db.all("select * from assets", (err, rows) => {
        //prints error, if err is not null
        err && console.log(err.message);

        //show results, or message if there are none
        rows ? res.jsonp(rows) : res.send("No assets registered");
    });
});
```

Opening the /apidoc/index.html will be output this

![/apidoc/index.html output](https://cdn.sanity.io/images/3ptg6uji/production/7156e6a9924c583e58c081e7ebb5cf06af1b0cec-1511x606.png)

## Testing with Supertest and Jest

Before publishing any code, testing is a must. I tested my API with the Supertest library and Jest as the testing framework.

Install the Supertest and Jest framework as development dependency, as it is unneeded in production.

```jsx
npm i supertest jest --save-dev
```

Add a new script to the **_package.json_** file.

```jsx
"scripts": {
	"test": "jest"
},
```

Create **_test.js_** file. This will be where all the testing code will be run.

```jsx
// declarations
const app = require("./api.js");
const supertest = require("supertest");
const request = supertest(app);
```

Finally, test each endpoint! An example:

```jsx
//6. testing PUT /assets/:id
describe('PUT /assets/1', () => {
    it('sends a 200 success code', (done) => {
        request
            .put('/assets/1')
            .field('type', 'monitor')
            .field('location', 'CitySpace')
            .expect(200)
            .end((err, res) => {
                if (err) return done(err);
                done();
            })
    })
```


Hello there!

Latest Projects

Sanity as Headless CMS to Next.js Pages Router

NextAuth in Next.js Pages Router

Flappy Bird Clone

API with Express