After several years, I’m back with making the Video Game API project again. But this time, it’s using the following technologies:
<ul>
<li>NextJS</li>
<li>TypeScript</li>
<li>React</li>
<li>Node</li>
<li>Tailwind CSS</li>
<li>DaisyUI</li>
<li>MongoDB</li>
<li>Mongoose</li>
</ul>
It’s possibly my first steps into making a small full stack application of some kind.
I’ve been doing a lot of tutorials over the past few months about web development and being able to put the knowledge I have together into one project and get it running in production has been hugely enjoyable.
In this post, I want to show the work I’ve put into the project, the technologies I used, how they work and share my thoughts on the process.
If you want to check this out on GitHub, here is the <a href="https://github.com/JB-26/video-game-api-nextjs">link</a>. This will also include a Postman collection so you can go and send a few requests to this API. Feel free to explore and use the API! But please don’t send any personal information, this is a public API.
And if you want to see this in production, you can view it <a href="https://video-game-api-nextjs.vercel.app/">here.</a>
<h2>MongoDB</h2>
One of my previous attempts at making the video game API resulted in the data being stored in memory, and not a database. That’s not great if you are going to have hundreds (maybe thousands) of entries.
This time, I used MongoDB, which is hosted on Atlas. After configuring a (free) cluster, I needed to install the driver for my project:
<pre><code>npm install mongodb
</code></pre>
The credentials are stored in a <code>.env</code> file (which are not committed to the repo on GitHub). But to interact with the database, I needed to use Mongoose, which provides a straight-forward, schema-based solution to model application data.
I created a file called <code>db.ts</code> which would handle connecting to the database via Mongoose:
<pre><code class="language-tsx">import mongoose from "mongoose";

const MONGODB_URI = process.env.MONGODB_URI;

const connect = async () => {
 // check if connected, so we don't connect twice
 // Connection ready state
 // 0 = disconnected
 // 1 = connected
 // 2 = connecting
 // 3 = disconnecting
 // 99 = uninitialized
 const connectionState = mongoose.connection.readyState;
 if (connectionState === 1) {
 console.log("Already connected to MongoDB");
 return;
 }

 if (connectionState === 2) {
 console.log("Connecting to MongoDB...");
 return;
 }

 // ensure that the connection is established before proceeding
 try {
 await mongoose.connect(MONGODB_URI!, {
 dbName: "videogameapi",
 bufferCommands: true,
 });
 console.log("Connected!");
 } catch (err) {
 console.log(`Error - ${err}`);
 throw new Error(`Error - ${err}`);
 }
};
export default connect;

</code></pre>
The <code>connect</code> promise will be called when a user tries to submit a request to the API. It will return a message to the console displaying if it connected to the DB, or if it’s already been connected.
<h3>The model</h3>
The next piece of the puzzle is to create a model, which describes the schema for the database. This is what I created for the video game API (in a file called <code>videogame.ts</code>):
<pre><code class="language-tsx">import { Schema, model, models } from "mongoose";

const VideogameSchema = new Schema(
 {
 title: { type: String, required: true },
 platform: { type: String, required: true },
 developer: { type: String, required: true },
 releaseDate: { type: Date, required: true },
 },
 {
 timestamps: true,
 },
);

// check if the model exists before creating one
// fun fact: mongoose is case sensitive, so we need to use the same casing as the model name. Otherwise it will try to overwrite the existing model.
const Videogame = models.Videogame || model("Videogame", VideogameSchema);

// exported so it can be used in other files
export default Videogame;

</code></pre>
The model will have the title, platform, developer and release date. After defining the model, I have a check for if the model exists before creating one.
I fell into a trap where I accidentally used different casing when checking if the model exists, which caused my application to crash as it tried to create another model if I sent another request to my API.
<h2>The API itself</h2>
When working with NextJS, there are a few things to keep in mind when creating an API:
<ul>
<li>Everything backend will be in the api folder.</li>
<li>The <code>videogame</code> folder will be an API once we have the <code>route.ts</code> file, the name cannot be changed.</li>
<li>If we have a folder with parentheses, <code>(auth)</code>, this will be ignored in the URL on the backend and frontend.</li>
<li>If we have a folder with square brackets, <code>[category]</code>, this will be dynamic.</li>
</ul>
This is an example of the <code>GET</code> request in the <code>route.ts</code> file:
<pre><code class="language-tsx">// GET endpoint
export const GET = async () => {
 try {
 // connect to the db
 await connect();
 const videogames = await Videogame.find();
 return new NextResponse(JSON.stringify(videogames), { status: 200 });
 } catch (error) {
 return new NextResponse(`Error in retrieving video games - ${error}`, {
 status: 500,
 });
 }
};
</code></pre>
This will use <a href="https://nextjs.org/docs/app/api-reference/functions/next-response">NextResponse</a>, which extends the Web Response API and does the following:
<ul>
<li>Connect to the database (using the database file mentioned above)</li>
<li>Retrieve all entries using the <code>find</code> method</li>
<li>Return the results and give a status of 200.</li>
</ul>
This is wrapped up in a try/catch block, so should something go wrong, I can return an error message with a status of 500.
I won’t go over each function in this post, if you want to take a deeper look, check out the GitHub repo and look at the <code>route.ts</code> file under <code>app</code> → <code>api</code> → <code>dashboard</code> → <code>videogame</code>.
<h2>The frontend</h2>
This time around, I’m using <a href="https://tailwindcss.com/">TailwindCSS</a> and <a href="https://daisyui.com/">DaisyUI</a> for the frontend. This is brand new to me so I was eager to jump in and try it. It feels strange to write in line CSS but I do appreciate how easy it is to make elements bold, change the font size, etc.
And I think this home page is a good example that I am extremely new at this:
<pre><code class="language-tsx">import Link from "next/link";
import Footer from "./components/Footer/footer";
import Header from "./components/Header/header";

export default function Home() {
 return (
 &#x3C;div data-theme="lofi" className="min-h-screen flex flex-col">
 &#x3C;Header />
 &#x3C;div className="hero bg-base-200 flex-1">
 &#x3C;div className="hero-content text-center">
 &#x3C;div className="max-w-md">
 &#x3C;h1 className="text-5xl font-bold">The Video Game API&#x3C;/h1>
 &#x3C;p className="py-6">
 Welcome to the Video Game API! A small portfolio project to
 showcase my skills in the following technologies:
 &#x3C;/p>
 &#x3C;ul>
 &#x3C;li>NextJS&#x3C;/li>
 &#x3C;li>TypeScript&#x3C;/li>
 &#x3C;li>Node&#x3C;/li>
 &#x3C;li>MongoDB&#x3C;/li>
 &#x3C;li>Mongoose&#x3C;/li>
 &#x3C;li>TailwindCSS&#x3C;/li>
 &#x3C;li>DaisyUI&#x3C;/li>
 &#x3C;/ul>
 &#x3C;p className="py-6">
 Looking for the GitHub repo? Check out the{" "}
 &#x3C;Link
 href="https://github.com/JB-26/video-game-api-nextjs"
 className="link"
 rel="noopener noreferrer"
 target="_blank"
 >
 link here!
 &#x3C;/Link>
 &#x3C;/p>
 &#x3C;p>
 The GitHub repo also has a JSON Postman collection, which can be
 used to send requests to the API. There are some example requests
 below.
 &#x3C;/p>
 &#x3C;div
 role="alert"
 className="alert alert-warning py-3 text-center text-xl"
 >
 &#x3C;span>
 Warning: &#x3C;strong>Do not enter any personal information!&#x3C;/strong>{" "}
 &#x3C;br />
 This is a public API. Please use this API responsibly.
 &#x3C;br />
 Do not use this API for any illegal or unethical purposes.
 &#x3C;br />
 This is designed to demonstrate my skills.
 &#x3C;/span>
 &#x3C;/div>
 &#x3C;h2 className="text-2xl font-bold py-4">API Documentation&#x3C;/h2>
 &#x3C;h3 className="text-xl font-bold">Endpoints&#x3C;/h3>
 &#x3C;h4 className="text-lg font-bold p-3">GET&#x3C;/h4>
 &#x3C;p>Retrieves a list of all games in the database.&#x3C;/p>
 &#x3C;p>Example request&#x3C;/p>
 &#x3C;div className="mockup-code w-full">
 &#x3C;pre data-prefix="$">
 &#x3C;code>
 curl --location
 &#x26;apos;http://localhost:3000/api/videogame&#x26;apos;
 &#x3C;/code>
 &#x3C;/pre>
 &#x3C;/div>
 &#x3C;h4 className="text-lg font-bold p-3">POST&#x3C;/h4>
 &#x3C;p>Creates a new video game in the database.&#x3C;/p>
 &#x3C;p>Example request:&#x3C;/p>
 &#x3C;div className="mockup-code w-full">
 &#x3C;pre data-prefix="$">
 &#x3C;code>
 {`curl --location 'http://localhost:3000/api/videogame' \\
 --header 'Content-Type: application/json' \\
 --data '{
 "title": "Teleroboxer",
 "platform": "Virtual Boy",
 "developer": "Nintendo",
 "releaseDate": "1995-07-21"
 }'`}
 &#x3C;/code>
 &#x3C;/pre>
 &#x3C;/div>
 &#x3C;h4 className="text-lg font-bold p-3">PATCH&#x3C;/h4>
 &#x3C;p>Updates an existing video game in the database.&#x3C;/p>
 &#x3C;p>Example request:&#x3C;/p>
 &#x3C;div className="mockup-code w-full">
 &#x3C;pre data-prefix="$">
 &#x3C;code>
 {`curl --location --request PATCH 'http://localhost:3000/api/videogame' \
 --header 'Content-Type: application/json' \
 --data '{
 "id": "68f132db91b7c422b855f547",
 "newTitle": "Super Smash Bros. Melee",
 "newPlatform": "GameCube",
 "newDeveloper": "Nintendo",
 "newReleaseDate": "2001-11-21"
 }'`}
 &#x3C;/code>
 &#x3C;/pre>
 &#x3C;/div>
 &#x3C;h4 className="text-lg font-bold p-3">DELETE&#x3C;/h4>
 &#x3C;p>Deletes a video game from the database.&#x3C;/p>
 &#x3C;p>Example request&#x3C;/p>
 &#x3C;div className="mockup-code w-full">
 &#x3C;pre data-prefix="$">
 &#x3C;code>
 {`curl --location --request DELETE 'http://localhost:3000/api/videogame?gameId=68f3618fe2a8856bd22843ad'`}
 &#x3C;/code>
 &#x3C;/pre>
 &#x3C;/div>
 &#x3C;/div>
 &#x3C;/div>
 &#x3C;/div>
 &#x3C;Footer />
 &#x3C;/div>
 );
}

</code></pre>
Then there is the page that displays all the video games that are currently in the database:
<pre><code class="language-tsx">import Footer from "../components/Footer/footer";
import Header from "../components/Header/header";
import connect from "@/lib/db";
import Videogame from "@/lib/models/videogame";

// disable caching
export const dynamic = "force-dynamic";
export const revalidate = 0;

interface VideoGame {
 id: number;
 title: string;
 platform: string;
 developer: string;
 releaseDate: string;
}

const VideoGame = async () => {
 // connect to the db
 await connect();
 // get all video games from the database
 //.lean() returns plain JavaScript objects instead of Mongoose documents
 const videoGames = await Videogame.find().lean();
 console.log(videoGames);
 return (
 &#x3C;div data-theme="lofi" className="min-h-screen flex flex-col">
 &#x3C;Header />
 &#x3C;div className="hero bg-base-200 flex-1">
 &#x3C;div className="hero-content text-center">
 &#x3C;div className="max-w-md">
 &#x3C;h1 className="text-5xl font-bold">Video Games in the API&#x3C;/h1>
 &#x3C;p>
 Here you will find what is currently stored in MongoDB! If you
 have added a new game, it will be displayed here. You might need
 to refresh the page if you had this page opened when you added a
 new game.
 &#x3C;/p>
 &#x3C;h2 className="text-3xl font-bold p-3.5">Video Games&#x3C;/h2>
 &#x3C;p>This fetch was made at {new Date().toLocaleTimeString()}&#x3C;/p>
 &#x3C;table className="table table-bordered">
 &#x3C;thead>
 &#x3C;tr>
 &#x3C;th>Name&#x3C;/th>
 &#x3C;th>Platform&#x3C;/th>
 &#x3C;th>Developer&#x3C;/th>
 &#x3C;th>Release Date&#x3C;/th>
 &#x3C;/tr>
 &#x3C;/thead>
 &#x3C;tbody>
 {videoGames.map((game) => (
 &#x3C;tr key={game.id}>
 &#x3C;td>{game.title}&#x3C;/td>
 &#x3C;td>{game.platform}&#x3C;/td>
 &#x3C;td>{game.developer}&#x3C;/td>
 &#x3C;td>{new Date(game.releaseDate).toLocaleDateString()}&#x3C;/td>
 &#x3C;/tr>
 ))}
 &#x3C;/tbody>
 &#x3C;/table>
 &#x3C;/div>
 &#x3C;/div>
 &#x3C;/div>
 &#x3C;Footer />
 &#x3C;/div>
 );
};

export default VideoGame;
</code></pre>
I originally planned on using <code>fetch</code> on my own environment, but I ran into the problem of trying to use <code>localhost</code> on the server, not my deployed application.
So I switched this out to using a familiar approach of retrieving all the entries in the database by connecting to it. Something I did learn was the use of the <code>lean()</code> method, which returns JavaScript objects. This makes it much easier to map the individual entries on the table.
I also disabled the caching of the page as I wanted to ensure that if someone added a new entry to the database, they could refresh the page and see the changes made instantly.
<h2>Things that could be improved</h2>
<h3>Adding Bearer tokens (authentication)</h3>
Having an authentication scheme is important for modern APIs, and one way would be using <a href="https://swagger.io/docs/specification/v3_0/authentication/bearer-authentication/">Bearer Authentication</a>, which gives access to users who provide the token.
This can be added to NextJS via authentication middleware to check if the user has an appropriate token. This could be achieved using the following setup in the directory; <code>middlewares -> api -> authMiddleware.ts</code>
<pre><code class="language-tsx">// checking if the bearer token from the client is passed
// if not, return a 401 Unauthorized response

const validate = (token: string | undefined) => {
 const validToken = true;
 if (!validToken || !token) {
 return false;
 }
 return true;
};

export function authMiddleware(req: Request) {
 // get the token from the header
 const token = req.headers.get("authorization")?.split(" ")[1];

 return { isValid: validate(token) };
}
</code></pre>
<h3>Tailwind CSS and DaisyUI</h3>
This is definitely my weakest area, the UI on the front end is okay at best. It absolutely could do with some improvement. I’m planning on learning a little more about Tailwind and Daisy and make improvements to the frontend. It feels extremely weird writing in line CSS.
I think the themes and components available on DaisyUI are nice, and I want to spend more time exploring the components that are available.
<h3>More API functionalities</h3>
Although you can find everything in the database, you can’t search it for a specific entry. This is something that I want to improve in the near future. I was also thinking of pulling all games for a particular platform (think of it as a category).
<h3>Interact with the API via the frontend</h3>
At the moment, the frontend is quite limited. All you can do is view the documentation and see what is in the database via a table. I plan on expanding the functionality so that a user can add, delete and modify a video game from the frontend.
<h2>How is this better than the previous attempts?</h2>
The biggest improvement is that this uses a database, so not storing all the entries as objects in memory, and being able to view the results of the API directly in the frontend is a huge improvement compared to my previous attempts.
Although the functionality is the same, I think the overall ‘product’ is much better this time around.
<h2>Wrap up</h2>
It’s been good to build a more ‘complete’ product, especially using a modern framework and database. Remember, you can send requests to the API! Be sure to send me a message if you have any questions.
I’ll write another post once I make updates to this small project in the future.

Making the Video Game API (again) in NextJS

If you look at this post (or any of my posts), you’ll probably notice that the first letter is much bigger than the rest of the text. This is what is known as a drop cap. You might have seen this used on various magazines, books, and blogs like <a href="https://www.theverge.com/">The Verge</a> and <a href="https://www.eater.com/">Eater</a>.
After seeing this being used so much, I decided to research what it was and how I can implement it on my blog. First, I needed a definition of what a drop cap was and of all places, <a href="https://www.lenovo.com/gb/en/glossary/drop-cap/">Lenovo</a>, offered the best explanation for what a drop cap was:
<blockquote>
Drop cap is a typographic feature commonly used in publishing to enhance the visual appeal of text. It involves enlarging the initial letter of a paragraph, often extending it into the lines below, creating an aesthetically pleasing design element.
</blockquote>
What the uses of drop caps are:
<blockquote>
Drop caps are commonly used in various forms of printed materials, including books, magazines, and newspapers. They serve as a visual cue to mark the beginning of a new section or chapter, making the text more visually appealing and engaging for readers.
</blockquote>
If a drop cap can be used in digital content:
<blockquote>
Drop caps are less commonly used in digital content compared to print media. However, they can still be employed in certain contexts, such as e-books, online magazines, or blog posts, to create a visually striking introduction and capture readers' attention.
</blockquote>
And if you could add drop caps to a website and what the best practices are:
<blockquote>
Yes, you can add drop caps to your website using cascading style sheets (CSS). By applying appropriate CSS code to the desired hypertext markup language (HTML) elements, you can achieve the drop cap effect. However, it's important to ensure that the usage of drop caps doesn't negatively impact the overall user experience or page loading times.
Here are some best practices for using drop caps effectively in design:
<ul>
<li>Ensure that the drop cap is visually consistent with the overall design of the document or webpage.</li>
<li>Choose a font and size that is legible and complements the surrounding text.</li>
<li>Use drop caps sparingly to avoid overwhelming the reader or detracting from the content.</li>
<li>Consider the cultural context and target audience when deciding whether to use drop caps.</li>
</ul>
</blockquote>
It’s honestly a well written document explaining how drop caps can be used in newsletters, media content and listing popular design trends.
With this in mind, I began to create a drop cap that would be aesthetically pleasing to the user, while not impacting the overall user experience or performance of loading a post.
I recently made a post about some <a href="https://www.joshblewitt.dev/posts/2025-05-20-performance">performance improvements</a> I had made to my blog, including removing custom fonts. I decided that it would be best to continue using this font stack for the drop cap.
<pre><code class="language-css">body {
font-family:`

`-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Oxygen,
Ubuntu,
Cantarell,
Fira Sans,
Droid Sans,
Helvetica Neue,
sans-serif;`

`}
</code></pre>
It’s a consistent sans-serif look across all operating systems that looks modern, which is what I want. Obviously the drop cap will be in bold and several times larger that the rest of the text, so that it stands out and grabs the readers attention.
Next, I want to the text to wrap around the drop cap, that means I will need to use:
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float">Float</a>; best way to make text wrap</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height">Line-height</a>; tightening vertical space</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right">Margin-right</a>; for breathing room</li>
</ul>
Then comes the logic, how can this be applied to only one character on a blog post?
Pseudo-class and a pseudo-element will do the trick, as it turns out.
First, this will need to be applied to the first paragraph element, which is where the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type">first-of-type</a> pseudo class comes in. But now we need to target the first letter in that element, which can be achieved with the pseudo element of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter">first-letter</a> comes in.
However, my first attempt had a slight issue. It was applying the CSS to quote blocks, which didn’t look great. I was slightly confused on how I could resolve this, but I learnt about the use of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator">child combinator</a>, which will now only target the first paragraph that is a direct child of my CSS class.
So with this in mind, this is the CSS I had for achieving the drop cap style that I wanted, which looks like this:
<pre><code class="language-css">.dropCap > p:first-of-type::first-letter {
 float: left; /* allows text to wrap around it */
 font-size: 4em; /* 4 times current font size */
 line-height: 0.8; /* tightens vertical space */
 margin-right: 8px; /* breathing room */
 /* font styling */
 font-weight: bold;
 font-style: normal;
 font-family:
 -apple-system,
 BlinkMacSystemFont,
 Segoe UI,
 Roboto,
 Oxygen,
 Ubuntu,
 Cantarell,
 Fira Sans,
 Droid Sans,
 Helvetica Neue,
 sans-serif;
}
</code></pre>
The end result looks pretty good. The text wraps around the drop cap while giving it an appropriate amount of space. Plus, since it’s using fonts that would be installed on the user’s machine, the performance of loading a post isn’t impacted.
I feel that the use of the drop cap gives my blog a more professional look and I want it to be a visual cue to mark the start of a blog post.
Feel free to copy the CSS above and use it on your own blog, publication or wherever you publish.

Posts tagged with Code