Forem: Thang Truong

Tired of Guessing Your NestJS Routes? There's a Dashboard for That!

Thang Truong — Mon, 16 Jun 2025 13:43:26 +0000

Stop blindly navigating your growing NestJS projects! We've all been there – digging through controllers to find that specific endpoint. That's why I built Framework Routes Dashboard, a VS Code extension that gives you a bird's-eye view of your entire API landscape.

This simple yet powerful tool scans your workspace and presents all your NestJS routes in a clean, intuitive sidebar panel. No more wasted time hunting for endpoint details!

See Your Entire API at a Glance

NestJS Dashboard automatically discovers and displays all your HTTP endpoints, providing essential information in a clear and organized tree view. You'll instantly see:

HTTP Method: GET, POST, PUT, DELETE, etc.
Route Path: The full path to your endpoint.
Controller Name: The name of the controller class.
Handler Method: The specific method handling the request.

Key Features to Streamline Your Workflow

Automatic Discovery: The extension intelligently finds all your NestJS controllers and their associated routes.
Real-time Updates: As you create, modify, or delete routes, the dashboard will automatically refresh to reflect the changes in your codebase.
Go to Definition: Quickly navigate directly to the code for any endpoint with a single click.

Getting Started is a Breeze

Install the Framework Routes Dashboard extension from the Visual Studio Marketplace.
Open your NestJS project in VS Code.
Look for the new NestJS icon in your activity bar.
Click it to open the dashboard and see all your routes!

It's that simple. No configuration is needed to get started.

Why I Built This

As a developer, I'm always looking for ways to improve my workflow and reduce friction. Constantly searching for route definitions in a large NestJS project was a recurring pain point. I wanted a simple, visual way to see everything at once. Seeing the positive feedback from early users has been fantastic, and I'm excited to share it with the broader dev.to community.

Give it a try and let me know what you think! Your feedback and suggestions are welcome on the GitHub repository.

#nestjs #vscode #typescript #devexperience

Multiples mode using same as dark mode class by Tailwindcss

Thang Truong — Thu, 11 Aug 2022 04:31:00 +0000

Tailwind - A utility-first CSS framework
Dark mode is supported in Tailwindcss, you can see it here

However, you want to edit your own mode. Please follow these steps

Installation tailwind to your project (docs here)
After complete install, you can see taiwind.config.js (cjs)
Create a themes folder to store your own themes
Create files your-theme.js in folder themes and insert this code

const plugin = require("tailwindcss/plugin");

const themeName = "your-theme-name"; // this is name of your custom theme (dark, red, light, ...)

module.exports = plugin(function ({ addVariant, e }) {
  addVariant(`${themeName}`, ({ modifySelectors, separator }) => {
    modifySelectors(({ className }) => {
      return `.${themeName} .${e(`${themeName}${separator}${className}`)}`;
    });
  });
});

Open tailwind.config.js, import your custom theme by option plugin

/** @type {import('tailwindcss').Config} */

module.exports = {
  darkMode: "class",
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [require("./themes/your-theme.js")], // edit the path if it doesn't match your project structure
};

Finish, you can use your custom same as dark mode in Tailwind

<h1 class="text-red-500 dark:text-white red:text-red-800 orange:text-orange-700">Hello</h1>

NOTE: Don't forget to add a class to the html tag if you want the attribute to be enabled <html lang="en" class="red">

Multiple item using one ref

Thang Truong — Mon, 01 Aug 2022 16:17:00 +0000

Some cases in ReactJS, we need use a variable declared by useRef for items, components, ....

How to use

First, you need variable declared by useRef and
and set initialValue to be an empty array []

const exampleRef = useRef([]);

Create a function to add item, component to exampleRef

const addToRefs = el => {
    if (el && !exampleRef.current.includes(el)) {
       exampleRef.current.push(el);
    }
};

Then you just add ref to item, component, ...

<div ref={addToRefs}>                 
</div>

Now, exampleRef.current as an array, you can use methods with array to use for exampleRef like map, forEach, ...