DEV Community: Sivasakthi Paramasivam

UI Design Styles

Sivasakthi Paramasivam — Sun, 21 Jun 2026 08:23:08 +0000

Claymorphism
Neumorphism
Glassmorphism
Skeuomorphism
Minimalism
Maximalism
Brutalism
Liquid Glass UI
Bento Grid UI
Spatial UI Design

Complete Guide: Setting Up a Node.js + Express + TypeScript Project

Sivasakthi Paramasivam — Sat, 06 Jun 2026 13:09:03 +0000

Introduction

When building modern backend applications, combining Node.js, Express.js, and TypeScript provides a powerful and scalable development experience. Node.js offers a fast runtime environment, Express.js simplifies API development, and TypeScript adds static typing that helps catch errors during development.

In this guide, we'll create a Node.js backend project from scratch using Express and TypeScript.

Prerequisites

Before starting, ensure you have installed:

Node.js
npm (comes with Node.js)
VS Code (optional but recommended)

Verify the installation:

node -v
npm -v

Step 1: Create a New Project

Create a new folder and navigate into it:

mkdir backend cd backend

Initialize a Node.js project:

npm init -y

This command creates a package.json file that manages project dependencies and scripts.

Project structure:

backend/
└── package.json

Step 2: Install Required Dependencies

Install Production Dependencies

These packages are required when the application runs in production.

npm install express cors dotenv

Package Overview

Package Purpose
express Web framework for building APIs
cors Enables Cross-Origin Resource Sharing
dotenv Loads environment variables from .env files
Install Development Dependencies

These packages help during development.

npm install -D typescript ts-node nodemon @types/node @types/express @types/cors

Package Overview

Package Purpose
typescript TypeScript compiler
ts-node Executes TypeScript directly
nodemon Automatically restarts the server
@types/node Node.js type definitions
@types/express Express type definitions
@types/cors CORS type definitions

Step 3: Initialize TypeScript

Generate the TypeScript configuration file:

npx tsc --init

This creates:

tsconfig.json

Step 4: Configure TypeScript

Replace the generated configuration with:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "CommonJS",
    "rootDir": "./src",
    "outDir": "./dist",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

Important Settings
Option Description
target JavaScript version to compile into
rootDir Source code location
outDir Compiled output location
strict Enables strict type checking
esModuleInterop Supports CommonJS imports

Step 5: Create Project Structure

A clean folder structure improves maintainability and scalability.

Create the following directories:

mkdir src
mkdir src/config
mkdir src/controllers
mkdir src/middlewares
mkdir src/routes
mkdir src/services
mkdir src/utils

Resulting structure:

backend/
│
├── src/
│   ├── config/
│   ├── controllers/
│   ├── middlewares/
│   ├── routes/
│   ├── services/
│   ├── utils/
│   ├── app.ts
│   └── server.ts
│
├── package.json
├── tsconfig.json
└── .env

Step 6: Create the Express Application

Create src/app.ts.

import express from "express";
import cors from "cors";

const app = express();

app.use(cors());
app.use(express.json());

app.get("/", (_, res) => {
  res.json({
    success: true,
    message: "Server Running"
  });
});

export default app;

What Happens Here?

Creates an Express application.
Enables CORS.
Parses JSON request bodies.
Adds a test route.

Step 7: Create the Server Entry Point

Create src/server.ts.

import dotenv from "dotenv";
import app from "./app";

dotenv.config();

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Responsibilities of server.ts

Loads environment variables.
Starts the Express server.
Defines the application port.
Step 8: Create Environment Variables

Create a .env file:

PORT=5000

Using environment variables helps keep configuration separate from code.

Step 9: Configure Git Ignore

Create .gitignore.

node_modules
dist
.env

This prevents unnecessary files from being committed to version control.

Step 10: Configure Nodemon

Nodemon automatically restarts the server whenever files change.

Create nodemon.json:

{
  "watch": ["src"],
  "ext": "ts",
  "ignore": ["dist"],
  "exec": "ts-node src/server.ts"
}

Configuration Explanation
Property Purpose
watch Monitors source files
ext Watches TypeScript files
ignore Ignores compiled files
exec Command to run the application

Step 11: Add Scripts

Update package.json.

{
  "scripts": {
    "dev": "nodemon",
    "build": "tsc",
    "start": "node dist/server.js"
  }
}

Script Explanation

Script Purpose
npm run dev Starts development server
npm run build Compiles TypeScript
npm start Runs production build

Step 12: Run the Application

Start the development server:

npm run dev
Expected output:

Server running on port 5000

Step 13: Test the API

Open your browser or API testing tool and visit:

http://localhost:5000

Response:

{
  "success": true,
  "message": "Server Running"
}

The API is now working successfully.

Step 14: Build for Production

Compile the TypeScript code:

npm run build
Generated structure:

dist/
├── app.js
└── server.js

Run the production build:

npm start

Recommended Production Packages

For real-world applications, install additional middleware:

npm install helmet morgan express-rate-limit npm install -D @types/morgan
Why Use Them?
Package Purpose
helmet Adds security headers
morgan Logs HTTP requests
express-rate-limit Protects against abuse and brute-force attacks

Recommended Scalable Folder Structure

As your project grows, consider organizing it like this:

src/
├── config/
├── controllers/
├── routes/
├── services/
├── repositories/
├── middlewares/
├── validators/
├── interfaces/
├── types/
├── utils/
├── app.ts
└── server.ts

This structure works well for REST APIs, authentication systems, AI applications, e-commerce platforms, and enterprise-level backend services.

Conclusion

By combining Node.js, Express.js, and TypeScript, you gain:

Better code quality through static typing
Improved developer experience
Easier debugging and maintenance
Scalable project architecture
Faster development workflow with Nodemon

Following the setup described in this guide provides a solid foundation for building modern backend applications, whether you're creating REST APIs, microservices, AI-powered platforms, or full-stack web applications.

JavaScript Data Types Explained: Primitive vs Non-Primitive Data Types

Sivasakthi Paramasivam — Sat, 06 Jun 2026 09:24:43 +0000

JavaScript Data Types: Primitive and Non-Primitive Data Types

Data types are an important concept in JavaScript because they define the kind of value a variable can store. Understanding data types helps developers write reliable and efficient code.

What is a Data Type?

A data type defines what kind of value a variable can hold.

Example

let name = "John";      // String
let age = 25;           // Number
let isActive = true;    // Boolean

In the above example, each variable stores a different type of value.

Types of Data Types in JavaScript

JavaScript data types are broadly classified into two categories:

Primitive Data Types
Non-Primitive Data Types

Primitive Data Types

Primitive data types store a single and simple value.

Characteristics

Store a single value.
Immutable (cannot be changed directly).
Compared by value.
Stored directly in memory.

Types of Primitive Data Types

1. String

Used to store textual data.

let name = "John";

2. Number

Used to store numeric values.

let age = 25;
let price = 99.99;

3. Boolean

Represents either true or false.

let isLoggedIn = true;

4. Undefined

A variable that has been declared but not assigned a value.

let city;

console.log(city); // undefined

5. Null

Represents the intentional absence of a value.

let user = null;

6. Symbol

Used to create unique identifiers.

let id = Symbol("id");

7. BigInt

Used to store very large integers beyond the safe Number limit.

let largeNumber = 123456789012345678901234567890n;

Non-Primitive Data Types

Non-primitive data types store multiple values or complex data structures.

Characteristics

Can store collections of data.
Mutable (their contents can be modified).
Compared by reference.
Stored as references in memory.

Types of Non-Primitive Data Types

1. Array

Used to store multiple values in a single variable.

let colors = ["red", "green", "blue"];

2. Object

Used to store data as key-value pairs.

let person = {
  name: "John",
  age: 25
};

3. Function

Functions are reusable blocks of code.

function greet() {
  console.log("Hello");
}

4. Date

Used to work with dates and times.

let today = new Date();

5. Regular Expression (RegExp)

Used for pattern matching and text validation.

let pattern = /hello/i;

Primitive vs Non-Primitive Data Types

Feature	Primitive Data Types	Non-Primitive Data Types
Value Type	Single and Simple Value	Multiple or Complex Values
Mutability	Immutable	Mutable
Comparison	By Value	By Reference
Memory Storage	Direct Value	Reference to Object
Examples	String, Number, Boolean	Array, Object, Function

Example of Primitive Comparison

let a = 10;
let b = 10;

console.log(a === b); // true

The values are compared directly.

Example of Non-Primitive Comparison

let obj1 = { name: "John" };
let obj2 = { name: "John" };

console.log(obj1 === obj2); // false

Although both objects contain the same data, they occupy different memory locations.

Conclusion

JavaScript data types are divided into Primitive and Non-Primitive categories. Primitive data types store simple values and are immutable, while Non-Primitive data types store complex data structures and are mutable. Understanding the differences between these data types is essential for writing efficient and bug-free JavaScript applications.

JavaScript Hoisting, Temporal Dead Zone (TDZ), and Equality Operators Explained

Sivasakthi Paramasivam — Sat, 06 Jun 2026 09:01:54 +0000

JavaScript Hoisting, Temporal Dead Zone, Data Typing, and Equality Operators

To write effective JavaScript code, it is important to understand concepts such as hoisting, the Temporal Dead Zone (TDZ), data typing, and equality operators.

What is Hoisting?

Hoisting is JavaScript's default behavior of moving declarations to the top of their scope before the code is executed.

It is important to note that only declarations are hoisted, not initializations.

Example

console.log(a); // undefined

var a = 10;

console.log(a); // 10

JavaScript internally interprets the code as:

var a;

console.log(a); // undefined

a = 10;

console.log(a); // 10

Key Points

Variable declarations are hoisted.
Variable initializations remain in their original position.
var variables are initialized with undefined during hoisting.
let and const are also hoisted, but they behave differently because of the Temporal Dead Zone.

What is the Temporal Dead Zone (TDZ)?

The Temporal Dead Zone (TDZ) is the period between the start of a block scope and the point where a let or const variable is declared.

During this period, the variable exists but cannot be accessed.

Example

console.log(name); // ReferenceError

let name = "John";

In this example:

The block scope starts.
The variable name is hoisted.
Until the declaration line is reached, name remains in the Temporal Dead Zone.
Accessing it before declaration causes a ReferenceError.

Why TDZ Exists

The Temporal Dead Zone helps developers avoid bugs by preventing the use of variables before they are properly declared.

Loosely Typed vs Strongly Typed Languages

Loosely Typed Language

A loosely typed language allows variables to hold values of different data types without requiring explicit type declarations.

JavaScript is a loosely typed (or dynamically typed) language.

Example

let value = 10;

value = "Hello";

value = true;

The same variable can store a number, string, and boolean value.

Strongly Typed Language

A strongly typed language requires variables to follow specific data types and prevents incompatible type assignments.

Examples include Java, C#, and TypeScript.

let age: number = 25;

// age = "Twenty Five"; // Error

Comparison

Feature	JavaScript	TypeScript
Typing	Dynamic	Static
Type Checking	Runtime	Compile Time
Flexibility	High	Moderate
Error Detection	Later	Earlier

Equality Operators in JavaScript

JavaScript provides two commonly used equality operators:

Double Equals (`==`)

The double equals operator compares only values after performing type conversion if necessary.

Example

console.log(5 == "5"); // true

Here, JavaScript converts the string "5" to a number before comparison.

Triple Equals (`===`)

The triple equals operator compares both value and data type without performing type conversion.

Example

console.log(5 === "5"); // false

Although the values appear similar, their data types are different.

Comparison Table

Expression	Result
`5 == "5"`	`true`
`5 === "5"`	`false`
`true == 1`	`true`
`true === 1`	`false`

Best Practice

Always prefer === and !== because they provide more predictable results and avoid unexpected type coercion.

Conclusion

Hoisting, the Temporal Dead Zone, data typing, and equality operators are fundamental JavaScript concepts. Understanding these topics helps developers write cleaner, more reliable, and less error-prone code. Modern JavaScript development encourages the use of let, const, and strict equality operators (===) to improve code quality and maintainability.

JavaScript Variables Explained: Declaration, Initialization, var, let, and const

Sivasakthi Paramasivam — Sat, 06 Jun 2026 08:45:37 +0000

JavaScript Variables: Understanding var, let, and const

Variables are one of the fundamental concepts in JavaScript. They are used to store data that can be accessed and manipulated throughout a program.

What is a Variable?

A variable is a named container used to store a value in memory. The stored value can be a number, string, object, array, or any other data type supported by JavaScript.

Example

let age = 25;

In this example:

age is the variable name.
25 is the value stored in the variable.

Variable Declaration

Declaration means creating a variable without assigning a value.

Syntax

let a;

Here, the variable a is declared but not initialized.

Variable Declaration and Initialization

Declaration and initialization can be performed in a single statement.

Syntax

let b = 7;

Here:

b is declared.
7 is assigned as its initial value.

Variable Initialization

Initialization means assigning a value to an already declared variable.

Syntax

let c;
c = 8;

In this example:

c is declared first.
Later, it is initialized with the value 8.

Difference Between var, let, and const

JavaScript provides three ways to declare variables: var, let, and const.

Feature	var	let	const
Scope	Function Scope	Block Scope	Block Scope
Redeclaration	Allowed	Not Allowed	Not Allowed
Reassignment	Allowed	Allowed	Not Allowed
Hoisting	Yes	Yes (Temporal Dead Zone)	Yes (Temporal Dead Zone)

1. var

Variables declared with var are function-scoped and can be redeclared and reassigned.

var name = "John";
var name = "David"; // Allowed

name = "Mike"; // Allowed

2. let

Variables declared with let are block-scoped. They cannot be redeclared in the same scope but can be reassigned.

let age = 25;

// let age = 30; // Error

age = 30; // Allowed

3. const

Variables declared with const are block-scoped. They cannot be redeclared or reassigned after initialization.

const PI = 3.14;

// PI = 3.14159; // Error

When Should You Use Each?

Use const by default whenever the value should not change.
Use let when the value needs to be updated later.
Avoid var in modern JavaScript because let and const provide better scope control and reduce bugs.

Conclusion

Variables allow JavaScript programs to store and manage data efficiently. Understanding the differences between var, let, and const is essential for writing clean and maintainable code. In modern JavaScript development, developers typically prefer const and let over var because of their predictable block-scoping behavior.

What is JavaScript? Features, Advantages, Disadvantages, and Uses

Sivasakthi Paramasivam — Sat, 06 Jun 2026 08:35:08 +0000

What is JavaScript?

JavaScript is one of the most popular programming languages used in web development. It helps developers create dynamic and interactive web pages that respond to user actions. Along with HTML and CSS, JavaScript forms the foundation of modern web applications.

For example, features such as image sliders, form validation, pop-up notifications, interactive maps, and real-time updates are powered by JavaScript.

Why is JavaScript Important?

Initially, websites were static and displayed only fixed content. JavaScript changed this by enabling web pages to react to user interactions without requiring the page to reload. Today, JavaScript is used to build everything from simple websites to complex web applications such as social media platforms, e-commerce sites, and online collaboration tools.

Advantages of JavaScript

1. Fast Execution on the Client Side

JavaScript runs directly in the user's browser, reducing the need to communicate with the server for every action. This improves performance and provides a faster user experience.

2. Supports Both Front-End and Back-End Development

JavaScript is not limited to browser-based development. With technologies such as Node.js, developers can use JavaScript for both front-end and back-end development, allowing a single language across the entire application stack.

3. Supported by All Modern Browsers

All major browsers, including Chrome, Firefox, Edge, and Safari, support JavaScript by default. Users do not need to install additional software to run JavaScript-based applications.

4. Supports Asynchronous Programming

JavaScript allows developers to perform tasks asynchronously using features such as Promises and Async/Await. This helps applications remain responsive while waiting for operations like API requests or file processing to complete.

5. TypeScript Support

JavaScript can be enhanced using TypeScript, a superset of JavaScript that introduces static typing and advanced development features. TypeScript helps developers write more maintainable and error-resistant code.

Disadvantages of JavaScript

1. Loosely Typed Language

JavaScript is dynamically typed, meaning variable types are determined at runtime. While this provides flexibility, it can sometimes lead to unexpected errors if developers are not careful.

2. Single-Threaded Nature

JavaScript executes code in a single thread. Although asynchronous programming helps manage multiple tasks efficiently, CPU-intensive operations can still block execution and affect performance.

3. Browser Compatibility Issues

Different browsers may implement JavaScript features differently. As a result, some functionality may work perfectly in one browser but require additional testing or adjustments in another.

4. Security Concerns

Since JavaScript code is executed on the client side, it is visible to users. Developers must follow security best practices to protect applications from vulnerabilities such as Cross-Site Scripting (XSS).

Conclusion

JavaScript is a powerful and versatile programming language that plays a crucial role in modern web development. Its ability to create interactive user experiences, support full-stack development, and work across all major browsers makes it an essential skill for developers. Despite some limitations, JavaScript remains one of the most widely used programming languages in the world.

why my prompt failed

Sivasakthi Paramasivam — Tue, 02 Jun 2026 08:14:54 +0000

As a developer, I recently decided to redesign my portfolio website using an AI coding assistant.

My initial thought was simple:

Redesign my portfolio website.

I entered this prompt into Cursor and expected a modern, professional portfolio design.

Instead of immediately generating code, Cursor asked me several questions:

Which tech stack are you using?
Do you prefer a sidebar or a top navigation bar?
What kind of design style do you want?
Do you want a personal brand focus or a project showcase focus?

After answering these questions, Cursor generated a redesigned portfolio website.

However, I wasn't satisfied with the result.

The design wasn't bad, but it didn't match what I had in mind.

So I tried again.

And again.

Each time, I modified the prompt slightly, hoping for a better outcome.

After several attempts, I realized something important:

> The quality of AI output depends on the clarity of instructions, the quality of context, and how well the desired outcome is specified.

That realization led me to learn about prompt engineering.

My Personal 6-Step Framework for Better Prompt Writing

Note: This is a personal framework I developed through learning and experimentation with AI tools. It is not an official prompt engineering standard, but it has helped me write more effective prompts.

Level 1: Ask a Question

The most basic level of prompting is simply telling the AI what you want.

Example:

What is React?

This works, but the AI has very little context about who you are or what kind of answer you need.

Level 2: Give Context

At this level, you provide information about your situation.

Example:

I'm a JavaScript developer. What is React?

Now the AI can tailor the explanation to someone who already understands JavaScript.

Level 3: Assign a Role

Tell the AI who it should act as.

Example:

Act as a React instructor and explain React.

The AI now responds from the perspective of a teacher rather than a general assistant.

Level 4: Add Constraints

Specify rules, limitations, or requirements.

Example:

Act as a React instructor and explain React in simple English with practical examples.

The AI now knows both the role and the style of explanation you want.

Level 5: Define the Output Format

Tell the AI exactly how the response should be structured.

Example:

Act as a React instructor and explain React in simple English with practical examples. Present the answer in 5 bullet points.

This gives the AI clear instructions about both the content and the format.

Level 6: Provide Examples

Sometimes, even after defining a role, context, constraints, and output format, the AI may not fully understand the style or quality you expect.

In such cases, providing examples can help.

Example:

Act as a React instructor.

Here is the teaching style I prefer:

JavaScript Variables:

Variables are used to store data.

They can hold numbers, strings, or objects.

Example: const name = "John";

Using the same style, explain React.

By providing an example, you show the AI exactly how you want the response to be written.

This technique is often called few-shot prompting because you provide one or more examples for the AI to follow.

Examples can be especially useful when you want:

A specific writing style
Consistent formatting
Particular coding standards
Structured documentation
Better quality outputs for complex tasks

Instead of only telling the AI what you want, you are also showing it what a good answer looks like.

Applying This to My Portfolio Redesign

My original prompt was:

Redesign my portfolio website.

After learning more about prompting, I realized that this prompt only communicates the task, not the details needed to produce a result that matches my expectations.

A much better prompt would be:

Act as a senior UI/UX designer and frontend architect.

Context:

I am a full-stack developer with 3 years of experience in React.js, Node.js, Electron.js, MySQL, AWS, and Computer Vision applications. I use my portfolio to showcase my professional experience, technical skills, and projects.

Goal:

Redesign my existing portfolio website to look modern, professional, recruiter-friendly, and visually appealing.

Constraints:

Use React and MUI.

Keep the top navigation bar.

Ensure responsive design for mobile, tablet, and desktop devices.

Focus on projects, skills, experience, and achievements.

Follow accessibility and performance best practices.

Use modern spacing, typography, and animations without making the website feel cluttered.

Output Format:

Design strategy

Information architecture

Page structure

UI/UX improvements

Component hierarchy

Implementation plan

Example Style:

I like modern developer portfolios that include:

A large hero section with a strong personal introduction.

Clean typography with plenty of white space.

Card-based project showcases.

Smooth scrolling and subtle animations.

Professional color palettes with good contrast.

Skills displayed using visually organized categories.

Use a similar design philosophy while creating a unique portfolio experience.

Notice how this prompt contains all six levels of my framework:

Ask a Question
Give Context
Assign a Role
Add Constraints
Define the Output Format
Provide Examples

Compared to my original one-line prompt, this version gives the AI significantly more information and increases the chances of receiving a result that aligns with my expectations.

What Changed in My Thinking

Before this experience, I thought prompting was simply asking questions.

Now I see prompting as a way of communicating requirements clearly.

The more information I provide about my goals, context, constraints, expectations, and examples, the more likely the AI is to generate results that match what I need.

Whether I'm building a portfolio website, generating documentation, writing code, or learning a new technology, the same principle applies:

Better prompts lead to better outcomes.

My Biggest Takeaway

When I started redesigning my portfolio, I thought AI would automatically generate the perfect design from a simple instruction.

What I learned was that AI is not a mind reader.

The quality of the output depends on how clearly we communicate our goals, requirements, and expectations.

Prompt engineering is not about finding secret keywords or magic phrases.

It is about giving the AI the information it needs to succeed.

My personal framework for writing better prompts is:

Ask a Question
Give Context
Assign a Role
Add Constraints
Define the Output Format
Provide Examples

As developers, we already spend our careers learning how to communicate with computers through programming languages.

Prompt engineering is simply another form of communication—one that helps us collaborate more effectively with AI systems.

The better the communication, the better the outcome.

DEV Community: Sivasakthi Paramasivam

UI Design Styles

Complete Guide: Setting Up a Node.js + Express + TypeScript Project

JavaScript Data Types Explained: Primitive vs Non-Primitive Data Types

JavaScript Data Types: Primitive and Non-Primitive Data Types

What is a Data Type?

Example

Types of Data Types in JavaScript

Primitive Data Types

Characteristics

Types of Primitive Data Types

1. String

2. Number

3. Boolean

4. Undefined

5. Null

6. Symbol

7. BigInt

Non-Primitive Data Types

Characteristics

Types of Non-Primitive Data Types

1. Array

2. Object

3. Function

4. Date

5. Regular Expression (RegExp)

Primitive vs Non-Primitive Data Types

Example of Primitive Comparison

Example of Non-Primitive Comparison

Conclusion

JavaScript Hoisting, Temporal Dead Zone (TDZ), and Equality Operators Explained

JavaScript Hoisting, Temporal Dead Zone, Data Typing, and Equality Operators

What is Hoisting?

Example

Key Points

What is the Temporal Dead Zone (TDZ)?

Example

Why TDZ Exists

Loosely Typed vs Strongly Typed Languages

Loosely Typed Language

Example

Strongly Typed Language

Comparison

Equality Operators in JavaScript

Double Equals (==)

Example

Triple Equals (===)

Example

Comparison Table

Best Practice

Conclusion

JavaScript Variables Explained: Declaration, Initialization, var, let, and const

JavaScript Variables: Understanding var, let, and const

What is a Variable?

Example

Variable Declaration

Syntax

Variable Declaration and Initialization

Syntax

Variable Initialization

Syntax

Difference Between var, let, and const

1. var

2. let

3. const

When Should You Use Each?

Conclusion

What is JavaScript? Features, Advantages, Disadvantages, and Uses

What is JavaScript?

Why is JavaScript Important?

Advantages of JavaScript

1. Fast Execution on the Client Side

2. Supports Both Front-End and Back-End Development

3. Supported by All Modern Browsers

4. Supports Asynchronous Programming

5. TypeScript Support

Disadvantages of JavaScript

1. Loosely Typed Language

2. Single-Threaded Nature

3. Browser Compatibility Issues

Double Equals (`==`)

Triple Equals (`===`)