Polling Webs App - Deleting Results & Making a Nextjs Frontend

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.