My Stack

Here's where I'm currently most productive:

1. Framework (Next.js, React, and NestJS)

I primarily build applications using Next.js and React, complemented by NestJS for backend services. I always use TypeScript for type safety and maintainability.

Data Fetching

For data fetching, I leverage both Server Components and API routes in Next.js:

Server Components & API Routes

I use Next.js API routes for backend logic and fetch data efficiently within Server Components. With React Server Components, data loading happens at the server level, reducing client-side JavaScript payload.

export default async function Page() {
  let data = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/products`, {
    cache: "no-store", // Ensures fresh data
  });
  let products = await data.json();
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

For real-time capabilities, I integrate WebSockets or Redis Pub/Sub within NestJS. For GraphQL APIs, I use Apollo Server or Mercurius.

2. Styling (Tailwind CSS and shadcn/ui)

I use Tailwind CSS for utility-first styling and shadcn/ui for well-structured, accessible UI components.

Why Tailwind?

Tailwind helps keep styling consistent and minimal, reducing unnecessary CSS. It’s easy to customize with tailwind.config.js, integrates seamlessly with Next.js, and optimizes for performance using PurgeCSS.

3. Database (PostgreSQL and Prisma)

For databases, I use PostgreSQL, managed through Prisma as my ORM.

Why Prisma?

Type-safe database queries with auto-generated typings.
Migrations are handled efficiently with prisma migrate.
Easy integration with REST and GraphQL APIs.

Example Prisma Query:

const products = await prisma.product.findMany({
  where: { inStock: true },
  orderBy: { createdAt: "desc" },
});

4. Caching & Performance (Redis, Cloudflare R2, and Edge Functions)

For optimizing performance and caching API responses, I rely on:

Redis for caching database queries and session data.
Cloudflare R2 for static assets (images, fonts, etc.).
Next.js Edge Functions for running server-side logic closer to users.

Example Redis Caching in NestJS:

const cachedData = await redis.get("products");
if (!cachedData) {
  const products = await fetchProductsFromDB();
  await redis.set("products", JSON.stringify(products), "EX", 3600); // Cache for 1 hour
}

5. AI & Automation

I integrate AI into my workflow using:

OpenAI API for chatbots and code assistance.
LangChain.js for AI-driven applications.
Swagger and Postman Collections for automated API documentation.

6. Deployment & DevOps

For hosting, I use:

Vercel for Next.js frontend deployments with edge caching.
Dockerized backends running on Cloudflare Workers, Railway, or VPS environments.
GitHub Actions for CI/CD automation.

Example GitHub Actions CI Workflow:

name: Deploy API

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: "18"
      - run: npm install && npm run build
      - run: npm run deploy

7. Coding Patterns

API-first development with REST & GraphQL.
Zod for schema validation to enforce strict data contracts.
Modular architecture in both frontend & backend.
Performance optimizations (SSR, ISR, caching strategies).
SEO best practices (meta tags, structured data, Lighthouse checks).

This is my current stack, but I'm always exploring new tools and techniques to enhance my workflow. 🚀