DEV Community: karoon sillapapan

Go Hello World Project with Best Practices

karoon sillapapan — Wed, 25 Jun 2025 15:37:33 +0000

Project Structure:

hello-world-app/
├── go.mod
├── main.go
├── internal/
│   └── greeting/
│       └── greeting.go
└── README.md

1. Initialize the module (run this first):

mkdir hello-world-app
cd hello-world-app
go mod init github.com/yourusername/hello-world-app

2. go.mod (automatically created)

module github.com/yourusername/hello-world-app

go 1.21

3. main.go

package main

import (
    "fmt"
    "log"

    "github.com/yourusername/hello-world-app/internal/greeting"
)

func main() {
    // Simple hello world
    fmt.Println("Hello, World!")

    // Using our custom package
    message := greeting.Generate("Go Developer")
    fmt.Println(message)

    // Demonstrating error handling
    personalizedMsg, err := greeting.Personalized("Alice", "Go")
    if err != nil {
        log.Printf("Error: %v", err)
        return
    }
    fmt.Println(personalizedMsg)
}

4. internal/greeting/greeting.go

// Package greeting provides functionality for generating greeting messages.
// Following Go conventions: package comment starts with "Package packagename"
package greeting

import (
    "fmt"
    "strings"
)

// Generate creates a simple greeting message.
// Function comments start with the function name.
func Generate(name string) string {
    if name == "" {
        name = "World"
    }
    return fmt.Sprintf("Hello, %s! Welcome to Go programming.", name)
}

// Personalized creates a personalized greeting with language preference.
// This demonstrates error handling, a Go best practice.
func Personalized(name, language string) (string, error) {
    if name == "" {
        return "", fmt.Errorf("name cannot be empty")
    }

    name = strings.TrimSpace(name)
    language = strings.ToLower(strings.TrimSpace(language))

    var greeting string
    switch language {
    case "go", "golang":
        greeting = fmt.Sprintf("Hello, %s! Ready to Go? 🚀", name)
    case "spanish":
        greeting = fmt.Sprintf("¡Hola, %s!", name)
    case "french":
        greeting = fmt.Sprintf("Bonjour, %s!", name)
    default:
        greeting = fmt.Sprintf("Hello, %s!", name)
    }

    return greeting, nil
}

// Constants demonstrate Go naming conventions
const (
    DefaultLanguage = "english"
    MaxNameLength   = 50
)

// Exported variables use PascalCase
var SupportedLanguages = []string{"english", "spanish", "french", "go"}

Running the Application

go run main.go

Building the Application

go build -o hello-world-app
./hello-world-app

Testing

go test ./...

Key Go Best Practices Demonstrated:

✅ Proper module initialization with domain-based naming
✅ Package organization (internal/ for private packages)
✅ Exported vs unexported identifiers (PascalCase vs camelCase)
✅ Function documentation following Go conventions
✅ Error handling with multiple return values
✅ Clear, descriptive naming without underscores
✅ Separation of concerns (main.go stays minimal)

NestJS Environment Configuration

karoon sillapapan — Fri, 20 Jun 2025 08:45:44 +0000

Simple environment setup using NestJS built-in features - no custom code needed.

🎯 How It Works

NestJS automatically loads environment files based on NODE_ENV:

NODE_ENV	File Loaded	When
(not set)	`.env`	Default (Production)
`development`	`.env.development`	Development
`uat`	`.env.uat`	UAT
`production`	`.env`	Production

📁 File Structure

backend/
├── .env                 # Production (default)
├── .env.development     # Development
├── .env.uat            # UAT
└── src/app.module.ts

📄 Environment Files

# .env (production - default)
DATABASE_URL=postgresql://user:pass@prod-db:5432/myapp
PORT=3000

# .env.development
DATABASE_URL=postgresql://user:pass@localhost:5432/myapp_dev
PORT=3000

# .env.uat
DATABASE_URL=postgresql://user:pass@uat-db:5432/myapp_uat
PORT=3000

⚙️ App Module Setup

// src/app.module.ts
import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';

@Module({
  imports: [
    ConfigModule.forRoot({
      isGlobal: true,
      envFilePath: [
        `.env.${process.env.NODE_ENV}`,
        '.env'
      ],
    }),
  ],
})
export class AppModule {}

📝 Package.json Scripts

{
  "scripts": {
    "start": "nest start",
    "start:dev": "NODE_ENV=development nest start --watch",
    "start:uat": "NODE_ENV=uat nest start",
    "start:prod": "NODE_ENV=production node dist/main",
    "build": "nest build"
  }
}

🎮 Usage in Code

// In any controller or service
import { Injectable } from '@nestjs/common';
import { ConfigService } from '@nestjs/config';

@Injectable()
export class AppService {
  constructor(private config: ConfigService) {}

  getDatabaseUrl(): string {
    return this.config.get('DATABASE_URL');
  }

  getPort(): number {
    return this.config.get('PORT');
  }
}

🚀 Commands

# Development
npm run start:dev
# Loads: .env.development

# UAT
npm run start:uat
# Loads: .env.uat

# Production
npm run start:prod
# Loads: .env

# Default (same as production)
npm start
# Loads: .env

🔍 Check Environment

// In main.ts or any file
console.log('NODE_ENV:', process.env.NODE_ENV || 'default');
console.log('Database:', process.env.DATABASE_URL);

// In controller
@Get('health')
getHealth() {
  return {
    environment: process.env.NODE_ENV || 'default',
    database: this.config.get('DATABASE_URL')
  };
}

✅ Default Behavior

Important: If you don't set NODE_ENV, NestJS uses .env file (production).

# These commands do the same thing:
npm start                    # Uses .env (default)
NODE_ENV=production npm start # Uses .env (explicit)

🐳 Docker

# Dockerfile
FROM node:18-alpine

ARG NODE_ENV=production
ENV NODE_ENV=${NODE_ENV}

WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production

COPY . .
RUN npm run build

EXPOSE 3000
CMD ["npm", "run", "start:prod"]

# Build for different environments
docker build -t myapp:dev --build-arg NODE_ENV=development .
docker build -t myapp:uat --build-arg NODE_ENV=uat .
docker build -t myapp:prod .  # Uses production by default

🛠️ Best Practices

Use .env for production (default behavior)
Set NODE_ENV in scripts for other environments
Use ConfigService to access environment variables
Check console output to verify which environment is loaded
Never commit sensitive data - use .env.local for secrets

🚨 Troubleshooting

Problem	Solution
Variables not loading	Check file name: `.env.development` not `.env.dev`
Wrong environment	Check `NODE_ENV` value in console
Missing variables	Verify variable exists in correct env file
Default not working	Remember: no `NODE_ENV` = `.env` file

That's it! NestJS handles everything automatically - just set NODE_ENV and go!

Simple Environment Configuration

karoon sillapapan — Fri, 20 Jun 2025 07:22:19 +0000

Run your app with different environments: Development, UAT, and Production.

📁 Files Structure

project/
├── frontend/
│   ├── .env                 # Production
│   ├── .env.development     # Development
│   ├── .env.uat            # UAT
│   └── vite.config.ts
├── backend/
│   ├── .env                 # Production
│   ├── .env.development     # Development
│   ├── .env.uat            # UAT
│   └── src/config/configuration.ts

🎯 Frontend Setup

1. Environment Files

# .env
VITE_API_URL=https://api.yourapp.com

# .env.development
VITE_API_URL=http://localhost:3000

# .env.uat
VITE_API_URL=https://api-uat.yourapp.com

2. vite.config.ts

import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig(({ mode }) => {
  loadEnv(mode, process.cwd(), '');

  return {
    plugins: [react()],
    resolve: {
      alias: { '@': '/src' }
    }
  };
});

3. package.json

{
  "scripts": {
    "dev": "vite",
    "dev:uat": "vite --mode uat",
    "build": "vite build",
    "build:uat": "vite build --mode uat"
  }
}

4. Usage

// In any component
const apiUrl = import.meta.env.VITE_API_URL;

// Check environment
console.log('Environment:', import.meta.env.MODE);

🚀 Backend Setup

1. Environment Files

# .env
NODE_ENV=production
DATABASE_URL=postgresql://user:pass@prod-db:5432/myapp

# .env.development
NODE_ENV=development
DATABASE_URL=postgresql://user:pass@localhost:5432/myapp_dev

# .env.uat
NODE_ENV=uat
DATABASE_URL=postgresql://user:pass@uat-db:5432/myapp_uat

2. Configuration

// src/config/configuration.ts
export default () => {
  const env = process.env.NODE_ENV || 'production';

  require('dotenv').config({ 
    path: env === 'production' ? '.env' : `.env.${env}` 
  });

  return {
    environment: env,
    port: parseInt(process.env.PORT, 10) || 3000,
    database: process.env.DATABASE_URL
  };
};

3. App Module

// src/app.module.ts
import { ConfigModule } from '@nestjs/config';
import configuration from './config/configuration';

@Module({
  imports: [
    ConfigModule.forRoot({
      load: [configuration],
      isGlobal: true,
    }),
  ],
})
export class AppModule {}

4. package.json

{
  "scripts": {
    "start:dev": "NODE_ENV=development nest start --watch",
    "start:uat": "NODE_ENV=uat nest start",
    "start:prod": "NODE_ENV=production node dist/main"
  }
}

5. Usage

// In controllers
import { ConfigService } from '@nestjs/config';

@Controller()
export class AppController {
  constructor(private config: ConfigService) {}

  @Get('health')
  getHealth() {
    return {
      environment: this.config.get('environment'),
      status: 'ok'
    };
  }
}

🎮 Commands

Frontend

npm run dev        # Development environment
npm run dev:uat    # UAT environment  
npm run build      # Production build

Backend

npm run start:dev  # Development environment
npm run start:uat  # UAT environment
npm run start:prod # Production environment

🔍 Check Environment

Frontend

console.log('Environment:', import.meta.env.MODE);
// Output: development, uat, or production

Backend

console.log('Environment:', process.env.NODE_ENV);
// Output: development, uat, or production

🐳 Docker

# Frontend Dockerfile
FROM node:18-alpine as builder
ARG BUILD_MODE=production
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build -- --mode ${BUILD_MODE}

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

# Build commands
docker build -t myapp:dev --build-arg BUILD_MODE=development .
docker build -t myapp:uat --build-arg BUILD_MODE=uat .
docker build -t myapp:prod .

✅ Best Practices

Use VITE_ prefix for frontend environment variables
Keep .env for production as default
Never commit secrets - use .env.local for sensitive data
Check console logs to verify which environment is running
Use TypeScript for better development experience

🚨 Common Issues

Missing variables: Check file names (.env.development, not .env.dev)
Wrong environment: Check console output for confirmation
Docker not working: Make sure to pass BUILD_MODE argument

That's it! Simple environment configuration without complex setup.

TypeORM Timezone Issue in React + NestJS Stack

karoon sillapapan — Mon, 16 Jun 2025 08:10:32 +0000

📝 Problem Summary

Environment Setup

Frontend (React + Vite): No timezone configuration → Uses Browser Default (UTC+7)
Backend (NestJS + TypeORM): No timezone configuration
Database: Configured as UTC+0
Server Environment: UTC+7 (Thailand timezone)

Symptoms

Frontend: Creates transaction at 2025-06-16 13:52 (UTC+7)
Backend receives: 2025-06-16 06:52 (UTC) ✅ Correct
Database stores: 2025-06-16 06:52 (UTC) ✅ Correct
Backend reads from Database: 2025-06-15T23:52 ❌ Wrong by 7 hours!
Swagger displays: 2025-06-15 23:52 ❌ Wrong!

🌐 Frontend Timezone Behavior

React/JavaScript Without Timezone Config = Uses Browser Default

Timezone Source in Browser

// JavaScript gets timezone from Browser's Local Timezone
console.log(Intl.DateTimeFormat().resolvedOptions().timeZone);
// Result: "Asia/Bangkok" (if in Thailand)

console.log(new Date().getTimezoneOffset());
// Result: -420 (minutes) = -7 hours (UTC+7)

Timezone Source Priority Order

Operating System (Windows/Mac/Linux timezone setting)
Browser setting (sometimes can override)
Location detection (if browser allows)

Date Object Behavior in Frontend

// When user creates transaction in Thailand (UTC+7)
const now = new Date(); // Current time

console.log(now.toString());
// "Mon Jun 16 2025 13:52:00 GMT+0700 (Indochina Time)"

console.log(now.toLocaleString());
// "16/6/2025, 13:52:00" (displays as local time)

console.log(now.toISOString());
// "2025-06-16T06:52:00.000Z" (converts to UTC for Backend)

Sending Data to Backend

// React sends data
fetch('/api/transactions', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    amount: 1000,
    createdAt: new Date() // JavaScript auto-converts to ISO string
  })
});

// JSON.stringify automatically calls toISOString()
// Sends as: "2025-06-16T06:52:00.000Z" ✅ Correct!

Testing Frontend Timezone

Add this Component to Check Timezone Info

// TimezoneDebug.jsx
import { useEffect, useState } from 'react';

function TimezoneDebug() {
  const [timezoneInfo, setTimezoneInfo] = useState({});

  useEffect(() => {
    const now = new Date();
    setTimezoneInfo({
      timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
      offset: now.getTimezoneOffset() / -60,
      localTime: now.toLocaleString(),
      isoTime: now.toISOString(),
      utcTime: now.toUTCString()
    });
  }, []);

  return (
    <div style={{ padding: '16px', border: '1px solid #ccc', margin: '8px' }}>
      <h3>Browser Timezone Info</h3>
      <p><strong>Timezone:</strong> {timezoneInfo.timezone}</p>
      <p><strong>UTC Offset:</strong> +{timezoneInfo.offset} hours</p>
      <p><strong>Local Time:</strong> {timezoneInfo.localTime}</p>
      <p><strong>ISO Time (sent to Backend):</strong> {timezoneInfo.isoTime}</p>
      <p><strong>UTC Time:</strong> {timezoneInfo.utcTime}</p>
    </div>
  );
}

export default TimezoneDebug;

Expected Results (in Thailand)

Timezone: Asia/Bangkok
UTC Offset: +7 hours
Local Time: 16/6/2025, 13:52:00
ISO Time (sent to Backend): 2025-06-16T06:52:00.000Z
UTC Time: Mon, 16 Jun 2025 06:52:00 GMT

Displaying Time from Backend

// Display time from Backend correctly in User's timezone
function TransactionTime({ utcTimeFromBackend }) {
  // Backend sends: "2025-06-16T06:52:00.000Z"
  // Display as: "16/6/2025, 13:52:00" (local time)

  const localTime = new Date(utcTimeFromBackend).toLocaleString('en-US', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  });

  return <span>{localTime}</span>;
}

Frontend Behavior Summary

Frontend is working correctly! ✅

User sees: 13:52 (local time UTC+7)
Sends to Backend: 06:52 UTC (auto-converted)
This behavior is standard and correct

The problem is in Backend (TypeORM), not Frontend!

🔍 Root Cause Analysis

TypeORM Timezone Conversion Process

1. Main Issue: TypeORM Doesn't Know Database Timezone

// When no timezone config in TypeORM
TypeOrmModule.forRoot({
  type: 'mysql',
  // Missing timezone config ← Problem is here!
})

2. What Happens Inside TypeORM

// Database returns: "2025-06-16 06:52:00" (no timezone info)
// TypeORM thinks: "This is time in Server Local Timezone (UTC+7)"
// TypeORM converts: 06:52 UTC+7 → 23:52 UTC (previous day)
// Result: "2025-06-15T23:52" ❌

3. Wrong Conversion Process

Database (UTC+0):     2025-06-16 06:52:00
       ↓
TypeORM assumes:      2025-06-16 06:52:00 (UTC+7) ← Wrong interpretation!
       ↓  
Converts to UTC:      2025-06-16 06:52 - 7 hours = 2025-06-15 23:52
       ↓
Final result:         2025-06-15T23:52 ❌

✅ Solutions

1. Fix TypeORM Database Configuration

Method 1: In `app.module.ts`

// app.module.ts
TypeOrmModule.forRoot({
  type: 'mysql', // or postgres
  host: 'your-host',
  port: 3306,
  username: 'username',
  password: 'password',
  database: 'database_name',

  // ⭐ Critical: Tell TypeORM that database uses UTC
  timezone: 'Z', // or '+00:00'

  // Additional settings
  dateStrings: false, // Return Date objects instead of strings
  entities: [__dirname + '/**/*.entity{.ts,.js}'],
  synchronize: false,
})

Method 2: In `ormconfig.json`

{
  "type": "mysql",
  "host": "your-host",
  "port": 3306,
  "username": "username",
  "password": "password",
  "database": "database_name",
  "timezone": "Z",
  "dateStrings": false,
  "entities": ["dist/**/*.entity{.ts,.js}"],
  "synchronize": false
}

Method 3: Using Environment Variables

// app.module.ts
TypeOrmModule.forRoot({
  type: process.env.DB_TYPE as any,
  host: process.env.DB_HOST,
  port: parseInt(process.env.DB_PORT),
  username: process.env.DB_USERNAME,
  password: process.env.DB_PASSWORD,
  database: process.env.DB_NAME,
  timezone: 'Z', // ⭐ Add this line
  entities: [__dirname + '/**/*.entity{.ts,.js}'],
})

2. Set Server Timezone (Additional)

In `main.ts`

// main.ts
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

// ⭐ Force Node.js to use UTC
process.env.TZ = 'UTC';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  // Debug timezone (remove after fixing)
  console.log('Server timezone:', Intl.DateTimeFormat().resolvedOptions().timeZone);
  console.log('Process TZ:', process.env.TZ);

  await app.listen(3000);
}
bootstrap();

3. Fix in Entity (For Additional Control)

// transaction.entity.ts
import { Entity, Column, CreateDateColumn, UpdateDateColumn } from 'typeorm';

@Entity('transactions')
export class Transaction {
  @Column({ type: 'int', primary: true, generated: true })
  id: number;

  // ⭐ Force column to be UTC
  @CreateDateColumn({ 
    type: 'timestamp',
    transformer: {
      to: (value: Date) => value,
      from: (value: string | Date) => {
        // Force database data to be interpreted as UTC
        if (typeof value === 'string') {
          return new Date(value + (value.includes('Z') ? '' : 'Z'));
        }
        return value;
      }
    }
  })
  createdAt: Date;

  @UpdateDateColumn({ 
    type: 'timestamp',
    transformer: {
      to: (value: Date) => value,
      from: (value: string | Date) => {
        if (typeof value === 'string') {
          return new Date(value + (value.includes('Z') ? '' : 'Z'));
        }
        return value;
      }
    }
  })
  updatedAt: Date;
}

🧪 Testing and Debugging

1. Create Debug Endpoint

// In controller
@Get('debug-timezone')
async debugTimezone() {
  // Test raw query
  const rawQuery = await this.transactionRepository.query(
    'SELECT created_at FROM transactions ORDER BY id DESC LIMIT 1'
  );

  // Test TypeORM query
  const typeormQuery = await this.transactionRepository.findOne({
    order: { id: 'DESC' }
  });

  return {
    rawFromDatabase: rawQuery[0]?.created_at,
    fromTypeORM: typeormQuery?.createdAt,
    typeormISO: typeormQuery?.createdAt?.toISOString(),
    serverTimezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
    processEnvTZ: process.env.TZ
  };
}

2. Expected Results After Fix

{
  "rawFromDatabase": "2025-06-16 06:52:00",      // Direct from database
  "fromTypeORM": "2025-06-16T06:52:00.000Z",     // Through TypeORM (with Z)
  "typeormISO": "2025-06-16T06:52:00.000Z",      // Converted to ISO string
  "serverTimezone": "UTC",                       // Server timezone
  "processEnvTZ": "UTC"                          // Process timezone
}

📋 Fix Checklist

✅ What to Do

[ ] Add timezone: 'Z' to TypeORM config
[ ] Set process.env.TZ = 'UTC' in main.ts
[ ] Test with debug endpoint
[ ] Verify Swagger displays correct time

⚠️ What to Avoid

Don't change database configuration (keep it as UTC+0)
Don't modify Frontend (let it work normally)
Check existing data - may need to convert existing records

🎯 Results After Fix

Correct Timeline

Frontend: 2025-06-16 13:52 (UTC+7)
Sent to Backend: 2025-06-16T06:52:00.000Z (UTC) ✅
Database stores: 2025-06-16 06:52 (UTC) ✅
Backend reads: 2025-06-16T06:52:00.000Z (UTC) ✅
Swagger displays: 2025-06-16T06:52:00.000Z or 13:52 local time ✅

Frontend Display

// React will display time in user's timezone automatically
const date = new Date("2025-06-16T06:52:00.000Z");
console.log(date.toLocaleString('en-US')); // "6/16/2025, 1:52:00 PM" (UTC+7)

💡 Best Practices

1. Recommended Approach

Always store data as UTC in database
Configure Backend to work in UTC
Let Frontend handle timezone display for users

2. Avoid

Don't store local timezone data in database
Don't let Backend convert timezones manually
Don't use strings for time management - use Date objects

🔗 References

🤝 Contributing

Found this helpful? Please star ⭐ and share with others who might face similar timezone issues!

If you have additional solutions or improvements, feel free to submit a PR or open an issue.

📄 License

This documentation is provided under MIT License. Feel free to use and modify as needed.

Golang Project Level 0

karoon sillapapan — Fri, 16 May 2025 06:01:09 +0000

Overview

This repository contains a Golang project that [briefly describe what your project does].

Prerequisites

Before you begin, ensure you have the following installed:

Go (version 1.16 or later recommended)
Git

Project Setup

Creating a New Golang Project

Initialize a new Go module

   mkdir my-golang-project
   cd my-golang-project
   go mod init github.com/yourusername/my-golang-project

Create basic project structure

   mkdir -p cmd/app
   mkdir -p internal/pkg
   mkdir -p api
   touch cmd/app/main.go

Add a simple Hello World program In cmd/app/main.go:

   package main

   import "fmt"

   func main() {
       fmt.Println("Hello, Golang!")
   }

Test your application

   go run cmd/app/main.go

Git Setup and Push

Initialize Git repository

   git init

Create a .gitignore file

   touch .gitignore

Add common Go entries to .gitignore In .gitignore:

   # Binaries for programs and plugins
   *.exe
   *.exe~
   *.dll
   *.so
   *.dylib

   # Test binary, built with `go test -c`
   *.test

   # Output of the go coverage tool
   *.out

   # Dependency directories
   vendor/

   # Go workspace file
   go.work

   # IDE directories
   .idea/
   .vscode/

Create initial commit

   git add .
   git commit -m "Initial commit"

Create a repository on GitHub/GitLab/BitBucket
- Go to GitHub/GitLab/BitBucket and create a new repository
- Do not initialize with README, .gitignore, or license
Link local repository to remote and push

   git remote add origin https://github.com/yourusername/my-golang-project.git
   git branch -M main
   git push -u origin main

Project Structure

my-golang-project/
├── api/                  # API definitions (protobuf, OpenAPI specs)
├── cmd/                  # Main applications
│   └── app/              # The main application
│       └── main.go       # Entry point for the application
├── internal/             # Private code
│   └── pkg/              # Private packages
├── pkg/                  # Public packages
├── go.mod                # Go module definition
├── go.sum                # Go module checksums
└── README.md             # This file

Development Workflow

Adding dependencies

   go get github.com/example/package

Building the application

   go build -o bin/app cmd/app/main.go

Running tests

   go test ./...

Making changes and pushing to Git

   git add .
   git commit -m "Description of changes"
   git push

Best Practices

Use go fmt to format your code before committing
Run go vet to catch potential issues
Consider using golangci-lint for comprehensive linting
Follow the Uber Go Style Guide for consistent code style

License

[Choose an appropriate license for your project]

Contributing

[Instructions for contributors]

Next.js Setup Guide for Developers

karoon sillapapan — Tue, 13 May 2025 02:34:11 +0000

This Post provides a step-by-step guide for setting up the next-hello-world project using Next.js with TypeScript, creating a Git repository, and uploading your code for the first time.

Creating a Next.js Project with TypeScript
Creating a New Private Git Repository
Setting Up Git Configuration for This Project
Uploading Your Local Code to Git for the First Time
Next Steps

1. Creating a Next.js Project with TypeScript

Prerequisites

Node.js 18.17 or later installed
npm or yarn package manager

Setting Up a New Next.js Project

Run the following command in your terminal:

npx create-next-app@latest next-hello-world

You'll be prompted with several options. Here are the recommended choices for our project:

Would you like to use TypeScript? › Yes
Would you like to use ESLint? › Yes
Would you like to use Tailwind CSS? › Yes (recommended for UI development)
Would you like to use `src/` directory? › No
Would you like to use App Router? › Yes
Would you like to customize the default import alias (@/*)? › No

These options create a modern Next.js project with:

TypeScript for type safety
ESLint for code quality
Tailwind CSS for styling
App Router (the newer, recommended routing system)

Navigate to Your Project

cd next-hello-world

Install Additional Dependencies (Optional)

You may want to add some common dependencies:

npm install axios react-hook-form zod @hookform/resolvers

Start the Development Server

npm run dev

Visit http://localhost:3000 to see your app running.

2. Creating a New Private Git Repository

On GitHub

Go to GitHub and sign in
Click the "+" button in the top-right corner and select "New repository"
Repository name: next-hello-world
Description: Add a brief description of your project
Select "Private"
Do NOT initialize with README, .gitignore, or license (we'll push our existing code)
Click "Create repository"

After creating the repository, you'll see instructions for pushing an existing repository. Keep this page open as we'll need the repository URL in the next steps.

3. Setting Up Git Configuration for This Project

Initialize Git in Your Project

First, make sure you're in your project directory:

cd path/to/next-hello-world

Initialize Git:

git init

Configure User Information for This Project Only

Set your name and email for this specific repository:

git config user.name "Your Name"
git config user.email "your.email@example.com"

Note: This sets the configuration for this repository only. If you need to use different accounts for different projects, this approach ensures the correct identity is used.

Verify Your Configuration

Check that your settings were applied correctly:

git config user.name
git config user.email

Add Remote Repository

Connect your local repository to the remote one you created:

git remote add origin https://github.com/username/next-hello-world.git

Replace username with your GitHub username or organization name.

Verify Remote

Check that the remote was added correctly:

git remote -v

You should see your repository URL listed for both fetch and push.

4. Uploading Your Local Code to Git for the First Time

Create a .gitignore File

Next.js creates a .gitignore file automatically, but verify it exists and contains appropriate entries:

cat .gitignore

If needed, create or update it with:

# Dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz

# Testing
/coverage

# Next.js
/.next/
/out/
/.swc/
next-env.d.ts

# Production
/build
/dist

# Misc
.DS_Store
*.pem

# Debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# Local env files
.env*.local
.env
.env.development
.env.test
.env.production

# Vercel
.vercel

# TypeScript
*.tsbuildinfo

# IDE specific files
/.idea
# VSCode (ignore all except for recommended extensions and settings)
.vscode/*
!.vscode/extensions.json
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
*.sublime-*
*.code-workspace

# Cache
.eslintcache
.stylelintcache

# Optional: if using Storybook
/storybook-static

# Optional: for SASS
.sass-cache/

# PWA
**/public/sw.js
**/public/workbox-*.js
**/public/worker-*.js
**/public/fallback-*.js
**/public/sw.js.map
**/public/workbox-*.js.map
**/public/worker-*.js.map
**/public/fallback-*.js.map

Stage Your Files

Add all your project files to the staging area:

git add .

Create the Initial Commit

Commit your files with a descriptive message:

git commit -m "Initial commit: Next.js TypeScript project setup"

Push to the Remote Repository

Push your code to the remote repository:

git push -u origin main

Note: If your default branch is named master instead of main, use git push -u origin master instead.

If the Push Fails

If your push is rejected because the remote repository has content that you don't have locally, you can use:

git config pull.rebase false
git pull origin main --allow-unrelated-histories

Resolve any conflicts, commit the changes, and then push again:

git push -u origin main

5. Next Steps

Now that your project is set up and connected to Git, here are some next steps:

Branch Strategy

Create a development branch for ongoing work:

git checkout -b development
git push -u origin development

Pull Requests

When working with a team, use pull requests to merge changes:

Make changes in a feature branch
Push the branch to GitHub
Create a pull request to merge into development
After review, merge into main for production

Setting Up NVM, Node.js, and Yarn on WSL Ubuntu

karoon sillapapan — Wed, 07 May 2025 07:02:46 +0000

Setting Up NVM, Node.js, and Yarn on WSL Ubuntu

This guide will walk you through the complete process of setting up Node Version Manager (NVM), Node.js, and Yarn package manager on Windows Subsystem for Linux (WSL) with Ubuntu.

Prerequisites

WSL with Ubuntu installed and properly configured
Internet connection
Basic terminal knowledge

Part 1: Installing NVM (Node Version Manager)

NVM allows you to install and manage multiple versions of Node.js.

# 1. Update your package lists
sudo apt update

# 2. Install dependencies required for NVM
sudo apt install -y curl wget build-essential

# 3. Download and run the NVM installation script
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# 4. Close and reopen your terminal, or run this to apply changes immediately:
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

# 5. Verify NVM installation
nvm --version

If you don't see a version number after running the verification command, make sure NVM was added to your shell configuration files correctly:

# Check if NVM configuration exists in .bashrc
grep -i nvm ~/.bashrc

# If not found, add it manually:
echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.bashrc
echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> ~/.bashrc
echo '[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"' >> ~/.bashrc
source ~/.bashrc

Part 2: Installing Node.js with NVM

Now that NVM is installed, you can easily install different Node.js versions.

# 1. List available Node.js versions
nvm ls-remote

# 2. Install the latest LTS (Long Term Support) version
nvm install --lts

# 3. Alternatively, install a specific version (e.g., 18.15.0)
# nvm install 18.15.0

# 4. Set a version as the default
nvm alias default lts/*

# 5. Verify Node.js and npm installation
node --version
npm --version

Using Different Node.js Versions

With NVM, you can switch between Node.js versions easily:

# List installed Node.js versions
nvm ls

# Switch to another installed version
nvm use 16.20.0  # Replace with any installed version

# Install and switch to a specific version in one command
nvm install 20.10.0 && nvm use 20.10.0

Part 3: Installing Yarn

Yarn is a fast and reliable alternative to npm. There are multiple ways to install Yarn:

Option 1: Install Yarn via npm (Recommended for NVM users)

This method ensures Yarn works with your NVM-managed Node.js installation:

# Install Yarn globally via npm
npm install --global yarn

# Verify installation
yarn --version

Option 2: Install Yarn via the official repository

This method installs Yarn system-wide:

# 1. Import the repository's GPG key
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -

# 2. Add the Yarn repository
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

# 3. Update package lists
sudo apt update

# 4. Install Yarn without Node.js (since we're using NVM for Node.js)
sudo apt install --no-install-recommends yarn

# 5. Verify installation
yarn --version

Option 3: Install Yarn via Corepack (for Node.js 16.10+)

If you're using Node.js 16.10 or later:

# Enable Corepack (included with Node.js 16.10+)
corepack enable

# Verify installation
yarn --version

Part 4: Configuring Your Environment

Setting Up Global Yarn Packages

Configure Yarn to store global packages in your user directory:

# Create a directory for global packages
mkdir -p ~/.yarn-global

# Configure Yarn to use this directory
yarn config set prefix ~/.yarn-global

# Add to PATH in your shell configuration file
echo 'export PATH="$PATH:$HOME/.yarn-global/bin"' >> ~/.bashrc
source ~/.bashrc

Verifying Your Complete Setup

Ensure everything is working properly:

# Check versions
echo "Node.js: $(node --version)"
echo "npm: $(npm --version)"
echo "Yarn: $(yarn --version)"
echo "NVM: $(nvm --version)"

# Verify global package installation
npm install -g cowsay
cowsay "npm works!"

yarn global add figlet
figlet "Yarn works!"

Troubleshooting

NVM not found after installation

If you can't use NVM after installation:

Ensure the NVM script is sourced in your .bashrc or .zshrc file
Try source ~/.bashrc to reload your shell configuration
Check if ~/.nvm directory exists

Yarn global packages not found

If you've installed global packages with Yarn but can't access them:

Verify your PATH includes the Yarn global bin directory:

   echo $PATH | grep yarn

If not found, add it:

   echo 'export PATH="$PATH:$HOME/.yarn-global/bin"' >> ~/.bashrc
   source ~/.bashrc

Permission errors

If you encounter permission errors while installing packages globally:

# Using npm
mkdir -p ~/.npm-global
npm config set prefix ~/.npm-global
echo 'export PATH="$PATH:$HOME/.npm-global/bin"' >> ~/.bashrc
source ~/.bashrc

# Using Yarn
# Follow the "Setting Up Global Yarn Packages" section above

Best Practices

Use NVM to manage Node.js versions, especially when working on multiple projects
Add your NVM, npm, and Yarn configurations to your dotfiles repository if you have one
Consider using project-specific .nvmrc files to automatically switch Node versions
Use Yarn's lock files to ensure dependency consistency across environments
Regularly update NVM with nvm upgrade to get the latest features and fixes

Additional Resources

Installing Go (Golang) on WSL Ubuntu

karoon sillapapan — Wed, 07 May 2025 06:59:36 +0000

Installing Go (Golang) on WSL Ubuntu

This guide walks you through installing Go programming language on Windows Subsystem for Linux (WSL) with Ubuntu.

Prerequisites

WSL with Ubuntu installed and properly configured
Internet connection
Basic terminal knowledge

Installation Steps

There are two main methods to install Go on WSL Ubuntu:

Method 1: Using the Official Go Binary (Recommended)

This method ensures you get the latest version of Go directly from the official website:

# 1. Update your Ubuntu packages
sudo apt update
sudo apt upgrade -y

# 2. Install required packages
sudo apt install -y wget git

# 3. Check the latest Go version
# Visit https://go.dev/dl/ for the latest version
# As of May 2025, Go 1.24.2 is the latest stable version

# 4. Download the Go binary package
# Replace 1.24.2 with the latest version as needed
# For standard Intel/AMD processors (most common):
wget https://dl.google.com/go/go1.24.2.linux-amd64.tar.gz

# For ARM64 architecture (e.g., if using WSL on ARM-based systems):
# wget https://dl.google.com/go/go1.24.2.linux-arm64.tar.gz

# 5. Extract the archive to /usr/local
# This requires root permissions
# For AMD64 architecture:
sudo tar -C /usr/local -xzf go1.24.2.linux-amd64.tar.gz
# For ARM64 architecture:
# sudo tar -C /usr/local -xzf go1.24.2.linux-arm64.tar.gz

# 6. Remove the downloaded archive to save space (optional)
rm go1.24.2.linux-amd64.tar.gz

# 7. Create Go workspace directories
mkdir -p ~/go/{bin,src,pkg}

Method 2: Using Ubuntu's Package Manager (Simpler but may not be latest)

# Install Go using apt
sudo apt update
sudo apt install -y golang-go

# Create Go workspace directories
mkdir -p ~/go/{bin,src,pkg}

Configuring Go Environment

After installing Go, you need to set up environment variables. Add the following to your shell configuration file:

For Bash (default in Ubuntu)

# Open .bashrc file
nano ~/.bashrc

# Add these lines at the end of the file
export GOROOT=/usr/local/go
export GOPATH=$HOME/go
export PATH=$PATH:$GOROOT/bin:$GOPATH/bin

# Save and exit (Ctrl+O, Enter, Ctrl+X)

# Apply changes immediately
source ~/.bashrc

For Zsh (if you use it)

# Open .zshrc file
nano ~/.zshrc

# Add these lines at the end of the file
export GOROOT=/usr/local/go
export GOPATH=$HOME/go
export PATH=$PATH:$GOROOT/bin:$GOPATH/bin

# Save and exit (Ctrl+O, Enter, Ctrl+X)

# Apply changes immediately
source ~/.zshrc

Verifying the Installation

# Check Go version
go version

# Check Go environment
go env

You should see output similar to:

go version go1.24.2 linux/amd64

Creating a Simple Hello World Program

Let's create a simple Go program to verify the installation works correctly:

# Navigate to your Go workspace
cd ~/go/src

# Create a new directory for your project
mkdir hello
cd hello

# Create a new Go file
nano hello.go

Add the following code to hello.go:

package main

import "fmt"

func main() {
    fmt.Println("Hello, World from Go on WSL!")
}

Save and exit the editor, then compile and run the program:

# Run the program directly
go run hello.go

# Or build and then run the executable
go build
./hello

Setting Up VS Code Integration (Optional)

If you use Visual Studio Code, you can enhance your Go development experience:

Install VS Code on Windows
Install the "Remote - WSL" extension
Install the "Go" extension when working in WSL
Open your WSL terminal and navigate to your project
Run code . to open VS Code with WSL integration

Troubleshooting Common Issues

Command 'go' not found

If you encounter this error even after installation

Installing AWS CLI v2 on WSL (Ubuntu)

karoon sillapapan — Wed, 07 May 2025 03:18:05 +0000

Installing AWS CLI v2 on WSL (Ubuntu)

This guide walks you through installing the AWS Command Line Interface (CLI) version 2 on Windows Subsystem for Linux (WSL) with Ubuntu.

Prerequisites

WSL with Ubuntu installed
Internet connection
Basic terminal knowledge

Installation Steps

There are two main methods to install AWS CLI v2 on WSL Ubuntu:

Method 1: Using the Official Installer (Recommended)

This is the recommended method as it installs the latest AWS CLI v2 directly from Amazon.

# 1. Update your Ubuntu packages
sudo apt update
sudo apt upgrade -y

# 2. Install unzip if you don't have it already
sudo apt install -y unzip curl

# 3. Download the AWS CLI v2 installation package
curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"

# 4. Unzip the installer
unzip awscliv2.zip

# 5. Run the install program
sudo ./aws/install

# 6. Verify the installation
aws --version

Method 2: Using Python pip (Alternative for AWS CLI v1)

This method installs AWS CLI v1, which is an older version but may be sufficient for basic needs.

# 1. Install Python and pip if not already installed
sudo apt update
sudo apt install -y python3 python3-pip

# 2. Install AWS CLI using pip
pip3 install awscli --upgrade --user

# 3. Add the installation directory to your PATH
echo 'export PATH=$PATH:~/.local/bin' >> ~/.bashrc
source ~/.bashrc

# 4. Verify the installation
aws --version

Configuring AWS CLI

After installation, you need to configure AWS CLI with your credentials:

# Run the AWS configure command
aws configure

You'll be prompted to enter:

AWS Access Key ID
AWS Secret Access Key
Default region name (e.g., us-west-2, eu-west-1)
Default output format (json, text, or yaml)

Updating AWS CLI

To update an existing AWS CLI v2 installation:

# 1. Download the latest version
curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"

# 2. Unzip the installer
unzip -u awscliv2.zip

# 3. Update the existing installation
sudo ./aws/install --bin-dir /usr/local/bin --install-dir /usr/local/aws-cli --update

Troubleshooting

If aws --version returns "command not found":
- Restart your terminal or run source ~/.bashrc
- Verify the installation path is in your PATH variable
If you encounter permission errors:
- Make sure you're using sudo when required
- Check file permissions in the installation directory
For "Fatal error condition" issues:
- This can happen with certain WSL configurations
- Try using Method 2 (pip installation) instead

Additional Resources

Installing NVM on Windows (WSL - Ubuntu)

karoon sillapapan — Wed, 07 May 2025 02:32:14 +0000

🚀 Installing NVM on Windows (WSL - Ubuntu)

Follow these steps to install Node Version Manager (NVM) inside your WSL Ubuntu environment.

✅ Prerequisites

WSL2 with Ubuntu installed
Internet connection

🛠 Installation Steps

# 1. Download and run the NVM install script
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# 2. Load NVM into the current shell session
source ~/.bashrc

# 3. Verify NVM is installed
nvm --version

# 4. Install the latest LTS version of Node.js
nvm install --lts

# 5. Set it as the default version
nvm alias default lts/*

📦 Verify Installation

# Check Node.js version
node -v

# Check npm version  
npm -v

You're now ready to manage Node.js versions in your WSL environment using NVM!

🔄 Common NVM Commands

# List all available Node.js versions
nvm ls-remote

# Install a specific version
nvm install 16.14.0

# Switch to a specific version
nvm use 16.14.0

# List installed versions
nvm ls

# Set default Node.js version
nvm alias default 16.14.0

📘 Additional Resources

WSL2 Setup Guide for Windows

karoon sillapapan — Wed, 07 May 2025 02:28:00 +0000

WSL2 Setup Guide for Windows

This guide walks you through setting up Windows Subsystem for Linux 2 (WSL2) on Windows, including installation, customization, and best practices.

Prerequisites

Windows 10 version 2004 or higher (Build 19041 or higher) or Windows 11
Administrator access to your Windows machine
At least 8GB of RAM recommended
20GB+ of free disk space

Installation Steps

1. Enable WSL via PowerShell

Open PowerShell as Administrator and run:

# Install WSL with default Ubuntu distribution
# This also enables required Windows features
wsl --install

After installation completes, restart your computer to finalize the setup.

2. Install a Specific Linux Distribution

After restart, open PowerShell as Administrator again:

# See available distributions
wsl --list --online

# Install Ubuntu 24.04 LTS
wsl --install -d Ubuntu-24.04

When prompted, create a username and password for your Linux distribution.

3. Verify Installation

Check that your distribution is installed correctly:

# List installed distributions and their WSL versions
wsl --list --verbose

You should see output similar to:

  NAME              STATE           VERSION
* Ubuntu-24.04      Running         2

The asterisk (*) indicates your default distribution.

Moving WSL to Another Drive (Optional)

This is useful to save space on your system drive (C:).

1. Create Destination Directory

# Create a folder on your target drive
mkdir D:\WSL

2. Export Your Current Distribution

# Create a backup of your distribution
wsl --export Ubuntu-24.04 D:\WSL\ubuntu_backup.tar

3. Unregister the Current Distribution

# Remove the current registration (this will delete all data inside the distribution)
# Make sure you've exported the backup first!
wsl --unregister Ubuntu-24.04

4. Import the Backup to New Location

# Import from backup to the new location
wsl --import Ubuntu-24.04 D:\WSL\Ubuntu D:\WSL\ubuntu_backup.tar --version 2

5. Set as Default and Verify

# Set as default distribution
wsl --set-default Ubuntu-24.04

# Verify the setup
wsl --list --verbose

Basic WSL Commands

# Start your default WSL distribution
wsl

# Start a specific distribution
wsl -d Ubuntu-24.04

# Terminate (shutdown) a running distribution
wsl -t Ubuntu-24.04

# Set WSL version for a distribution
wsl --set-version Ubuntu-24.04 2

# Update WSL itself
wsl --update

Setting Up Your Linux Environment

After installation, you'll want to update your Linux distribution:

# Update package lists and upgrade installed packages
sudo apt update && sudo apt upgrade -y

# Install common development tools
sudo apt install build-essential git curl wget -y

File System Access

Access Windows files from WSL at /mnt/c/, /mnt/d/, etc.
Access WSL files from Windows at \\wsl$\Ubuntu-24.04\home\username\

Best Practices

Store project files within the WSL filesystem for better performance, not on Windows drives
Use VS Code's Remote WSL extension for seamless development
Regularly back up your WSL distribution using the export command
Set resource limits in .wslconfig if WSL consumes too many resources

Troubleshooting

If you encounter issues:

WSL not starting: Run wsl --shutdown and then try again
Network issues: Restart the LxssManager service in Windows
Disk space errors: Clean up your WSL instance or increase virtual disk size
Performance problems: Ensure your files are on the Linux filesystem, not Windows

Advanced Configuration

Create or edit the .wslconfig file in your Windows user directory (C:\Users\YourUsername\.wslconfig):

[wsl2]
memory=4GB
processors=2
localhostForwarding=true

Resources

License

This guide is provided under the MIT License.

Remind : Comprehensive React Form Handling Approaches

karoon sillapapan — Sun, 04 May 2025 08:29:51 +0000

Comprehensive React Form Handling Approaches

This guide compares the major approaches to form handling in React, helping you choose the right solution for your project needs.

Overview of Form Handling Solutions

React offers multiple approaches to handle forms, each with different strengths and trade-offs:

Native React Forms - Using React's built-in state management
React Hook Form - Performant, minimal re-renders approach
Formik - Comprehensive form solution with validation
React Final Form - Subscription-based form state management
React 19 Hooks - New built-in form handling (useFormStatus, useFormState, useActionState)
Third-party solutions - Redux Form, Unform, etc.

Comparison Table

Feature	Native React	React Hook Form	Formik	React Final Form	React 19 Hooks
Bundle Size	0kb (built-in)	~12kb	~44kb	~15kb	0kb (built-in)
Dependencies	None	None	7+	Minimal	None
Performance	Many re-renders	Minimal re-renders	Moderate re-renders	Subscription-based	Minimal re-renders
Validation	Manual	Built-in + external	Built-in + external	Manual	Manual
TypeScript Support	Basic	Excellent	Good	Good	Excellent
Uncontrolled Components	No	Yes	No	No	Partial
Learning Curve	Steep	Low	Moderate	Moderate	Moderate
Active Maintenance	Yes	Yes	Limited	Yes	Yes
Server Actions Support	No	Limited	No	No	Yes

1. Native React Forms

Using React's built-in state management for forms.

Pros:

No additional dependencies
Full control over implementation
Works with all React versions

Cons:

Requires manual validation
Verbose with many form fields
Causes frequent re-renders
Requires manual state management

Code Example:

function NativeForm() {
  const [values, setValues] = useState({ name: '', email: '' });
  const [errors, setErrors] = useState({});

  const handleChange = (e) => {
    setValues({ ...values, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Validation logic
    // Submit logic
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="name"
        value={values.name}
        onChange={handleChange}
      />
      {errors.name && <p>{errors.name}</p>}

      <input
        name="email"
        value={values.email}
        onChange={handleChange}
      />
      {errors.email && <p>{errors.email}</p>}

      <button type="submit">Submit</button>
    </form>
  );
}

2. React Hook Form

A performant, flexible and extensible forms library with easy-to-use validation.

Pros:

Minimal re-renders (best performance)
No dependencies
Small bundle size (~12kb)
Easy validation integration (Yup, Zod, etc.)
Works with uncontrolled components

Cons:

Limited to functional components (uses hooks)
Not ideal for forms that require frequent real-time field synchronization

Code Example:

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  name: z.string().min(2, 'Name is too short'),
  email: z.string().email('Invalid email')
});

function HookForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting }
  } = useForm({
    resolver: zodResolver(schema)
  });

  const onSubmit = (data) => {
    console.log(data);
    // Submit logic
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name')} />
      {errors.name && <p>{errors.name.message}</p>}

      <input {...register('email')} />
      {errors.email && <p>{errors.email.message}</p>}

      <button disabled={isSubmitting} type="submit">
        {isSubmitting ? 'Submitting...' : 'Submit'}
      </button>
    </form>
  );
}

3. Formik

A comprehensive form solution with built-in validation.

Pros:

Complete form solution
Good documentation and ecosystem
Built-in validation
Form wizard support

Cons:

Larger bundle size (~44kb)
Multiple dependencies
More re-renders than React Hook Form
Less active maintenance recently

Code Example:

import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object({
  name: Yup.string().required('Required'),
  email: Yup.string().email('Invalid email').required('Required')
});

function FormikForm() {
  return (
    <Formik
      initialValues={{ name: '', email: '' }}
      validationSchema={validationSchema}
      onSubmit={(values, { setSubmitting }) => {
        console.log(values);
        setSubmitting(false);
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <div>
            <Field name="name" type="text" />
            <ErrorMessage name="name" component="div" />
          </div>

          <div>
            <Field name="email" type="email" />
            <ErrorMessage name="email" component="div" />
          </div>

          <button type="submit" disabled={isSubmitting}>
            {isSubmitting ? 'Submitting...' : 'Submit'}
          </button>
        </Form>
      )}
    </Formik>
  );
}

4. React Final Form

A subscription-based form library focused on performance.

Pros:

Good performance through subscriptions
Flexible API
Field-level validation
Works with both hooks and older React versions

Cons:

Less popular than other solutions
Steeper learning curve
Requires more boilerplate than React Hook Form

Code Example:

import { Form, Field } from 'react-final-form';

const validate = values => {
  const errors = {};
  if (!values.name) errors.name = 'Required';
  if (!values.email) errors.email = 'Required';
  if (values.email && !/^\S+@\S+\.\S+$/.test(values.email)) {
    errors.email = 'Invalid email';
  }
  return errors;
};

function FinalForm() {
  const onSubmit = values => {
    console.log(values);
  };

  return (
    <Form
      onSubmit={onSubmit}
      validate={validate}
      render={({ handleSubmit, submitting }) => (
        <form onSubmit={handleSubmit}>
          <Field name="name">
            {({ input, meta }) => (
              <div>
                <input {...input} placeholder="Name" />
                {meta.error && meta.touched && <span>{meta.error}</span>}
              </div>
            )}
          </Field>

          <Field name="email">
            {({ input, meta }) => (
              <div>
                <input {...input} placeholder="Email" />
                {meta.error && meta.touched && <span>{meta.error}</span>}
              </div>
            )}
          </Field>

          <button type="submit" disabled={submitting}>
            {submitting ? 'Submitting...' : 'Submit'}
          </button>
        </form>
      )}
    />
  );
}

5. React 19 Hooks

React 19 introduces new form-handling hooks:

5.1 useFormStatus

Provides submission status information for a parent form.

import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Submitting...' : 'Submit'}
    </button>
  );
}

function Form({ action }) {
  return (
    <form action={action}>
      <input name="name" />
      <SubmitButton />
    </form>
  );
}

5.2 useFormState / useActionState

Manages form state and actions.

import { useFormState } from 'react-dom';
// or in React 19: import { useActionState } from 'react';

function Form() {
  const [state, formAction] = useFormState(serverAction, initialState);

  return (
    <form action={formAction}>
      {state.error && <p>{state.error}</p>}
      <input name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

Pros:

Built into React (no dependencies)
Works with server actions
Progressive enhancement (works without JavaScript)
Optimized for React Server Components

Cons:

Limited to newer React versions
Requires specific component structure
Fewer validation features than specialized libraries
useFormStatus has limitations (child component requirement)

When to Choose Each Approach

Choose Native React Forms when:

You have simple forms with few fields
You need full control over implementation
You want to avoid additional dependencies

Choose React Hook Form when:

Performance is critical
You need complex validation with minimal re-renders
You want a lightweight solution with TypeScript support
You're building complex forms with many fields

Choose Formik when:

You need a complete, well-documented solution
Bundle size is less important than features
You need built-in wizards and form arrays
You prefer a higher-level abstraction

Choose React Final Form when:

You need subscription-based performance
You need to support both class and functional components
You want more fine-grained control over re-renders

Choose React 19 Hooks when:

You're using React Server Components
You need progressive enhancement (works without JS)
You want to use React's built-in form handling
You're building with server actions

Hybrid Approach

You can often combine approaches for the best of both worlds:

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { useFormStatus } from 'react-dom';
import { z } from 'zod';

const schema = z.object({
  name: z.string().min(2, 'Name too short')
});

function FormContent({ register, errors }) {
  const { pending } = useFormStatus();

  return (
    <>
      <input {...register('name')} disabled={pending} />
      {errors.name && <p>{errors.name.message}</p>}
      <button type="submit" disabled={pending}>
        {pending ? 'Submitting...' : 'Submit'}
      </button>
    </>
  );
}

function Form() {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm({
    resolver: zodResolver(schema)
  });

  return (
    <form action={handleSubmit(onSubmit)}>
      <FormContent register={register} errors={errors} />
    </form>
  );
}

Key Performance Considerations

Re-rendering: React Hook Form minimizes re-renders by using uncontrolled components. Formik and native React forms cause more re-renders with each keystroke.
Bundle Size: React Hook Form (~12kb) is significantly smaller than Formik (~44kb). React 19 hooks add no additional bundle size.
Dependencies: React Hook Form has no dependencies, while Formik relies on several. This affects load times and stability.

Validation Options

Built-in Validation: React Hook Form and Formik offer built-in validation.
Schema Validation: All solutions can integrate with schema validation libraries:
- Yup: Works well with all options
- Zod: Excellent TypeScript integration, works best with React Hook Form
- Joi/Superstruct/others: Available through resolvers
Manual Validation: All solutions support custom validation functions.

Resources

Conclusion

There is no one-size-fits-all solution for form handling in React. Your choice should depend on your specific project requirements, performance needs, and developer experience preferences.

For most modern applications, React Hook Form offers the best balance of performance, features, and ease of use. For applications leveraging React Server Components, the new React 19 hooks provide elegant solutions that integrate well with server actions.

Remember that you can also combine approaches to get the best of multiple worlds, such as using React Hook Form's validation with React 19's form status hooks.

DEV Community: karoon sillapapan

Go Hello World Project with Best Practices

Project Structure:

1. Initialize the module (run this first):

2. go.mod (automatically created)

3. main.go

4. internal/greeting/greeting.go

Running the Application

Building the Application

Testing

Key Go Best Practices Demonstrated:

NestJS Environment Configuration

🎯 How It Works

📁 File Structure

📄 Environment Files

⚙️ App Module Setup

📝 Package.json Scripts

🎮 Usage in Code

🚀 Commands

🔍 Check Environment

✅ Default Behavior

🐳 Docker

🛠️ Best Practices

🚨 Troubleshooting

Simple Environment Configuration

📁 Files Structure

🎯 Frontend Setup

1. Environment Files

2. vite.config.ts

3. package.json

4. Usage

🚀 Backend Setup

1. Environment Files

2. Configuration

3. App Module

4. package.json

5. Usage

🎮 Commands

Frontend

Backend

🔍 Check Environment

Frontend

Backend

🐳 Docker

✅ Best Practices

🚨 Common Issues

TypeORM Timezone Issue in React + NestJS Stack

📝 Problem Summary

Environment Setup

Symptoms

🌐 Frontend Timezone Behavior

React/JavaScript Without Timezone Config = Uses Browser Default

Timezone Source in Browser

Timezone Source Priority Order

Date Object Behavior in Frontend

Sending Data to Backend

Testing Frontend Timezone

Add this Component to Check Timezone Info

Expected Results (in Thailand)

Displaying Time from Backend

Frontend Behavior Summary

🔍 Root Cause Analysis

TypeORM Timezone Conversion Process

1. Main Issue: TypeORM Doesn't Know Database Timezone

2. What Happens Inside TypeORM

3. Wrong Conversion Process

✅ Solutions

1. Fix TypeORM Database Configuration

Method 1: In app.module.ts

Method 2: In ormconfig.json

Method 3: Using Environment Variables

2. Set Server Timezone (Additional)

In main.ts

3. Fix in Entity (For Additional Control)

🧪 Testing and Debugging

1. Create Debug Endpoint

2. Expected Results After Fix

📋 Fix Checklist

✅ What to Do

⚠️ What to Avoid

Method 1: In `app.module.ts`

Method 2: In `ormconfig.json`

In `main.ts`