My Technical Stack Overview

The author introduces their overall technology stack, first listing the main components—React, TypeScript, React Native, MySQL, Prisma, NestJS, Redis, and various frontend engineering tools.

React : The author has spent considerable time on React, reading its source code during university and again after graduation, and has written many articles on design patterns, principles, and ecosystem usage. They have experience with state‑management libraries Redux and Zustand, preferring Zustand for its simplicity and performance, and have even explored its source code.

Next.js : Described as a modern React‑based web framework that supports SSR, SSG, and ISR, offers file‑system routing, dynamic routes, built‑in API routes, and native TypeScript support, thereby streamlining full‑stack development and deployment.

TypeScript : All recent projects are written in TypeScript, which the author finds invaluable for catching errors early and improving maintainability. They have also delved into advanced types and plan to spend more time on type‑level programming.

React Native : Compared with Expo, React Native provides true cross‑platform native apps using JavaScript and React, while Expo simplifies setup and offers managed services. The author notes the trade‑offs: React Native offers flexibility but requires more configuration; Expo speeds development but can limit native customisation.

Prisma & MySQL : Prisma is presented as a modern ORM that brings type‑safe database access to Node.js, integrates smoothly with NestJS, and simplifies migrations and complex queries, reducing boilerplate compared with traditional ORMs.

Redis : Redis is used directly within NestJS projects for caching and other purposes. The author includes a complete service implementation that demonstrates setting, getting, incrementing, deleting keys, handling hash structures, flushing all data, and managing offline notifications. The code is shown below:

<pre>import { Injectable, Inject, OnModuleDestroy, Logger } from "@nestjs/common";
import Redis, { ClientContext, Result } from "ioredis";

import { ObjectType } from "../types";

import { isObject } from "@/utils";

@Injectable()
export class RedisService implements OnModuleDestroy {
  private readonly logger = new Logger(RedisService.name);

  constructor(@Inject("REDIS_CLIENT") private readonly redisClient: Redis) {}

  onModuleDestroy(): void {
    this.redisClient.disconnect();
  }

  /**
   * @Description: 设置值到redis中
   * @param {string} key
   * @param {any} value
   * @return {*}
   */
  public async set(
    key: string,
    value: unknown,
    second?: number
  ): Promise<Result<"OK", ClientContext> | null> {
    try {
      const formattedValue = isObject(value)
        ? JSON.stringify(value)
        : String(value);

      if (!second) {
        return await this.redisClient.set(key, formattedValue);
      } else {
        return await this.redisClient.set(key, formattedValue, "EX", second);
      }
    } catch (error) {
      this.logger.error(`Error setting key ${key} in Redis`, error);
      return null;
    }
  }

  /**
   * @Description: 获取redis缓存中的值
   * @param key {String}
   */
  public async get(key: string): Promise<string | null> {
    try {
      const data = await this.redisClient.get(key);
      return data ? data : null;
    } catch (error) {
      this.logger.error(`Error getting key ${key} from Redis`, error);
      return null;
    }
  }

  // ... (other methods omitted for brevity) ...
}
</pre>

Frontend Engineering : The author invests heavily in tooling such as ESLint, Prettier, Husky, Commitlint, and GitHub Actions, often reusing configurations across projects. Future plans include performance optimisation, analytics, automated deployment, and exploring Kubernetes.

In conclusion, the author reflects that most of the year was spent coding and writing articles, and this post serves both as a stack inventory and a reference for next year's learning goals.