Command Palette

Search for a command to run...

My 2024 Tech Stack

Ausath Ikram • Dec 16, 2024

TL;DR:

I started my journey in web development in 2023 with plain HTML, CSS, and JavaScript. In 2024, I began exploring React due to its popularity. I discovered more exciting technologies within its ecosystem. Here are the technologies I'm using in 2024.

Framework

At my college, I joined a club where we developed an internal tool using Next.js. At first, I didn't really know what that is, why do we need it, and how it works. Because of the project demands, I need to learn it quickly.

Next.js is a framework for building web applications built on top of React. As you may know, React is a library for building user interfaces and is agnostic about where it is used. There are many challenges in creating a React application on the web without additional tools, but I won't cover them here; maybe in another post.

Next.js is not perfect. There are many traps that you can fall into, mostly related to your website's performance (this is also a problem with React). There's also a problem with how quickly this framework grows, which can be overwhelming for beginners. One criticism I have for Next.js is the presence of many unstable APIs that can change at any time, which can be frustrating.

Regardless, I still think Next.js is a great framework that solves many problems related to web development and developer experience. The team behind Next.js is doing a great job teaching the community not just about using their frameworks, but building good web applications with React.

Styling

Same with Next.js, I started learning Tailwind CSS because of the project I was working on. Without asking too much questions about Tailwind, I already know it is the perfect tool for me. Tailwind CSS is great and it helps me build applications faster.

I also use shadcn/ui because it's built on top of Tailwind and is highly customizable. Additionally, large language models (LLMs) understand shadcn/ui better compared to other UI libraries.

Language

Once you start using TypeScript (or any statically typed language, for that matter), it's hard to go back. I initially started programming with C in my college, so I'm already familiar with statically typed languages. Learning JavaScript for the first time was a bit challenging because of its error-prone nature. This is especially true when working with mid-to-large codebases, where errors sometimes only occur at runtime.

Database

Postgres has always been my go-to database, although I started with MySQL in my college. I discovered Neon when I was in search of a serverless database. It has a generous free tier and easy integration with Vercel and Next.js.

ORM

I don't think writing raw SQL queries is inherently bad. There are security concerns of course, especially with SQL injections, but modern tools usually prevent that from happening. For example, Vercel Postgres SDK uses something called parameterized queries. However, I still prefer using an ORM for my projects from some added benefits like type safety and easier query building.

I chose Drizzle ORM because it strikes a great balance between being a full-featured ORM and maintaining SQL-like syntax. Here's an example of how I use Drizzle:

import { db } from '@/lib/db';
import { users } from '@/lib/db/schema';
import { verifySession } from '@/lib/session';
import { desc, eq } from 'drizzle-orm';
import { cache } from 'react';

export const getUser = cache(async () => {
  const session = await verifySession();
  if (!session) return null;

  const data = await db
    .select()
    .from(users)
    .where(eq(users.id, session.userId as string));

  const user = data[0];

  return user;
});

Even without knowing Drizzle's syntax, you can tell what the code does:

SELECT *
FROM users
WHERE id = ${session.userId}

It also has a great migration system for easily managing database schema changes and handling type inference, which is a huge plus for me.

import { pgTable, text, timestamp } from 'drizzle-orm/pg-core';

export const users = pgTable('users', {
  id: text('id')
    .primaryKey()
    .$defaultFn(() => crypto.randomUUID()),
  name: text('name').notNull(),
  email: text('email').notNull().unique(),
  password: text('password').notNull(),
  createdAt: timestamp('created_at').notNull().defaultNow(),
  updatedAt: timestamp('updated_at')
    .notNull()
    .$onUpdate(() => new Date()),
});

// You can just infer the type, how cool is that?
export type User = typeof users.$inferSelect;

Authentication

I like to use Auth.js when I need OAuth logins. It's easy to set up and has a lot of providers. However, it's still in beta and has some known issues. For my personal projects where I typically just need a simple email password login, I usually roll my own authentication system.

Next.js has great documentation on how to set up authentication with their framework.

Other Tools

I love Zod; it's a must for any TypeScript project. This is especially true with the release of React 19's new form features and server actions.

import { z } from 'zod';

export const LoginFormSchema = z.object({
  email: z.string().email({ message: 'Please enter a valid email.' }).trim(),
  password: z
    .string()
    .min(1, { message: 'Please enter your password.' })
    .trim(),
});

export type LoginFormState =
  | {
      errors?: {
        email?: string[];
        password?: string[];
      };
      message?: string;
    }
  | undefined;

import { db } from '@/lib/db';
import { LoginFormSchema, LoginFormState } from '@/lib/definitions';

export async function login(state: LoginFormState, formData: FormData) {
  const validatedFields = LoginFormSchema.safeParse({
    email: formData.get('email'),
    password: formData.get('password'),
  });

  if (!validatedFields.success) {
    return {
      errors: validatedFields.error.flatten().fieldErrors,
    };
  }

  const { email, password } = validatedFields.data;

  // ...
}

'use client';

import { login } from '@/lib/actions/auth';
import { useActionState } from 'react';

export default function LoginForm() {
  const [state, action, pending] = useActionState(login, undefined);

  return (
    <form action={action}>
      <label htmlFor="email">Email</label>
      <input type="email" name="email" id="email" />
      {state.errors?.email && <p>{state.errors.email[0]}</p>}

      <label htmlFor="password">Password</label>
      <input type="password" name="password" id="password" />
      {state.errors?.password && <p>{state.errors.password[0]}</p>}

      <button type="submit" disabled={pending}>
        Login
      </button>
    </form>
  );
}

Conclusion

I'm happy with the technologies I'm using in 2024. They help me build applications faster and more efficiently. I'm excited to see what new technologies will come out in the future and how they will change the way we build web applications. If you have any suggestions or feedback, feel free to reach out to me. Happy holidays! 🎄

Blog