TypeScript, or Something Better?

29 Apr 2026

Tell me, what are Design Patterns?

To the best of my knowledge, design patterns are the ways in which systems of object-oriented programming are constructed, maintained, and executed. I think of them as the architectural frameworks of any good program. Moreover, they are somewhat replicatable, which represents the “pattern” aspect. From what I have learned, there are three categories of design patterns. The first of which is the creational category that describes how objects are formed. Then there’s the structural category that denotes how objects are interlinked. As well as the behavioral category in which it details how these objects function.

Let’s compare:

A few of the patterns that I have learned about are the Singleton, Factory, Observer, and Controller. Within traditional coding practices, we can use instances, constructors, and methods to return objects. However, with the Singleton, you can create global variables where objects passed through by reference. This creational pattern's built-in property eliminates the need for constructors and methods within JavaScript. Then there is the factory pattern that allows for objects to be called from a database and is found when using interfaces. Being a creational pattern, this software allows for game development, notifications, and payment gateways.

Additionally, there is the observer pattern that acts as an event handler that updates your system. This behavioral pattern allows for user interface functionality, such as inputting information. Finally, we have the Model-View-Controller, a behavioral design pattern that affects the components that the user can view. Much like a controller that alters the methods of execution. These designs are not hardset. Instead, they allow for frameworks to build on and provide outlines for solving complex problems.

How did these Design Patterns show up in your final project?

With that in mind, here are some of the design patterns that I used throughout our final project. Instances such as factory patterns can be found with the queries to our database in const games = await prisma.game.findMany(); or const players = await prisma.player.findMany(); . This helped us to create arrays of our objects that are represented within the players cards. Additionally, I used examples of singleton patterns, such as import { prisma } from '@/lib/prisma' . This allowed us to share prisms throughout our app, better managing our database and preventing multiple connections.




Not to mention the use of Observer patterns with  const [favorites, setFavorites] = useState([]); . As well as  setFavorites((prev) => prev.filter(…)) . Both of which update the UI to reflect changes of its state within React. Moreover, we implemented event handlers with  onClick={() => onToggleLibrary(game.id)}  and  onClick={() => onRemove(game.id)}. Not to mention,  use of Controller patterns through implementing client logic of our API/library. To control the data flow between the user interface and the database is best seen in the line export async function POST(req) { ... } . In addition, we implemented   async function handleAdd(gameId: number) { await fetch('/api/library', { method: 'POST' }); } .