I haven't had the best start for making progress on personal projects in 2025, however after taking most of January off from this, I am hoping to take small steps to continue my progress. Continuing upon my incremental progress on the backend I added the functionality to delete a result. Along with the delete result this is my introduction of my Nextjs frontend.

Deleting Results

Delete Result Service

In the "services/results" directory add a new service file named "deleteResults.ts". This file imports "eq" from "drizzle-orm", "db" from "drizzle.ts", and "results" from "schema.ts". Make an export function was created this time called "deleteResultById". The function queries the database to locate a result with a matching provided ID then deletes it.

import { eq } from "drizzle-orm";
import { db } from "../../db/drizzle";
import { results } from "../../db/schema";

export const deleteResultById = async (resultID: any) => {
	const deleteResult = await db
		.delete(results)
		.where(eq(results.id, resultID))

	return deleteResult
}

Delete Result Controller

In "results.controller.ts" a new controller has to be made for the "deleteResultById" function. Import the "deletePollsById" into "results.controller.ts", then create an export function called "deletePollByIdController". This controller uses a try/catch block. Within the try block, the "resultID" is retrieved from the request's query parameters and validated. If valid, the "deleteResultById" service is called to delete the poll, and a success message is returned, while the catch block handles the any errors.

import { deleteResultById } from "../services/results/deleteResults";

export const deleteResultByIdController = async (req: Request, res: Response) => {
	try {
		const { resultID } = req.query;

		if (!resultID) {
			return res.sendStatus(400);
		}

		const poll = await deleteResultById(resultID);

		return res.status(200).send("Result was deleted");
	} catch (error) {
		console.error(error);
		return res.sendStatus(400);
	}
}

Delete Result Router

A new route was made for the server to handle deleting results, the route's prefix is "/delete-by-id" and the HTTP method is a DELETE. Import the "deleteResultByIdController" into "results.router.ts" and have the newly created route use the imported function.

import { ..., deleteResultsByIdController } from "../controllers/result.controller";


pollRouter.delete("/delete-by-id", deleteResultByIdController);

Nextjs Frontend

Having worked on the backend over the last few weeks to months I think time I start at least working on the frontend. While there is still more to be done, there is enough of a barebones backend to work with that I can make a frontend that interacts with it.

Going to react.dev in the documentation "Start a New React Project" they give a list of frameworks that you can use to quickly get started working with React. I simply went with the first option on the list "Next.js" Navigating to the top level of my project directory in a terminal I entered the following command:

npx create-next-app@latest

After that it gave me a list of options to create my React/Next.js application. I simply entered the options that I wanted to work with and was able to get started working from there.

What is your project named? example-name
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

Nextjs Poll Route

From the Nextjs documentation:

"Next.js uses file-system based routing, meaning you can use folders and files to define routes."

Simply put the name of the folder becomes the name of the route and a file called "page.js" or "page.tsx" is the actual "page" of the route. I made a new directory called "polls" and file called "page.tsx"

polls
|- page.tsx

I made a simple export function in the poll's "page.tsx" to return an h1 with the value "Hello from the Polls Routes"

export default function Page() {
	return (
		<h1>Hello from the Polls Routes</h1>
	)
}

Conclusion

My experimentation continues as I have not used Nextjs before so adding it to my ever growing list of things to learn throughout this project seems almost fitting. For the time being making a simple route is a good starting point in the proceeding updates I will expand not only the apps capabilities, but also my understanding of Nextjs.

If you would like to check out the code or us it for yourself: Github Link

If this blog was helpful to you please consider subscribing.

Like most people the holiday season is a rather busy time, this meant that for several weeks I made no progress when it came to this app. Starting back up after the holiday season has always been rather slow for me, but I am hoping to pick up where I left off. Similar to my last update I will be doing a fairly small update to the app adding the features to delete an option and update a result.

Deleting Options

Deleting Option Service

Starting off with with deleting an option add a new service file named "deleteOptions.ts" in the "services/options" directory. As with all of the other options services import the following "eq" from "drizzle-orm", "db" from "drizzle.ts", and "options" from "schema.ts". The "deleteOptions.ts" service has an export function was created this time called "deleteOptionById". The function queries the database to locate a poll with a matching provided ID then deletes it, since the schema has cascading configured it will also delete options and responses that match the poll id.

import { eq } from "drizzle-orm";
import { db } from "../../db/drizzle";
import { options } from "../../db/schema";

export const deleteOptionById = async (optionID: any) => {
	const deleteOption = await db
		.delete(options)
		.where(eq(options.id, optionID))

	return deletePoll
}

Deleting Option Controller

Moving on from the deleting options service into the delete options controller. In the "options.controller.ts" file import the "deleteOptionById", then create an export function called "deleteOptionByIdController". The export function has a try/catc block that uses the "optionID" that was retrieved from the request's query parameters and validates it. If the id is valid it moves on from there and calls the delete option by id function and takes the option id as its argument, if successful a success message is returned, while the catch block handles the any errors.

import { deleteOptionById } from "../services/polls/deleteOptions";

export const deleteOptionByIdController = async (req: Request, res: Response) => {
	try {
		const { optionID } = req.query;

		if (!optionID) {
			return res.sendStatus(400);
		}

		const poll = await deleteOptionById(OptionID);

		return res.status(200).send("Option was deleted");
	} catch (error) {
		console.error(error);
		return res.sendStatus(400);
	}
}

Deleting Option Router

Lastly for delete option a new route was made, the route's prefix for the route is "/delete-by-id" and the HTTP method is a DELETE. Import from the options controller "deleteOptionByIdController" and have the newly created route use the imported function.

import { ..., deleteOptionByIdController } from "../controllers/option.controller";


pollRouter.delete("/delete-by-id", deleteOptionByIdController);

Updating Results

Get Result By ID Service

Two additional features need to be made in order to make the update results work as I expect it to, the first being getting the current result total and updating the results with the incoming increase. In "getResults.ts" add a new export function called "getResultById". It takes a parameter called resultID checks if there is a result with a matching id and returns the existing total.

export const getResultById = async (resultID: any) => {
        const getResultTotal = await db
                        .select({
                           total: results.total
                        })
                        .from(results)
                        .where(eq(results.id, resultID))
                      
        return getResultTotal
}

Update Results Service

The second part needed to update the results is actually updating the result in the database. In the "services/options" directory add a file called "updateOptions.ts". Import "eq" from "drizzle-orm", "db" from "drizzle.ts", and its schema "results" from "schema.ts". Create an export function called "updateResultById", it takes 3 arguments, the result id, the amount to increase by, and the current total. Assign a new variable named "newTotal" that is equal to the current total and the increase amount. Query the database using the result id argument and set the current total to the new total.

import { eq } from "drizzle-orm";
import { db } from "../../db/drizzle";
import { results } from "../../db/schema";

export const updateResultById = async (resultID: any, increase: number, total: any) => {
	const newTotal = total + increase
    
	const updateResult = await db
				.update(results)
				.set({
        				total: newTotal
				})
        			.where(eq(results.id, resultID))

	return updateResult
}

Update Results Controller

Now it's time to have the two services work together in order to update the result. Add a new file in the "controllers" directory called "results.controller.ts". This file imports "Request" and "Response" from "express", "updateResultById" from "updateResults.ts", and "getResultById" from "getResults.ts". Like other controller functions it uses a try/catch block, within the try portion begin by destructing "resultID" and "increase" from the request body. Assign a variable that collects the result from "getResultById". Call the update result function with acquired total, result id, & increase.

import { Request, Response } from "express";
import { updateResultById } from "../services/results/updateResults";
import { getResultById } from "../services/results/getResults";

export const updateResultByIdController = async (req: Request, res: Response) => {
	try {
		const { resultID, increase } = req.body;

		if (!resultID) {
			return res.sendStatus(400);
		}

		const total = await getResultById(resultID);

		const result = await updateResultById(resultID, increase, total[0].total);

		return res.status(200).send("Result was updated");
	} catch (error) {
		console.error(error);
		return res.sendStatus(400);
	}
}

Update Results Router

Next, for update results is to configure a router for the options. Import "Router" from "express" to setup the router and "updateResultByIdController" from "results.controller.ts". Create a const called "resultRouter" that calls the Router function. Define a new route with a PATCH method that has a prefix of "/update-by-id" and uses the "updateResultByIdController". In "app.ts" import the router and use it in a "/results" route.

import { Router } from "express";
import { updateResultByIdController } from "../controllers/results.controller";

export const resultRouter = Router();

resultRouter.patch("/update-by-id", updateResultByIdController);

Conclusion

This was a fairly simple update that built upon my previous work. This was the first update that allowed my app to be able to have options my independent from polls. As this project continues more combined and independent systems will need to be developed, this was, but a brick in the foundation that will continue to grow.

If you would like to check out the code or us it for yourself: Github Link

If this blog was helpful to you please consider subscribing.

Progress for this project at the moment is rather incremental, adding only minor functionality that while making it more capable doesn't add any additional features. The biggest addition this update is the ability to update an option by its id. Expanding upon the work I have done previously for polls I have added the ability to delete a poll by its id as well.

Deleting Polls

Deleting Poll Service

In the "services/polls" directory add a new service file named "deletePolls.ts". Similar to update polls the following were imported "eq" from "drizzle-orm", "db" from "drizzle.ts", and "polls" from "schema.ts". With all services so far an export function was created this time called "deletePollById". The function queries the database to locate a poll with a matching provided ID then deletes it, since the schema has cascading configured it will also delete options and responses that match the poll id.

import { eq } from "drizzle-orm";
import { db } from "../../db/drizzle";
import { polls } from "../../db/schema";

export const deletePollById = async (pollID: any) => {
	const deletePoll = await db
		.delete(polls)
		.where(eq(polls.id, pollID))

	return deletePoll
}

Deleting Poll Controller

In "polls.controller.ts" a controller has to be made for "deletePollsById" function. Start by importing the "deletePollsById" into "polls.controller.ts", then create an export function called "deletePollByIdController". This controller uses a try/catch block. Within the try block, the "pollID" is retrieved from the request's query parameters and validated. If valid, the "deletePollById" service is called to delete the poll, and a success message is returned, while the catch block handles the any errors.

import { deletePollById } from "../services/polls/deletePolls";

export const deletePollByIdController = async (req: Request, res: Response) => {
	try {
		const { pollID } = req.query;

		if (!pollID) {
			return res.sendStatus(400);
		}

		const poll = await deletePollById(pollID);

		return res.status(200).send("Poll was deleted");
	} catch (error) {
		console.error(error);
		return res.sendStatus(400);
	}
}

Deleting Poll Router

A new route was made for the server to handle deleting polls, the route's prefix is "/delete-by-id" and the HTTP method is a DELETE. Import the "deletePollByIdController" into "polls.router.ts" and have the newly created route use the imported function.

import { ..., deletePollByIdController } from "../controllers/polls.controller";


pollRouter.delete("/delete-by-id", deletePollByIdController);

Updating Options

Updating Options Service

Up to this point options have been directly connected to polls, this will the first option service that can be used independently of polls. Create a new file called "updateOptions.ts" in the "services/options" directory. Standard for our services import "eq" from "drizzle-orm", "db" from "drizzle.ts", and its schema "options" from "schema.ts". Add an export function called "updateOptionById". The function takes arguments "optionID" with a type of any and "updatedOption" with a type of string. Query the database using the "pollingID" and update the option field using the "updatedOption".

import { eq } from "drizzle-orm";
import { db } from "../../db/drizzle";
import { options } from "../../db/schema";

export const updateOptionById = async (optionID: any, updatedOption: string) => {
	const updatePoll = await db
				.update(options)
				.set({
        				option: updatedOption
				})
        			.where(eq(options.id, optionID))

	return updatePoll
}

Updating Options Controller

Building upon the updating Options service, a controller will need to be made. In the "controllers" directory make a new file called "options.controller.ts". In the options controller import "updateOptions.ts" from the services directory. Add an export function "updateOptionByIdController" that uses a try-catch block. Within the try block, destructure the "optionID" and "updatedOption" from the request body, validate them both, and call the "updateOptoinById" function to perform the database update. Once the database update is completed is send a success response, while the catch block handles the any errors.

import { Request, Response } from "express";
import { updateOptionById } from "../services/options/updateOptions";

export const updateOptionByIdController = async (req: Request, res: Response) => {
	try {
		const { optionID, updatedOption } = req.body;

		if (!optionID) {
			return res.sendStatus(400);
		}

		const poll = await updateOptionById(optionID, updatedOption)

		return res.status(200).send("Poll was updated");
	} catch (error) {
		console.error(error);
		return res.sendStatus(400);
	}
}

Updating Options Router

Next, for the update options is to configure a router for the options. Import "Router" from "express" to setup the router and "updateOptionByIdController" from "options.controller.ts". Create a const called "optionRouter" that calls the Router function. Define a new route with a PATCH method that has a prefix of "/update-by-id" and uses the "updateOptionByIdController".

import { Router } from "express";
import { updateOptionByIdController } from "../controllers/options.controller";

export const optionRouter = Router();

optionRouter.patch("/update-by-id", updateOptionByIdController);

Creating an Options Route

1. Import the options router into app.ts
2. Have a new app.use "/options" for the

Lastly, in order to use the router we need to make sure the server is able to use the "options.routes.ts". In the "app.ts" file import the options router. Have a new "app.use" method, and specify the path as "/options" while using the "optionRouter".

import { optionRouter } from './router/options.routes';

app.use("/options", optionRouter);

Conclusion

This was a fairly simple update that built upon my previous work. This was the first update that allowed my app to be able to have options my independent from polls. As this project continues more combined and independent systems will need to be developed, this was, but a brick in the foundation that will continue to grow.

If you would like to check out the code or us it for yourself: Github Link

If this blog was helpful to you please consider subscribing.

As I have continued to develop the polling app parts of it have grown and will continue to grove unless I get ahead of it. Currently I only have a few routes, however it has become apparent that I have to separate the router and controller from "app.ts". While it might seem like optimizing a bit too early, doing so now, while the app's functionality is fairly simple, makes it more manageable. Along with separating the router and controller, I also added functionality to allow polls to be updated. This is the first time a feature was made entirely with the new separation.

Polling Router and Controller

Separating the routes into a Router

Starting off by separating the routes from "app.ts", first make a new directory in the "src" directory called router that will host all of the router files. Within the new directory add a file named "polls.routes.ts" this file will host the routes related to polls. From "app.ts" copy the existing poll routes and paste them into the newly created file. Import the "Router" module from Express and make an export const that use the "Router" module name "pollRouter". Lastly change two things about the existing routes, change it so they use "pollRouter" instead of "app" and the create names so they are "create", "get-all" and "get-by-id".

import { Router } from "express"

export const pollRouter = Router();

pollRouter.post("/create", ...);
pollRouter.get("/get-all", ...);
pollRouter.get("/get-by-id", ...);

Creating a Controller for the Router

For the next part, is to separate out the controller from the router. Similar to what was done with the router, make a new directory in the "src" called "controller". Make a new file called "polls.controller.ts" where the controller of polls will live. In the newly created file import "Request" and "Response" from "Express". Additionally import the services from "addPolls.ts" and "getPolls.ts". Create three export functions, they are named the following "addPollController", "getAllPollsController" and "getPollsByIdController". From each route copy the portion of the route that handles what the route actually doesinto the appropriate function.

import { Request, Response } from "express";
import { addPoll } from "../services/polls/addPolls";
import { getAllPolls, getPollsById } from "../services/polls/getPolls";

export const addPollController = async (req: Request, res: Response) => {
	try {
		const { question, options } = req.body;

		if (!question) {
			return res.sendStatus(400);
		}

		const poll = await addPoll(question, options)

		return res.status(201).send("Poll was created");
	} catch (error) {
		console.error(error);
		return res.sendStatus(400);
	}
}

export const getAllPollsController = async (req: Request, res: Response) => {
	try {
		const polls = await getAllPolls();

		return res.status(200).json(polls);
	} catch (error) {
		console.error(error);
		return res.sendStatus(400);	
	}
}

export const getPollByIdController = async (req: Request, res: Response) => {
	try {
		const { pollID } = req.query

		if (!pollID) {
			return res.sendStatus(400);
		}

		const poll = await getPollsById(pollID);

		return res.status(200).json(poll);
	} catch (error) {
		console.error(error);
		return res.sendStatus(400);	
	}
}

Setting Up the Router for the Server

With the router and controller being separated, the functions "addPollController", "getAllPollsController" and "getPollsByIdController" need to be imported into "polls.controller.ts". Replace the existing router logic and the correct controller so that the route uses that controller. Moving from the poll router to "app.ts" remove any routes in the file. Import the router into app.ts and make a new endpoint that uses the poll router with a route prefix of "/polls".

import { Router } from "express";
import { addPollController, getAllPollsController, getPollByIdController } from "../controllers/polls.controller";


export const pollRouter = Router();

pollRouter.post("/create", addPollController);
pollRouter.get("/get-all",getAllPollsController);
pollRouter.get("/get-by-id", getPollByIdController);

import { pollRouter } from './router/polls.routes';

app.use("/polls", pollRouter);

Updating Polls

Making the updatePoll Service

Moving on from the separation of the router and controller from "app.ts", to updating a poll, more specifically its question/query. In the "services/polls" directory a new file was added named "updatePolls.ts". In this file these were imported into it, "eq" from "drizzle-orm", "db" from "drizzle.ts", and "polls" from "schema.ts". An exported function, "updatePollById", was created to handle poll updates. This function takes two arguments: "pollID" of type "any" and "updatedQuestion" of type "string". The function queries the database to locate a poll with a matching provided ID then update the question field to the provided string.

import { eq } from "drizzle-orm";
import { db } from "../../db/drizzle";
import { polls } from "../../db/schema";

export const updatePollById = async (pollID: any, updatedQuestion: string) => {
	const updatePoll = await db
          .update(polls)
          .set({
            question: updatedQuestion
          })
          .where(eq(polls.id, pollID))

	return updatePoll
}

Making the updatePoll Controller

A new controller for the "updatePollById" needs to be created. Start by importing the "updatePollById" service into the polls controller. Make a new export function called "updatePollByIdController" that uses a try-catch block. Within the try block, destructure the "pollID" and "updatedQuestion" from the request body, validate the presence of both, and call the "updatePollId" function to perform the database update. Once the database update is completed is send a success response, while the catch block handles the any errors.

import { updatePollById } from "../services/polls/updatePolls";

export const updatePollByIdController = async (req: Request, res: Response) => {
	try {
		const { pollID, updatedQuestion } = req.body;

		if (!pollID) {
			return res.sendStatus(400);
		}

		const poll = await updatePollById(pollID, updatedQuestion)

		return res.status(200).send("Poll was created");
	} catch (error) {
		console.error(error);
		return res.sendStatus(400);
	}
}

Making the updatePoll Route

For the server to handle polls update a new route has to be made, the route's prefix will be "/update-by-id" and the HTTP method will be a PATCH. Import the "updatePollByIdController" into "polls.router.ts" and have the newly created route use the imported function.

import { ..., updatePollByIdController } from "../controllers/polls.controller";


pollRouter.patch("/update-by-id", updatePollByIdController);

Conclusion

By separating out the router and controller from "app.ts" early, I make structure of the project easier to work with as I continue from this point onward. It might be a little premature to this, but by addressing this now I don't have to worry about having to handle such a larger overhaul to achieve the same end goal.

Trying out the new structure of the app with an additional feature was a great test of how well it can be done, while at the same time expanding what the app is capable of. There is still more to be done for the backend at the moment, but the app continues to take shape with each new feature.

If you would like to check out the code or us it for yourself: Github Link

If this blog was helpful to you please consider subscribing.

Unfortunately I made a rather simple mistake when requesting a poll by its id. Looking back I should have noticed it sooner, by mainly testing things I some times won't test it or it will simply slip my made to do so. Regardless all you can hope for is to catch them early before they become greater issues in the future.

The process of making my polling app continues, when you get a poll you might also want the options for it. Separately you might also like to have results for a poll. While it would be easy to store the results along side their options, I am experimenting to see how things will go if they were split from each other.

Fixing Issues with Polls GET Request

While testing "/single-poll" two issues were discovered, those being you can't use request.body with a GET request and the type for "getPollsById" cause issues when changing to query strings. The first fix is fairly simple, while still destructing for "pollID" change the req.body to req.query. This change however causes issues with the "getPollsById" function as its wants to take in a string, but gets a Query String instead. To address this conflict simply changing the type in "getPollsById" from "string" to "any" resolves this.

Returning Poll Options with Getting Polls

Collecting Poll Options

To collect all options for a specific poll, a new service file, "getOptions.ts", was added to the services/options directory. Within the file, similar to "getPolls.ts", import "eq" from "drizzle-orm", "db" from "drizzle.ts", and the matching schema. Make a new export function named "getAllPollOptions" that takes "pollID" as an argument with a type of "any". In the function have a database query that does the following, selects the "id" and "option" fields, uses the options table, and has the options.pollId is equal to the "pollID". Store the query in a const and return the const.

import { eq } from "drizzle-orm";
import { db } from "../../db/drizzle";
import { options } from "../../db/schema";

export const getAllPollOptions = async (pollID: any) => {
	const pollOptions = await db
    	.select({
          id: options.id,
          option: options.option
        })
        .from(options)
        .where(eq(options.pollId, pollID))

	return pollOptions
}

Getting A Poll Also Gets Their Options

Now that there is something to collect the options for a poll, update the "getPollsById" to also respond with the options for that poll. In the "getPoll.ts" import the "getAllPollOptions" function. Add an empty Typescript Object named "results" within "getPollsById". Next store the database query for polls in a const named "poll". After that have a const name "options" that calls the "getAllPollOptions" using the "poll" id const as an argument. Have result now equal "poll" and "options", lastly return results.

export const getPollsById = async (pollID: any) => {
	let result = {}

	const poll = await db
		.select()
		.from(polls)
		.where(eq(polls.id, pollID))

	const options = await getAllPollOptions(poll[0].id)

	result = {poll, options}

	return result
}

Poll Results

Creating the Results Schema

For the third schema for the polling application, a new "results" scheme is added to "schema.ts" it will track a poll's outcome. Like the other schemas, it uses the "pgTable" function with the tables naming being "results". The results table is composed of four parts. First the "id", similar to the others it is a generated uuid. Next the "total" is an integer that will store the total votes for an option. There will be two foreign keys used, one for pollId and the other for optionsId. Both foreign keys will be configured with cascading deletes, that automatically removing related results when a poll or its options are deleted.

export const results = pgTable('results', {
	id: uuid('id')
          .default(sql`gen_random_uuid()`)
          .primaryKey(),
	total: integer('total'),
	optionId: uuid('option')
          .references(() => options.id, {onDelete: 'cascade'})
          .notNull(),
	pollId: uuid('poll_id')
          .references(() => polls.id, {onDelete: 'cascade'})
          .notNull()
});

Returning the Option's ID

As the "results" schema requires the "optionId" there needs to be some changes done to "addOption". To guarantee that results will be made the "addOption" needs to store an "id" as a const when it is inserting an option into the database. The function takes that const value and returns it.

export const addOption = async (option: string, pollID: string) => {
	const id = await db
    	.insert(options)
    	.values({
    		option,
    		pollId: pollID
    	})
    	.returning({ id: options.id })
					
	return id
}

Make a Results Entry

Finishing the setup for the "results" schema, create a new directory in the "services" directory for "results". Within this directory, make a file called "addResults.ts" to handle adding results to a database. Import the "db" from "drizzle.ts" and "results" from "schema.ts". A new export function called "addResult" is added to the file. The function takes two arguments the first being "optionID" and the other being "pollID", both with a type of any. For the moment it simply calls the db function to insert into the database with values of the option id, poll id, and setting the total to zero.

import { db } from "../../db/drizzle";
import { results } from "../../db/schema";

export const addResult = async (optionID: any, pollID: any) => {
	await db
	.insert(results)
	.values({
		total: 0,
		optionId: optionID,
		pollId: pollID
	})
}

Modify Create Polls To Create Results As Well

To make sure that results are being made the fastest way to incorporate it into the existing code is to import it in "addPoll.ts". While the for loop is making options change the function to store the return id in a let variable. Then call the "addResult" function with the poll id and option id as its arguments.

import { addResult } from "../results/addResults";

export const addPoll = async (question: string, options: any) => {
	const poll = await db
			.insert(polls)
			.values({
				question
			})
			.returning({ id: polls.id })

	for (const value in options) {
		let option = await addOption(options[value], poll[0].id)
		addResult(option[0].id, poll[0].id)
	}

	return poll[0].id

Conclusion

As I continue to make this polling app, I will continue to make both minor and major issues I hope to catch them before I post about it, but that is not something I can guarantee. For the moment I am happy with the solution, but I might come back to it and try some other solutions out.

The schemas for polls, options, and results should be enough for the time being, to setup most of the basic functionality for the polling app. That doesn't mean I will not have additional schemas in the future, but I will either be modifying the existing three or leave them as is. Speaking on basic functionality, I have now added to the app the ability to collect options and create results.

If you would like to check out the code or us it for yourself: Github Link

If this blog was helpful to you please consider subscribing.

A poll is made of multiple parts, first the inquiry/question, next the options, and lastly the responses of the poll. At the moment I am only storing the first part, so it is time to expand my apps capabilities by storing options and getting polls.

Storing Options

Options Schema

In the "schema.ts" file, add a new exported constant called "options." Like "polls," it is created using the "pgTable" function, which takes two arguments: its name and a JavaScript object defining its columns. The "options" table includes an "id" column as a UUID and a "text" column for the option. Additionally, it introduces a "poll_id" column as a foreign key to reference the "polls" table, ensuring that each option is linked to a specific poll. To maintain data integrity, the foreign key is configured with a cascading delete, so all associated options are removed when a poll is deleted.

export const options = pgTable('options', {
	id: uuid('id').default(sql`gen_random_uuid()`).primaryKey(),
	option: text('option').notNull(),
	pollId: uuid('poll_id').references(() => polls.id, {onDelete: 'cascade'}).notNull()
});

addOptions Service

With the "options" schema in place, implement the "addOption" service to handle adding options to the database. This service is located in a new file, "addOption.ts", stored a new directory "options" inside the "services" directory. The function takes two arguments: the option text and the associated poll ID. Using the "db" connection and the "Options" schema, it inserts the provided data into the "options" table, ensuring each option is linked to its respective poll.

import { db } from "../../db/drizzle";
import { options } from "../../db/schema";

export const addOption = async (option: string, pollID: string) => {
	await db
      .insert(options)
      .values({option,pollId: pollID})
      .returning({ id: options.id })
}

Modifying Poll Services & Routes

Updating the Poll service

Now that the "addOption" service is in place, the "addPoll" function can now support creating poll options after being saved in a database. Start by importing the "addOption" function into the "addPoll.ts" file. A second argument, "options" with a type of "any" is added to "addPoll". Next store the poll id in a variable to be used for options. Then, a "for" loop iterates through the provided options, using the "addOption" service along with the poll id variable. Lastly, the function returns the ID of the created poll.

import { db } from "../../db/drizzle";
import { polls } from "../../db/schema";
import { addOption } from "../options/addOption";

export const addPoll = async (question: string, options: any) => {
	const poll = await db
      .insert(polls)
      .values({question})
      .returning({ id: polls.id })

	for (const value in options) {
		addOption(options[value], poll[0].id)
	}

	return poll[0].id
}

Adding Options to the Poll POST Route

Having updated the addPoll function, it makes sense to have those changes be reflective in the POST "/poll" route in "app.ts". Along with destructing the "question" from the "req.body", "options" can also be destructed. Pass the "options" as the second argument in the "addPoll" function. After successfully creating a poll, instead of send the id as the response message send a string saying "Poll was created".

app.post("/poll", async (req: Request, res: Response) => {
	try {
		const { question, options } = req.body;

		if (!question) {
			return res.sendStatus(400);
		}

		const poll = await addPoll(question, options)

		return res.status(201).send("Poll was created");
	} catch (error) {
		console.error(error);
		return res.sendStatus(400);
	}
});

Collecting The Polls

The next feature to add is retrieving polls from the database, currently there are only two methods to do so. The first is to fetch all polls in the database, and the second being to retrieve a specific poll by its unique ID. Create a new file the polls services directory called "getPolls.ts"

getPolls Service

In the new "getPolls.ts", import the "db" from "drizzle.ts" and "polls" from "schema.ts". Next add an export async function called "getAllPolls". In the "getAllPolls" function have a const for storing the results from getting all polls from the database. The function returns the results of the query.

Import another package this time from "drizzle-orm" this being "eq" to apply a filter of equals to queries. Additionally, make a second export async function that takes a single argument of "pollID" with a type of string. Similar to "getAllPolls" store the result from the database query in a "result" const. Use the "where" method to filter the query, using "eq" have the filter equal polls.id to pollID. Lastly have it return the results from the query.

import { eq } from "drizzle-orm";
import { db } from "../../db/drizzle";
import { polls } from "../../db/schema";

export const getAllPolls = async () => {
	const results = await db
		.select()
		.from(polls)

	return results
}

export const getPollsById = async (pollID: string) => {
	const result = await db
		.select()
		.from(polls)
		.where(eq(polls.id, pollID))

	return result
}

Get Polls Routes

After creating the service functions in "getPolls.ts", the next step is to make routes for the corresponding functions. Both routes will be GET requests, one will be calling "getAllPolls" function, while the other will collect the "pollID" and using the "getPollById" function.

The first GET request route called "/all-polls" calls the "getAllPolls" function in a try/catch block. If it successfully retrieves the polls it returns a response with a status code of 200 and the list of polls as JSON. If there were any errors it simply logs them in the console and returns a 400 status code.

For the second GET request route, this time called "/single-poll", it calls the "getPollsById" again in a try/catch block. In the try portion restructure the "pollID" from "req.body. Next check that it isn't empty if it is simply return a response of 400. Follow the check, call the "getPollById" function and store its value in a const of "poll". Return a response of 200 along with the "poll" const in JSON. Lastly for catch, use the same code for the error handling.

app.get("/all-polls", async(req: Request, res: Response) => {
	try {
		const polls = await getAllPolls();

		return res.status(200).json(polls);
	} catch (error) {
		console.error(error);
		return res.sendStatus(400);	
	}
});

app.get("/single-poll", async(req: Request, res: Response) => {
	try {
		const { pollID } = req.body;

		if (!pollID) {
			return res.sendStatus(400);
		}

		const poll = await getPollsById(pollID);

		return res.status(200).json(poll);
	} catch (error) {
		console.error(error);
		return res.sendStatus(400);	
	}
});

Conclusion

Now that I’ve integrated the ability to create polls and options, the app can seamlessly store and link options to their corresponding polls. By updating the addPoll function to handle options after a poll is saved, I ensured that each poll can have a dynamic set of options attached to it. The addOption service is used to store those options in the database, making the whole process efficient.

To make this work, I updated the POST route for creating polls (/poll) to accept both the poll question and the options, which are passed to the addPoll function. After the poll is created, I iterate over the options and use the addOption service to store them. Additionally, I created routes to retrieve polls, whether fetching all polls or a specific poll by its ID. These routes use the newly created services functions to query the database, making it easy to access both poll data and its options.

If you would like to check out the code or us it for yourself: Github Link

If this blog was helpful to you please consider subscribing.

As I continue my experiment with Typescript, I've learned that the Typescript support for Sequelize while existing, isn’t quite there yet. There’s a fair amount of tinkering involved, in order to make everything work. This raised the question: why not explore a new ORM?

There are several natively supported Typescript ORMs, however I decided to go with Drizzle ORM. If I am already learning a new ORM I might as well try my hand at learning a new database as well. Having experience SQL through MySQL, PostgreSQL seemed like a safe, but unique option in this "in for a penny, in for a pound" experiment.

NPM Packages & Package.JSON Scripts

To get started with Drizzle, you need to install the necessary dependencies. Run the following command to install the dependencies Drizzle ORM & Node-Postgres with the following command:

npm i drizzle-orm pg

To ensure some additional tooling install types for Postgres and drizzle-kit for a CLI tool for Drizzle:

npm i -D @types/pg drizzle-kit

This setup ensures both runtime and development tools for Drizzle ORM and Postgres.

Modifying the "package.json" file to include two scripts for database management. These scripts are used for: generating SQL files and applying migrations to Postgres.

"scripts": {
  "db:generate": "drizzle-kit generate --config=./src/drizzle.config.ts",
  "db:migrate": "drizzle-kit migrate --config=./src/drizzle.config.ts"
}

Configuring Drizzle-Kit

After setting up the packages and scripts, create a "drizzle.config.ts" file in the "src" directory. This file is critical for configuring Drizzle ORM, as it specifies how to connect to the database and where to store the schema and migration files.

This file imports "defineConfig" from Drizzle Kit, configures database credentials using environment variables, and defines paths for the schema and migration files. Using environment variables helps keep sensitive database credentials secure and out of the source code.

import { defineConfig } from 'drizzle-kit';

const host = process.env.DB_HOST;
const port = process.env.DB_PORT;
const user = process.env.DB_USER;
const password = process.env.DB_PASSWORD;
const database = process.env.DB_DATABASE;

export default defineConfig({
	dialect: "postgresql",
	schema: "./src/db/schema.ts",
	out: "./src/db/migrations",
	dbCredentials: {
		host,
		port,
		user,
		password,
		database
	}
});

To avoid committing generated files to version control, add the migrations directory to the ".gitignore" file:

# Drizzle Migrations
*migrations/

DrizzleORM Connection & Schema

With the configuration in place, the next step involved creating the database schema and establishing a connection. A new "db" directory was added in the "src" directory to organize the schema and database connection.

The "db" directory contains two files. Those files being "drizzle.ts"and "schema.ts".

| db
|-- drizzle.ts
|-- schema.ts

Database Schema

In "schema.t, the database schema is defined by importing "sql" from "drizzle-kit" along with "pgTable", "text", and "uuid" from "drizzle-orm/pg-core".

An exported constant "polls" is created as a "pgTable" function. This function takes two arguments: the database name as a string and a JavaScript object specifying the column names and data types.

import { sql } from 'drizzle-orm';
import { pgTable, serial, text, uuid } from 'drizzle-orm/pg-core';

export const polls = pgTable('polls', {
	id: uuid('id').default(sql`gen_random_uuid()`).primaryKey(),
	question: text('question').notNull()
});

PostgreSQL Pool Connection

In "drizzle.ts", the database connection is created by importing "drizzle" from "drizzle-orm/node-postgres" and "Pool" from "pg". Variables are defined to hold environment variables for database credentials, which are then used to configure a new "Pool" connection. Finally, "drizzle" is exported with the SQL connection.

import { drizzle } from "drizzle-orm/node-postgres";
import { Pool } from "pg";

const host = process.env.DB_HOST;
const port = process.env.DB_PORT;
const user = process.env.DB_USER;
const password = process.env.DB_PASSWORD;
const database = process.env.DB_DATABASE;

const sql: Pool = new Pool({
	host,
	port,
	user,
	password,
	database
});

export const db = drizzle(sql);

Developing the Poll Feature

Adding Poll Logic

After configuring the setup, the next step was to develop the logic for creating polls. A "services" directory was created with a "polls" subdirectory to organize poll-specific logic.

| src
|-- services
|---- polls 

In the "polls" directory, an "addPolls.ts" file was created to handle adding polls to the database. The database connection from "drizzle.ts" and the schema from "schema.ts" are imported. An exported async function named "addPoll" is defined, which takes a single argument, "question", as a string. The function uses the "db" function to insert the question into the "polls" table and returns the generated ID.

import { db } from "../../db/drizzle";
import { polls } from "../../db/schema";

export const addPoll = async (question: string) => {
  await 
    db
    .insert(polls)
    .values({question})
    .returning({ id: polls.id })
}

Modify POST Poll Route

The POST "/poll" route in "app.ts" uses a simple try/catch block.

In the try section, "req.body" is destructured to extract the "question" field from the body. A guard clause checks if thequestion is provided; if not, an error response is returned. The ID value from the addPoll function is stored in a variable. A response with a status code 0f 201 is sent upon successful creation, including a JSON body with the poll ID.

In the catch section, any errors are logged, and a 400 response is returned.

app.post("/poll", async (req: Request, res: Response) => {
  try {
      const { question } = req.body;

      if (!question) {
        return res.sendStatus(400);
      }

      const poll = await addPoll(question)

      return res.status(201).json(poll);
    
    } catch (error) {
      console.error(error);
      return res.sendStatus(400);
    }
});

Running Migrations and Testing

To generate the SQL files, run the following command in the terminal:

PORT=Server_Port DB_HOST=Database_IP DB_PORT=Database_Port DB_USER=Database_Username DB_PASSWORD=Database_Password npm run db:generate

This created the SQL migration files in the specified directory. Next, apply the migrations:

PORT=Server_Port DB_HOST=Database_IP DB_PORT=Database_Port DB_USER=Database_Username DB_PASSWORD=Database_Password npm run db:migrate

With the database set up, start the server:

PORT=Server_Port DB_HOST=Database_IP DB_PORT=Database_Port DB_USER=Database_Username DB_PASSWORD=Database_Password npm run start

Test the "/poll" endpoint using Postman or VS Code’s Thunder Client by sending a POST request:

{
  "question": "A simple question?"
}

Finally, verify the new poll’s existence by querying the database directly in PostgreSQL.

Conclusion

Setting up Drizzle ORM with TypeScript and PostgreSQL was an insightful and rewarding experience. While the initial configuration required some effort, the combination of TypeScript's type safety and Drizzle ORM's simplicity made the process more manageable and efficient. By taking the time to explore these tools, a strong foundation for building robust database-driven applications was established. The journey not only expanded my technical knowledge but also provided a deeper understanding of how to integrate modern TypeScript ORM solutions with PostgreSQL, which will be valuable for future projects.

If you would like to check out the code or us it for yourself: Github Link

If this blog was helpful to you please consider subscribing.

With my ongoing e-commerce project with Jamil Madison, I wanted to experiment & understand Typescript. As this is an election year, I thought a fun little project to do would be a "simple" polling app. This app will consist of a frontend, backend, and database. I chose to work with React for the frontend, Nodejs for the backend, & MySQL for the database. Lastly I will deploy this to AWS, using EC2 and RDS.

While the above will make the application usable and accessible on the internet. I want to practice high scalability and high availability. For this reason, I will be using Auto Scaling Groups, Multi-AZ RDS, Amazon Elasticache, & Elastic Load Balancers.

Setting up the project

I setup the repo to include both the backend and frontend instead of having them separate. This means I will have a repo containing the "server" for the backend and "client" for the frontend.

First in the project directory I made the following files: LICENSE, README.md, & .gitignore. The LICENSE file is the software license for the project; the README is a text file that contains information about the project it might contain instructions or helpful information; lastly the .gitignore tells git which folders or files to ignore.

Next created a directory called sever at the top level of the project. Within the server directory I added a "src" directory that will contain all the server code. Within the "src" directory I made a single file, that being app.ts. At this time the project should look like the following:

I completed the two following things: First is initializing git and second is initializing npm. Opening a terminal at the top level directory of the project run git init to initialize git. Next change directories to backend and run npm init, follow the prompts from npm to complete the npm init process. Once completed you can go back to the top level directory, add all the files to the git staging to track them, finally git commit the files.

$ git init
$ cd backend/
$ npm init
$ cd ..
$ git add .
$ git commit -m "Your commit message"

The last part of the setup I did was update the .gitignore for now I have a personal one that I use, however here is what I used to start mine: https://github.com/github/gitignore/blob/main/Node.gitignore

Creating an Express Server

Moving from project setup, I started by installing Typescript & Express Types as a developer dependency, as well as express as a dependency in the server directory.

$ cd server
$ npm i express
$ npm i -D typescript @types/express

Once completed it should add a new directory in the server directory called node_modules & a new file called package-lock.json. The packages do the following:

• Express: a lightweight framework that simplifies web server creation
• Typescript: a superset of Javascript that introduces types
• Types/Express: are the type definitions for Express

In the app.ts file I first imported express as well as the express type into the file. Next I made a constant to use express while making sure it's type is the express type.

import express, { Express } from 'express';
const app: Express = express();

Next I want to make sure the server is listening to a port. Under the above code add the following to it:

app.listen(3000, () => {
  console.log(`Server is on Port: 3000`);
});

Configuring Typescript for Node.js

While I may have made an Express server Node.js can't run typescript files so I need to make it possible for Node to run my code. First I ran the typescript compiler, that was installed locally when I installed typescript as a dev dependency, to initialize it.

$ npx tsc --init

This command will generate a tsconfig.json file that is used to configure how typescript behaves when compiling the typescript code. I changed two parts in the typescript config:

1. Setting rootDir to "./src"
2. Setting outDir to "./dist"

I simply uncommented them and changed the value to use them. The "rootDir" is checking what directory to compile the typescript from & the "outDir" is what directory to use when compiling the typescript into javascript.

You can compile the typescript & run the server from the terminal I added two scripts inside of the package.json:

"build": "tsc --build",
"start": "node ./dist/app.js"

The first script tells typescript to build/compile the "src" directory & the second tells Node to start the server. I made these scripts so that I don't have to type out or cycle through previous terminal commands in order to run the server.

In the terminal simply run the two npm scripts together & the server should start.

$ npm run build
$ npm run start

Routes & User Input

Having a server that simply runs on a machine is nice, but I want it to be able to respond to request & take in user input.

First I changed the express import to also have the Request & Response Types. Next I configured the "app" to use express.json function. After that I created a PORT constant that either collects the environment variable "PORT" or uses 3000. Lastly I made a route that collects the request body & responds with it. The app.ts should look like the following:

import express, { Express, Request, Response } from 'express';

const app: Express = express();
app.use(express.json());

const PORT = process.env.PORT || 3000;

app.post("/poll", (req: Request, res: Response) => {
	const test = req.body.test;

	res.status(200).send(`Reponse ${test}`);
});

app.listen(PORT, () => {
	console.log(`Running on Port: ${PORT}`);
});

If you would like to check out the code or us it for yourself: Github Link

If this blog was helpful to you please consider subscribing.

For the last blog Vict E-commerce: Adding Basic Security I implemented a change going from JWT to sessions while my overall understanding of security has improved slightly there is still room for improvement not only on my comprehension, but also in the code for this project. If you would like to read about the changes Jamil is doing check out his site: jaml.co

Over the previous two blogs we focused on making sure things were coming along to allow for merchants to have what they need to interact with for products & storefronts. Now that those pieces have been developed we want to shift focus to make progress on the customer portion of the e-commerce application.

First Time Customers

Similar to merchants we made a model for sequelize to use as a database table. We tracked the following things in a database:

• First Name
• Last Name
• Email
• Password
• ID
• Created_At
• Updated_At

The model is put in the db directory in our src directory:

module.exports = (sequelize, DataTypes) => {
	const Customer = sequelize.define("customers", 
	{
		firstName: {
			type: DataTypes.STRING,
			allowNull: false,
		},
		lastName: {
			type: DataTypes.STRING,
			allowNull: false
		},
		email: {
			type: DataTypes.STRING,
			allowNull: false,
			unique: true,
			validate: {
				isEmail: {
					msg: "Must be a valid email address"
				}
			}
		},
		password: {
			type: DataTypes.STRING,
			allowNull: false,
		},
		id: {
			type: DataTypes.UUID,
			defaultValue: DataTypes.UUIDV4,
			primaryKey: true,
			allowNull: false
		}
	});

	return Customer
}

Sequelize generates for us the created_at & updated_at options as well as generating a uuid upon an entry into the database being added.

Customer Business Logic

Now that sequelize can use the customer model we want our server to perform three functions to register, login, & logout a customer. In the controller directory we want to make a customer controller.

For the register function we want it to do the following things:

1. Collect the necessary data from the request body
2. Define the number of salt rounds to use for bcrypt
3. Encrypt the password that the customer provides
4. Make a new customer entry in the database
5. Make a new session for the recently registered customer
6. Send a response that the entry was successful

The code should look like the following:

const registerCustomer = async (req, res) => {
	const { firstName, lastName, email, password } = req.body;
	const saltRounds = 10;

	try {
		const hashPassword = await bcrypt.hash(password, saltRounds);

		const customer = await Customer.create({
			firstName,
			lastName,
			email,
			password: hashPassword
		});

		req.session.userId = customer.id;
		return res.status(200).send({message: "Registration successful", customer});
	} catch (error) {
		console.error("Registration error:", error);
		return res.status(500).send(error.message);
	}
}

With a customer registered we want to allow them to login. The login function should do the following:

1. Collect the email & password from the request body
2. Check if the provided email is a customer in the customer database
3. Compare the provided password to the one stored in the database using bcrpyt
4. Make a new session for the customer
5. Send a response that the customer successfully logged in

The login code should look like this:

const loginCustomer = async (req, res) => {
	const { email, password } = req.body;

	try {
		const customer = await Customer.findOne({ where: { email } });
		const passwordMatch = await bcrypt.compare(password, customer.password);

		if (customer == null || !passwordMatch) {
			return res.status(401).send("Incorrect Email or Password");
		}

		req.session.userId = customer.id;
		res.status(200).send(customer);
	} catch (error) {
		console.error("Login error:", error);
		return res.status(500).send(error.message);
	}
}

Lastly for the customer controller functions is the function to logout a customer. Its logic is much simpler than registering or logging in a customer. We simply need to know the session we want to remove from the database & delete that entry.

const logoutCustomer = async (req, res) => {
	const sId = req.session.id;

	req.session.destroy(sId, () => {
		res.send("Customer has been logged out");
	});
}

With the model & controller made for the customer with need to make the routes necessary for the server to perform them upon request. Simply import the controller into the router file & make three post routes that each execute a function.

const express = require("express");
const router = express.Router();
const { registerCustomer, loginCustomer, logoutCustomer } = require("../controllers/customer.controller");

router.post("/register", registerCustomer);
router.post("/login", loginCustomer);
router.post("/logout", logoutCustomer);


module.exports = router;

Making a purchase

As with the rest of our code we want to make a model for sequelize to use to store transactions. The simplest transaction needs to track, the customer that wants to make a purchase, the product being purchased, the total of the transaction, and the id for the transaction.

module.exports = (sequelize, DataTypes) => {
	const Transaction = sequelize.define("transactions", 
	{
		id: {
			type: DataTypes.UUID,
			defaultValue: DataTypes.UUIDV4,
			primaryKey: true,
			allowNull: false
		},
		total: {
			type: DataTypes.DECIMAL(10, 2),
			allowNull: false
		},
		customer_id: {
			type: DataTypes.STRING,
			allowNull: false
		},
		product_id: {
			type: DataTypes.STRING,
			allowNull: false
		}
	});

	return Transaction
}

While it works as a transaction model I currently have defined it so it doesn't track multiple products. I will either have to change how a transaction tracks products or simply track that a transaction occurred and orders/purchases track products for a transaction.

Transaction Business Logic

The logic necessary for transaction at this time needs to perform the following:

• Create a transaction upon purchase
• Read All Transaction that a customer performed
• Refunding a transaction

In order to create a transaction we first need to collect the transaction total, the product's id, & the customer's id from the request body. The next part is to create a transaction entry in the database. Finally sending a response if the transaction was completed successfully.

const createTransaction = async (req, res) => {
	const { total, product_id, customer_id } = req.body;

	try {
		const transaction = await Transaction.create({
			total,
			product_id,
			customer_id
		});

		return res.status(201).send("Transaction complete");
	} catch (error) {
		return res.send(error);
	}
};

At the moment I only made it possible to collect all the transactions for a customer not for a storefront or even a single transaction. To view all the transactions for a customer simply collect the customer id from the request query.

const getAllCustomerTransactions = async (req, res) => {
	const customer_id = req.query.customer_id
	
	let { count, rows } = await Transaction.findAndCountAll({ where: { customer_id }});

	return res.send(rows);
};

Similar to the get all of a customer's transactions we only need to know the transaction's id and delete it from the database.

const refundTransaction = async (req, res) => {
	let id = req.query.transaction_id;

	try {
		await Transaction.destroy({
			where: {
				id,
			},
		});
		if (result[0] !== 0) {
			return res.send("Transaction refund successfully");
		}

		return res.status(404).send("Transaction not found.");	
	} catch (error) {
		return res.send(error);
	}
}

Future Plans

With the customer & transactions now added this means we have made a fairly simple store, that is unable to process payment to complete transactions, but who is keeping track of that. We want to spend our next update making improvement to the actual user experience of the store.

On the customer side of things we first want to implement a cart to track multiple items for a transaction. Modify transactions for multiple product purchases. View their order history. While on the merchant side we want to modify their orders to track and perform actions on them. For both of them we want to add roles to prevent one or the other from performing actions unless they are supposed to.

If you would like to check out the code or us it for yourself: Github Link

In my previous blog Vict E-commerce: Setting Up Shop we went over setting things up for working collaboratively between myself & Jamil, as well as database management for merchants, products, & storefronts. In this blog, I go over what we learned about JWT vs sessions and how we implemented sessions. If you would like to read about the changes Jamil is doing check out his site: jaml.co

Originally we thought to do JsonWebTokens (JWT), however upon further research we discovered what we're currently developing sessions are a better direction.

A few reasons for the switch are:

• It is much harder to revoke JWT without significant development investment such as making a blacklist
• Sessions provide a stronger guarantee that each individual request is authorized and are simpler to implement securely
• If a user is signed into multiple devices and a condition on the account where to change such as permissions or login status there is no guarantee that all devices will change

Both authentication methods require some consideration in order to prevent their specific vulnerabilities, but at the moment since we have made the decision to go with sessions, we are going to have to spend the time implementing solutions in order to mitigate those vulnerabilities.

Implementing Sessions

Sessions are normally stored in-memory on the server, however you can store sessions elsewhere. If you have a caching service, such as Redis, you might want to use that instead of in-memory storage on the server. Since we are using MySQL or more specifically Sequelize for MySQL, we will store sessions through Sequelize into our MySQL Database.

Install the following packages in order to create & store sessions:

• express-session
• connect-session-sequelize

Express-session is used to create sessions with express & connect-session-sequelize to connect express-session to mysql through sequelize.

npm i express-session connect-session-sequelize

In app.js add the following code to use the packages.

const session = require("express-session");
const SequelizeStore = require("connect-session-sequelize")(session.Store);

Now that we are able to use the packages that we installed. Next we will make sure that the express server is using sessions. For the session configuration we will be defining the following attributes:

• secret: used to sign the session ID cookie
• store: where we will be storing the session
• resave: whether or not we want to force saving sessions to store
• saveUnitialized: whether or not we want to force saving sessions to store that is uninitiated
• cookie:
  • maxAge: how long a cookie will live
  • secure: whether or not your site's cookies will be secure, requires HTTPS
  • sameSite: set the Same-Site attribute in cookies

app.use(
	session({
		secret: "{YOUR SECRECT KEY}",
		store: new SequelizeStore({
			db: db.sequelize,
		}),
		resave: false,
		saveUninitialized: false,
		cookie: {
			maxAge: 60000 * 60, 
			secure: false, 
			sameSite: "Lax"
		},
	})
);

Now that our server can use sessions, we need to actually create them during our authentication. When registering or logging in with merchants we will create a session and have to be associated with our merchant's id.

req.session.userId = merchant.id;

Adding an Auth Check Middleware

The server can now create & store sessions with that we want to protect our storefront & product routes, by using an authentication check. We created a middleware on our express server that will be in front of certain routes that first checks that they have a session with the server then allows them to perform the actions.

First make a directory in the "src" folder. Next we made a authCheck.middleware.js file that stores our logic for the middleware to be used by our routes. In the authCheck middleware we want to check for 2 things at the moment, one being if they have a session with us and two if that session is in our database. Last we need to make sure that we are exporting it so routes will be able to use them.

module.exports = (req, res, next) => {
	console.log("authCheck middleware triggered");
	
	if (!req.session) {
		return res.status(500).json({ error: "Internal server error" });
	}

	try {
		if (req.session.userId) {
			next();
		} else {
			res.status(401).json({ error: "Unauthorized. Please login." });
		}
	} catch (error) {
		res.status(500).json({ error: "Internal server error" });
	}
};

With a middleware created we want to import it in our storefront & product router files.

const authCheck = require("../middleware/authCheck.middleware");

In the create, update, & delete for both product & storefront we will update the route to have a middleware check. Here is an example of what it should look like:

router.post("/create", authCheck, createProduct);

When a route is triggered it does the following, first it does the authCheck middleware, if successful it moves onto the controller code and if nothing goes wrong it will complete the code and respond to the merchant.

Updating Merchants & Products

There are some slight tweaks we want to get handled now while we are updating the security for the server. We want to update the merchant to collect first & last names & update products to have storefront association.

In the merchant model we updated the model to include first name & last name with the data type being STRING & allowNull to be false. This means that in the MySQL Table that we will store the data as strings and it cannot be null value.

Similar to the merchant model we updated the product model to include storefront id with a STRING data type & allowNull to be false. This means that every product will be associated with a storefront.

In the merchant controller, we collect the first name & last name when registering a merchant. At this time we don't have anything developed to update a merchants information or even the password. For the product we collect the storefront id when creating a product. When updating a product we shouldn't be able to switch products to a different storefront so we don't collect it during that.

Future Plans

Our next part we want to develop "customers" and the necessary features for that, which will include:

• Completing transactions
• Having an order history
• User authentication.
• User Profiles

For the security we want to handle data sanitization to lower our risk of SQL Injections, rate limiting to prevent abuse & DoS attacks. There are additional benefits to rate limiting besides those two such as resource management.

Once we implement "customers" we want to update the Personal Identifiable Information (PII) to have psuedonymization when storing data in the database.

If you would like to check out the code or us it for yourself: Github Link

The world continues to move towards a digital and omni-channel approach when it comes to shopping, with the largest platforms being closed sourced, such as Amazon and Shopify, my friend Jamil and I decided to see what it would be like to develop a platform for ourselves.

A secondary reason is, while not the most unique project we still have to solve certain features and challenges: user authentication, product management, data visualization, and lastly user interface and experience.

While we could have worked on the project separately or developed our own solutions to this, we decided to work together for this. One of the reasons being it's a chance for us to work collaboratively instead of individually on something. Next, we currently each have a preference on working on different parts of the application. I have a preference with working on the backend and my friend, Jamil prefers to work on the frontend.

In our blog updates, I will concentrate on detailing the backend development aspects, my area of expertise, while Jamil will cover the backend development. Check out Jamil's insights on his blog here: Jamil Blog

Collaboration

Git & Github

In order to make the collaboration between the two of us possible we have to use a version control system specifically Git. We setup a repository with Github for our code. I added Jamil as a collaborator in the Github repo settings to allow him to push code to it. We made two separate directories one for client side code and the other for server side code.

Something simple we decide to do was work on git branches to get us comfortable with them on our local devices. For this project currently to get the code back onto the "main" branch we use merge to make this happen. At some point we hope to start using more of the tools for git branches.

Scope of work

As we are making an e-commerce platform we wanted to start out with making Merchants (people who control products & storefronts), Storefronts (a page to sell products), and lastly products (items to be sold).

When we first started coding we only had merchants and products. One of the things we realized, was a "merchant" might have multiple "brands" or "storefronts" to sell different products. So we decided before we made to many significant changes to separate the merchant from the storefront directly and have a merchant have the possibility for multiple storefronts, but every storefront must be associated with at least one merchant.

The current problems we have with the code is products have yet to be updated so that every product is associated with a storefront. Another issue we learned while developing is while we know that we need to handle authentication/credentials, we actually don't know how to handle authentication.

Server Side Implementation

In the server directory I added npm to the directory using "npm init" and completing the prompts. Once completed I installed the following npm packages:

• Express for the server framework
• Sequelize for the Object–relational mapping
• Mysql2 for Sequelize to use MySQL
• CORS for the Cross-origin resource sharing
• Bcrypt for password-hashing
• Jsonwebtoken for Authentication/Credentials

I made a new directory named "src" which is the source directory to store all the code I am developing for the server. Within the "src" directory I added an app.js file to serve as the main server file. This file is used to setup, start, and tell the server what port to listen to.

In the "src" directory I made three subdirectories; "router", "controller", & "models". The "router" directory defines the routes for the server. The "controller" directory defines the business logic that needs to be performed for a specific route. Lastly the "models" directory stores the sequelize connection and logic, as well as the model definition for the database tables.

In the merchant controller I salted and hashed the password using bcrypt before storing them in the database. This was because we don't want to store plain text passwords if someone where to gain access to our database. During register and login for the merchants we use JWT for credentials. Currently we understood the need to set it up, but we are still working out the kinks for properly handling credentials and usage.

At the moment we have developed a simple CRUD application for the storefronts and products. I need to develop the necessary parts, once we solve the authentication/credentials issue, to update and delete merchants. At this time all you can do is register and login as a merchant.

In app.js we had to use the CORS package so we can send data to our frontend app. We had an issue where when we would send data to our frontend we would get CORS issues, so we simply installed the package and enabled it.

Future Plans

At the moment one of the simplest things we would like to address would be adding information to our README so others could use our app or modify it as necessary. Looking ahead we want still haven't completed our current scope for merchants, products, & storefronts. In our next update we want to have solved the following:

• Authentication & credentials
• Products being associated with Storefronts
• Updating & Deleting Merchants

Past that we still have develop "customers" and the necessary features for that, which will include:

• Completing transactions
• Having an order history
• User authentication.

Some things that I would like to address is logging and error handling for the backend server.

If you would like to check out the code or us it for yourself: Github Link

Have you ever wondered about starting your own website? Want to make your own blog, personal website, or even if you are bold enough your own store? Want to have some control over your online presence? 

This post is meant to be a simple guide for you to reference in order to setup your own website.

In my previous post, I explained, even briefly, about the technology: Websites 101

Reasons to have your own website

There are many reasons to start your own website. I personally started my website for a few reasons. One of the reasons I wanted to do this, is to build my credibility in order to improve my professional life & prospects. Another reason I wanted to do this is to improve my writing & communication skills. 

Common reasons to start a website:

1. It helps you build credibility
2. It helps you develop your own ideas
3. It helps improve your writing and communication skills
4. It helps your professional life - People will search you up, this could be something they find/ puts your best foot forward
5. It helps you develop connections (networking)
6. You expose yourself to new & interesting opportunities
7. You can have a lot more impact on people, communities, & causes
8. It helps you develop your own business & brand

You might start your own website for the reasons I provided or for one reason or another. The most important thing is that you know why you are starting a website. 

What You Need To Know

The good news about setting up a website is that, businesses over the years have made the process of getting a website online incredibly easy. There are only a few things that you need in order to get your website up:-  Domain Registrars- Web Hosting- Content Management Systems

Of the three things you should be paying for the domain of your website & it's hosting. 

Domain Registrar

The domain registrars are businesses that sell domains to you. This is the name of your website that people enter in the URL. Some of the most common & popular domain registrar are: 

1. GoDaddy
2. BlueHost
3. Namecheap
4. Hostgator

Web Hosting

Web hosting is a service that allows you to host your website. Most if not all domain registrars now also provide web hosting services, but you can have a separate web hosting service from your domain registrar. Here are the common services for Web Hosting & Cloud Hosting:

Web Hosting

• Shared Hosting
• Virtual Private Server
• Dedicated Hosting

Cloud Hosting

• Amazon Web Services
• Microsoft Azure
• Google Cloud Platform

Content Management Systems

Unless you have a technical knowledge to deliver your own content, you should consider using a content management system in order to deliver your content. When it comes to your options for there are free and paid for options. The paid for options are also web hosting.

Free Open Source Software

1. WordPress
2. Drupal
3. Joomla
4. Ghost

Paid-Options

1. Squarespace
2. Wix
3. Shopify
4. BigCommerce

How To Set Up A Website

I am going to keep this setup simple, we are going with a domain registrar that also has web hosting services.

1. Figure out why you want to host a website

This will be personal to you & why you want to start a website, but having it written out somewhere either publicly or privately will do you good for you.

2. Go to Bluehost

While I personally don't have my website on Bluehost, I would recommend it for someone starting out since the pricing isn't hefty and they are also a domain registrar. 

3. Choose a WordPress plan

To make your process simple and have a content management system to include with your plan is to go with a WordPress plan. If you are unsure or strapped for cash go for the basic plan, if you got some more to give go for the "Choice Plus" plan. 

4. Pick your domain name

Your domain address is what people type into the search bar to get to your website. Enter the domain you want to go with, the domain might get taken it and Bluehost will say that the domain is not available. Keep trying until you find a domain that works for you. Here are some simple tips for your domain:

• Don't make it complicated
• Make it something people will remember
• Try your best to get it to end with .com

5. Enter your account information

Once you found your domain you will you setup your account. Go through the account setup process for Bluehost. After this you will get to design your website.

6. Design your Website

Since this a WordPress site you are going to need to do a few things to make this site your own. 

• Choose a Theme

Thousands upon thousands of themes are available, ranging from absolutely free to upwards of hundreds of dollars. When selecting your theme, try to ensure that it makes sense for both the topic of your site and the layout and content you plan to publish.

Themes are the main guidelines for your websites appearance. 

• Install Plugins

A WordPress plugin is a piece of software that “plugs into” your WordPress site. Plugins can add new functionality or extend existing functionality on your site, allowing you to create virtually any kind of website, from ecommerce stores to portfolios to directory sites.

Plugins can make small tweaks on your site or massive changes, depending on their features. Add the plugins that best fit the kind of website your are going for.

• Customize Your Theme/Site

Now that you have your theme for your appearance & plugins for your functions it's now time to make your site personal. You will want to change the text, images, colors, forms, & pages. This may seem like a lot, but once you do this it will be the website that you want to do.

GREAT! You have your own website now! 

From here on out you still need to do things to bring traffic to your website such as SEO. You will also need to keep your website up to date as much as possible. 

If this blog was helpful to you please consider subscribing

Step-by-Step Guide to setting up your website from domain purchase to website launching: https://jesstin.com/launching-your-own-personal-website-setup-guide/

What You Need To Know To Get Started

As more & more of our lives shift to a digital medium the need to have a digital presence is growing. While most individuals will go with a much simpler setup of creating social media accounts on sites such as Facebook, Instagram, Twitter, LinkedIn, etc. One of the things to stand out amongst the crowd in this case is to have your own website. 

Having recently setup & launched my own website, I thought about sharing what I have learned both about the technology itself and the process of launching. In this blog I will be going over the knowledge & technology that go into your website and the wider internet. In a later blog I will go over a proper step-by-step guide in you are interested.

Here is a quick rundown of the basics that go into how your website operates & why you might want to start your own website: 

Domain Overview

• Domain Name System
  • Domain Registrar
  • Nameservers
  • DNS Records
• Web Servers
• Content Management Systems

With that out of the way let's explore what happens when you make a request, to let's say https://www.facebook.com. Your computer sends a request to your ISP DNS server if it knows where the website is it will respond to your computer with the IP address of the website. If the server doesn't know where the website is it will make requests to other DNS servers till the website's records are located, then it will respond to your computer with the IP address of the website.

Domain Name System

Now that we know who maintains the protocol that your devices use to access the internet, let's learn a little about who sells domains. 

For starters you won't be buying a domain from ICANN or IANA, instead you will be being from an accredited business that IANA recognizes known as a Domain registrar. While there are other types of sellers that vast majority of people will be getting their domains from a registrar. To clarify something though, you don't technically 'own' the domain, domains are reserved for you for a period of time & domain registrars hold them for you. 

Now that you have a domain it's time to get your domain attached to servers. In order to do that you need to have a server that keeps the records of your domain, that server is a Nameserver

Nameservers

While domains are the name of a website, a nameserver is the servers that determine the direction that website traffic needs to go to. If you want an analogy; where domains are the location, nameservers are the directions. 

When you purchase a domain, Domain Registrars come with their own nameservers already setup for you. They make it easy for you to modify the records of your nameserver to setup your website how you would like. It is possible to setup your nameserver outside of your domain registrar if you want. For example, I have my nameservers with my web hosting currently as an example. 

There are a multitude of records that configure not only where the traffic goes, but also more specifically what kind of traffic goes where. A nameservers records are known as DNS Records.

DNS Records

DNS records hold the information about which IP addresses match which domains. Their several types of records you will enter, each one requiring different information in order for them to work. Here are the most common to use for most people: 

• Address Mapping record (A Record)—also known as a DNS host record, stores a hostname and its corresponding IPv4 address.
• IP Version 6 Address record (AAAA Record)—stores a hostname and its corresponding IPv6 address.
• Canonical Name record (CNAME Record)—can be used to alias a hostname to another hostname. When a DNS client requests a record that contains a CNAME, which points to another hostname, the DNS resolution process is repeated with the new hostname.
• Mail exchanger record (MX Record)—specifies an SMTP email server for the domain, used to route outgoing emails to an email server.
• Text Record (TXT Record)—typically carries machine-readable data such as opportunistic encryption, sender policy framework, DKIM, DMARC, etc.

Web Hosting Servers

You got your domain, you know how DNS works so how do we get a website?

Servers are simply programs/devices that provide a service that another computer can access. A singular physical server might have multiple program servers on it. To get a website you need to allocate resources, their are services out their that do the allocation for you or you can host it yourself at your place of business. Here is a list of how you can host your website:

1. On Premise
   1. Small to Medium Business Servers
   2. Data Warehouses
2. Web Hosting
   1. Shared Hosting
   2. Virtual Private Server
   3. Dedicated Hosting
3. Cloud Hosting
   1. Amazon Web Services
   2. Microsoft Azure
   3. Google Cloud Platform

For the vast majority of people they will go with getting the allocation done for them. This means they will mostly go with the second option and go from there. If you are a little more confident in you in your technical skills and don't mind a little grunt work you can go with a Cloud Hosting/Computing option like I did with Amazon Web Services. 

To connect your web hosting with your domain you will provide the relevant records to your nameserver.

Content Management Systems

Your almost done, while having a website is nice, unless you want to build your website from the ground up & how it handles content management, it might be simpler to go with something that already exists. 

Content Management System or CMS is software that helps users create, manage, & modify the content on a website without the need for specialized technical knowledge. Instead of building your own system for creating web pages, storing images, and other functions, the content management system handles all that basic infrastructure stuff for you so that you can focus on more forward-facing parts of your website.

There are free options and paid for options for CMS:

Free Open Source Software

1. WordPress
2. Drupal
3. Joomla
4. Ghost

Paid-Options

1. Squarespace
2. Wix
3. Shopify
4. BigCommerce

Here is how my website is setup if you are curious:

Domain Registrar: Namecheap
Web Hosting: Amazon Web Services (AWS)
Content Management System: Ghost

I know that this was a lot to take in & you probably still have questions, but this was mostly meant to be a quick overview. I also didn't go over how to set it up, this was meant to clarify what is happening from a high-level overview when you are setting it up. 

Step-by-Step Guide to setting up your website from domain purchase to website launching: Step-by-Step Guide [LINK]

If this blog was helpful to you please consider subscribing