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();
            })
    })
```


API with Express

This mobile-first website is created for an artificial use case of reporting bridle path damage. It was an assignment during my study in Sunderland Uni.

# Bridle Path Damage Report

This mobile-first website is created for an artificial use case of reporting bridle path damage. For more specific instructions, you can click the link below. It was an assignment during my study in Sunderland Uni.

[View assignment brief here.](https://docs.google.com/document/d/10Gjn6gvvqFhjnYN8RRPFXX74GLPqK3pXCYrOBWeXhOY/edit)

[View live project here.](https://assessment2-psi.vercel.app/)

## UI/UX Design

The start of this project starts with designing the UI Flowchart. The flowchart will be used to create UI mockups created in Figma.

![UI Flowchart of app](https://cdn.sanity.io/images/3ptg6uji/production/937aa5c02c9b37ad7d966a61edbdd32407d338e8-996x1086.png)

The Figma mockups were made accordingly with a mobile-first view in mind. Find the complete Figma project [here.](https://www.figma.com/design/hFM2D7u2Uk93YRl9uaQSCt/Assessment-2?node-id=0%3A1&t=UgJ3CtUv8049WXlX-1)

![Overview of the Figma mockups design](https://cdn.sanity.io/images/3ptg6uji/production/8bb578e42cb1358a81d75a6df09933391cffb6d1-1100x749.png)

In this Figma project, a design system is created and used. Using the same stylings for titles, headings, paragraphs, etc. A colour swatch is included in this design system.

![Design system created in Figma](https://cdn.sanity.io/images/3ptg6uji/production/2e4f81bc43dd6c1321b6e99fdde27d8cbd1feee4-205x754.png)
## Development

This website is created using React.js, styled with TailwindCSS, Firebase for authentication, and Firestore for a NoSQL database.

### Navigation

The app consists of 2 main ‘faces’: the public-facing side where the general public can report the damaged paths and the admin-facing side where admins can track and update the progress of repairing the reported damages. All of the pages in the app are routed with ReactRouter, and Wrapped with a custom hook **FormContextProvider** for simple state management.

```jsx
<BrowserRouter>
    <FormContextProvider>
        <Routes>
            <Route path='/' element={<App />} />
            <Route path='/q1' element={<Question1 />} />
            <Route path='/q2' element={<Question2 />} />
            <Route path='/q3' element={<Question3 />} />
            <Route path='/error' element={<ErrorScreen />} />
            <Route path='/home' element={<CouncilHome />} />
            <Route path='/in-progress' element={<InProgress />} />
            <Route path='/archive' element={<Archive />} />
        </Routes>
    </FormContextProvider>
</BrowserRouter>
```

When loading admin pages, a check is carried out to make sure only logged in people (admins) are able to open the pages. If no user is logged in, the webpage will reroute to the home page.

```jsx
const user = auth.currentUser;
const nav = useNavigate();

//simple check. if user is not signed in (a public member), redirect to nav
useEffect(() => {
    if (user === null) {
        nav("/");
    }
}, [auth]);
```

There are 2 question pages for the client to fill in a report, Question1.js and Question2.js. In these pages, validations are there to ensure the required fields are filled before moving on to the next step of the reporting process.

```jsx
function handleNextPage() {
    //check if radio buttons is not ticked
    if (formContext.formState.type === "") {
        // show overlay
        toggleOverlay();
    } else {
        //go to next page if yes
        nav("/q2");
    }
}
```

### Authentication

The authentication is done using Firebase. More specifically, using a Google Sign-in. In retrospect, it would make more sense to use a regular email sign-in as not everyone, hence not all admins use Gmail as their email.

```jsx
export async function signInWithGoogle(auth, provider) {
    await signInWithPopup(auth, provider)
        .then((result) => {
            // This gives you a Google Access Token. You can use it to access the Google API.
            const credential = GoogleAuthProvider.credentialFromResult(result);
            const token = credential.accessToken;
            // The signed-in user info.
            const user = result.user;

            console.log(user);
        })
        .catch((error) => {
            // Handle Errors here.
            const errorCode = error.code;
            const errorMessage = error.message;
            // The email of the user's account used.
            const email = error.customData.email;
            // The AuthCredential type that was used.
            const credential = GoogleAuthProvider.credentialFromError(error);
            // ...
        });
}
```

It is deliberate that there are no sign up functionality in the app, as it would defeat the purpose of separating admin and public face of the app. Signing up other admins would need direct access to the Firebase console, or implementing multi-tier admin roles, which is beyond the scope of the assignment.


Bridle Path Damage Report

This project is the focus of my final year project at the University of Sunderland. I work as a barista, thus the combining of my passions of coffee and technology is exciting!

# Flutter Cafe Mobile App

This project is the focus of my final year project at the University of Sunderland. I work as a barista, thus the combining of my passions of coffee and technology is exciting!

## Process

The developmental process started with making a faux company with brand identity as a client. This includes their vision and mission, developing their colour scheme, which influenced the UI design of the app.

Afterwards, an analysis was done to ensure the app specification is tailored to the company’s needs. This includes competitor and requirements analysis.

Design and Development would be the final stages of the process. Wireframing with Figma and developing the cross-platform app with Flutter.

## Cameo Coffee

![Cameo Coffee Logo](https://cdn.sanity.io/images/3ptg6uji/production/8d7655a84146504fcd22c411736c033d335f7ba6-212x105.png?w=450)

Cameo Coffee is an artisan cafe that currently only has one location. The cafe is based in the UK and is looking to further improve their service to customers by making a custom mobile app.

The logo of the café is a single line in the shape of a coffee bean. This symbolises the continuous demand of superior coffee that is supplied by Cameo Coffee. The gradient applied to the logo is a parallel to the mission of providing great coffee to everyone from any age, any background, with no discrimination – no segmented lines in the logo and no distinct colour separation.

The font face chosen for the logo is a serif font, “DM Serif Display”, which evokes a feeling of professionalism and seriousness, the approach taken from Cameo Coffee to their products. Serif fonts also suggests the weight of experience and history. In combination with the minimalistic logo, this showcases that Cameo Coffee is a modern café that aims to provide the best quality coffee, building on top of the experience of other cafés in the history of coffee. The font colours are brown and gold, relating to their products of coffee and excellence. The distinct colourations of the two words, Cameo and Coffee, is for the purpose of legibility.

In order to reflect the brand, the app colour scheme will revolve around the brown and gold colouration.

## Competitor Analysis

For competitor analysis, I analysed 3 apps: Starbucks and Costa apps for comparing with the industry leaders, and Trading Post Coffee for an independent cafe. Comparing these 2 categories of cafe apps allowed me to understand the competition and implement features that allows Cameo Coffee to standout.

In summary, it was essential for the app to not include any WebView for a better user experience, as using Trading Post Coffee app was slow and infuriating. The app should also not be bloated like Costa, but instead focusing on fewer features executed well. It should have better layout consistency than both Starbucks and Trading Post app, with legible text and clear visual hierarchy. The app will have consistent colour scheme, appropriate with the branding of the cafe.

A more comprehensive analysis can be found in my dissertation [here](https://docs.google.com/document/d/1_FDWUVmXwvg6N5B_JpdwfnwweNkxB9Hr/edit?usp=sharing&ouid=114976658092402289663&rtpof=true&sd=true).

## Requirements Analysis

In order for the project to be successful, clear goals and constraints are needed to be set. This allows the project to be more focused, more efficient, and completed in less time. Less time equals less money spent for the business!

Requirements can be categorised two different ways: functional and non-functional requirements. Functional requirements relate to what the app will achieve; what functionalities are present. This includes user registration and login, seeing the cafe menu in the app, online order system, and a loyalty programme.

Non-functional requirements relate to how the app is run and perceived. For this project, a cross-platform app is required for a better outreach to the client base. Most people use iOS based phones, but plenty use Android based phones. The app would also need to load in under 3 seconds to give a pleasant user experience. An intuitive UI is a must, along with accessibility with colour blindness, and smooth experience which means constant running at 60fps.

## Design

With the branding done, a wireframe can be made in Figma.

![Wireframe Diagrams of the app](https://cdn.sanity.io/images/3ptg6uji/production/dd82d6b681f28bb4220e830329c19614e2a3800e-928x777.png)

The above mockups are for the main pages of the app. The splash screen, login/sign up page, and the main functionalities of the app. The menu, the rewards, the cart, the item customisation, and account page.

Icons for menu items were also created.

![Icons created in Figma](https://cdn.sanity.io/images/3ptg6uji/production/328d3a2e93bfa5ec5d3b1356f8fc3d66392941c0-691x718.png)

These will be made in the app for each differing menu item.

The navigation is simple, with at most 2 layers of navigation. Most of the navigation is done using a bottom navigation bar, and a modal will pop up in some interactions. For example, clicking on a menu item to customise the item. The less nested a navigation is, the less confusing it is.

Firestore is used as a NoSQL storage solution as it is faster to write to the database than the average SQL storage solution. Due to the potential volume of read/writes in the form of clients ordering and reading the menu, it is also more cost effective than in a relational database. Furthermore, the use of Firebase Console allows better DX as both Firestore and Firebase Auth are accessible from the same Firebase Console.

## Development

This project was made in Flutter mostly due to the more robust tooling and documentation compared to React Native, leading to a better DX. Having a full IDE (Android Studio) also helps in improving DX.

The project is created using the MVC (Model-View-Controller) architecture. In hindsight, it might be better to use a more Flutter-centric model (if that’s a term?) such as the Provider pattern or BLoC. However the limited time did not allow me to study these architecture patterns from the beginning.

Important models include cart_model.dart, user_model.dart, order_item_menu.dart, etc. Repeating UI elements are refactored into components, such as botnavbar.dart and buttons.dart. This will make the UI screen (e.g. home_screen.dart) code more readable.

Complete code can be seen here.

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

## Conclusion and Evaluation

![Menu page of final prototype](https://cdn.sanity.io/images/3ptg6uji/production/46b1bf3dac9a2c55f739a3e2ffd330271a577955-381x845.png)

In conclusion, I don’t think I did my best in my dissertation. Time management was not great, hence not enough time to polish the app and implement all of the desired functionalities. Was it too ambitious of a project for a 5 months plan? Perhaps - I personally don’t think so. If I am able to redo this project, with this experience I have now, I could definitely make the deadline.

Other than time management, I would also use the Provider pattern to make the codebase more readable and organised. Further additions to the app include payment functionality, and analytics (how many orders in a day, most popular items, etc.).

Suffice to say, this was definitely a huge learning opportunity for me in knowing my preferred working methods and holding myself accountable. A small plus, it is enough to grant me First Honours in the University of Sunderland!


All Projects