Forem: Er Hardik Chauhan

🧱 Chesterton’s Fence: Understanding Before You Change (Agile Thinking with Humor)

Er Hardik Chauhan — Tue, 07 Oct 2025 06:11:29 +0000

🧱 Chesterton’s Fence: Understanding Before You Change

In the rush to improve, innovate, and “move fast and break things” 💥, it’s easy to forget one golden rule:

⚠️ Don’t remove a fence until you know why it was built.

This timeless principle, known as Chesterton’s Fence, comes from writer G.K. Chesterton.

He imagined someone walking down a road 🛣️, seeing a random fence, and saying,
“This looks pointless—let’s tear it down!”

A wiser soul replies,
“If you don’t understand why it’s here, maybe don’t swing the hammer just yet.” 🔨

Sometimes that “useless fence” is the only thing stopping chaos cows from escaping 🐄💨

⚙️ The Core Lesson – Understand Before You Uninstall

Before changing or deleting anything — a rule, a process, a line of code — stop and ask yourself:

🤔 Why does this exist?
🧩 What problem did it solve?
💣 What might break if I touch it?

Many “weird” systems or traditions exist because someone in the past had a very bad day fixing what you’re about to break 😅

💬 Like an old code comment: “Don’t remove this. You won’t like what happens.”

Sometimes “legacy” doesn’t mean useless. It means battle-tested. 🛡️

💡 Agile Example – The Curious Case of the Missing Stand-up

Your Agile team decides daily stand-ups 🧍‍♀️🧍‍♂️ are “a waste of time.”
“Let’s delete them!” someone says with confidence 💪

But before hitting the cancel button ❌, the team asks why stand-ups even exist:

🔄 Keep everyone aligned
🚧 Surface blockers early
🤝 Build team accountability

So instead of deleting the meeting, they refactor it:
⏰ 10 minutes, blocker-only, no boring updates.

🎯 Result: faster, focused, and no one forgets what they’re working on (or what day it is).

That’s Chesterton’s Fence in action: inspect before you adapt. 🧠💡

⚠️ Why It Matters – The Butterfly Effect of “Oops”

🧨 Avoid unintended consequences: One tiny “fix” can start a chain reaction of chaos.
🧓 Respect past wisdom: Some rules exist because someone once nuked production on a Friday 😬
🧭 Encourage smarter innovation: When you understand the why, you design a better what’s next.

It’s not about being slow 🐢 — it’s about being smart enough not to trip over your own “improvements.” 🏃‍♂️💥

🧭 Real-World Examples – The Fences Around Us

🏢 Flat Companies:
Removing managers sounds modern and fun — until everyone’s in a meeting saying, “Sooo… who decides now?” 🤷‍♀️
📜 Laws & Regulations:
That weird rule probably exists because someone once found a creative way to break things.
🍕 Personal Habits:
Even bad habits serve a purpose (comfort, stress relief, or late-night snack debugging).
You can’t fix what you don’t understand — like eating chips while “thinking deeply.” 🤔😋

🧠 The Takeaway – Change, but Don’t Break the Build

Chesterton’s Fence isn’t about resisting change — it’s about responsible change.
In Agile terms, it’s like running a retrospective before a refactor 🔄:
🧐 Learn the why → 🧪 Test the what if → 🚀 Deliver the better version.

🔍 “Understand before you act. Respect the past, even when you’re designing the future.”

🚀 Embrace the Power of Functional Programming in JavaScript and TypeScript 🚀

Er Hardik Chauhan — Sun, 23 Feb 2025 08:52:14 +0000

Introduction

Begin with an engaging introduction that highlights the benefits of functional programming (FP). Here’s an example:

Introduction:

Welcome to the fascinating world of functional programming! Whether you're a novice JavaScript developer or a seasoned TypeScript guru, understanding functional programming can elevate your coding skills, making your applications more predictable and less prone to bugs. In this post, we'll explore the core concepts of functional programming, discuss why they are beneficial, and introduce some powerful libraries that make functional programming in JavaScript and TypeScript both enjoyable and efficient.

Core Concepts of Functional Programming

Provide a brief overview of each functional programming concept. Use headings for clarity and focus on how each concept contributes to cleaner and more efficient code.

1. Immutability 🌐

Definition: Avoiding changes to data after it's been created.
Impact: Leads to safer, easier to debug applications.
Library Highlight: Immutable.js

import { Map } from 'immutable';

let book = Map({ title: "Harry Potter" });
let updatedBook = book.set('title', "Harry Potter and the Sorcerer's Stone");
console.log(book.get('title')); // Harry Potter
console.log(updatedBook.get('title')); // Harry Potter and the Sorcerer's Stone

2. Pure Functions 💧

Definition: Functions where the return value is only determined by its input values, without observable side effects.
Benefit: Easier testing and predictable functions.
Example:

function sum(a, b) {
    return a + b;
}

3. Higher-Order Functions 🎢

Definition: Functions that take other functions as arguments or return them.
Use Case: Widely used in array manipulations.
Example:

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(x => x * 2);

Deep Dive: Function Composition in TypeScript 🧩

Choose one concept to explore in detail. Explain how it can be implemented in TypeScript, including any type annotations.

Understanding Function Composition

Function composition is a cornerstone of functional programming that allows you to combine simple functions to build more complex ones. Let's take a closer look at how it works in TypeScript.

import { pipe } from 'ramda';

const multiplyByTwo = x => x * 2;
const subtractOne = x => x - 1;

const transform = pipe(multiplyByTwo, subtractOne);

console.log(transform(3)); // (3 * 2) - 1 = 5

Practical Applications and Libraries 🛠️

Discuss practical applications of functional programming and introduce relevant libraries.

Applying Functional Programming in Real-World Scenarios

Functional programming shines in numerous real-world applications, from state management in UIs to server-side data handling. Libraries like Ramda, Lodash/FP, and Folktale enhance these applications by providing functional utilities that are both powerful and easy to use.

State Management: Using Redux with a functional approach for predictable state transitions.
Asynchronous Programming: Handling promises and asynchronous data flows using Folktale.

Conclusion 🎉

Wrap up the post by summarizing the key points and encouraging the reader to experiment with functional programming.

Embrace Functional Programming

Now that you've seen how functional programming can improve your JavaScript and TypeScript projects, it's time to integrate these concepts into your own code. Start small, perhaps by applying immutability or pure functions, and gradually explore more complex functional programming techniques.

How to Negotiate with unknown person basic trick and tips

Er Hardik Chauhan — Tue, 19 Nov 2024 16:31:34 +0000

Negotiating with an unknown person can be challenging, but with the right approach, you can build rapport, uncover their needs, and work toward a mutually beneficial agreement. Here are some basic tricks and tips to guide you:

Prepare Thoroughly

Research: Gather as much information as possible about the person, their background, or their organization (if applicable). This can help you understand their potential needs and interests.

Know Your Goals: Be clear about your priorities, your ideal outcome, and your bottom line (the least you're willing to accept).

Have Alternatives: Identify your BATNA (Best Alternative to a Negotiated Agreement) so you know your fallback plan if the negotiation doesn't work out.

Build Rapport Early

Start with Small Talk: Begin with a friendly tone to establish trust. A simple, "How are you today?" or commenting on a neutral topic can help break the ice.

Be Respectful and Polite: First impressions matter. Showing respect creates a positive foundation for the discussion.

Use Their Name: People respond positively to hearing their name—it personalizes the interaction.

Listen Actively

Ask Open-Ended Questions: Encourage them to talk by asking questions like, "What are you looking for in this deal?" or "What’s most important to you?"

Practice Active Listening: Focus on understanding their words and emotions. Repeat back key points to show you're engaged: "So what you're saying is that X is important to you, right?"

Uncover Their Interests: Pay attention to not just what they say, but why they want it. Understanding their underlying motivations can help you craft better solutions.

Stay Calm and Observant

Watch Their Body Language: Look for non-verbal cues like facial expressions, tone of voice, or hesitation. These can reveal what they’re truly feeling.

Control Your Own Body Language: Stay confident but approachable. Maintain eye contact, use a steady tone, and avoid defensive gestures (like crossing your arms).

Start with a Collaborative Tone

Position It as a Win-Win: Frame the negotiation as solving a problem together rather than competing against each other. Use phrases like, "Let’s see how we can make this work for both of us."

Avoid Aggression: Pushing too hard, especially with someone you don’t know, can make them defensive or uncooperative.

Anchor the Discussion

Make the First Offer (When Prepared): If you’ve done your research, making the first offer can set the tone and anchor the negotiation in your favor. For example, if selling something, start slightly higher than your target price.

Stay Flexible: If they make the first offer, don’t react immediately. Take a moment to consider it and counter calmly if needed.

Use Silence Strategically

Silence is a powerful tool. When they make an offer, pause before responding. This can make them feel the need to elaborate or even improve their offer.

If you’re unsure, take time to think by saying, "Let me process that for a moment."

Avoid Common Pitfalls

Don’t Reveal Too Much Too Soon: Be cautious about disclosing your bottom line or how eager you are to close the deal.

Don’t Rush: Avoid rushing into an agreement just to “get it over with.” Take your time to explore options and negotiate terms carefully.

Be Willing to Walk Away

If the other party is being unreasonable or their offer doesn’t align with your goals, don’t be afraid to walk away. Knowing your BATNA gives you confidence and leverage.

Politely say something like, "I don’t think we’re aligned right now, but I appreciate your time."

Summarize and Confirm

Before finalizing, summarize the agreement to ensure both parties are on the same page. For example, "So, just to confirm, we’ve agreed on X, Y, and Z, correct?"

Clarifying details upfront avoids misunderstandings later.

Quick Tips to Remember

Stay Calm: Even if the other person becomes aggressive or difficult, remain composed. Emotional control gives you an advantage.

Be Confident: Confidence signals that you value your position and won’t settle for less than you deserve.

Aim for Reciprocity: If you make a concession, ask for something in return. For example, "If I reduce the price, would you be willing to increase the quantity?"

By applying these strategies, you can approach negotiations with an unknown person calmly and confidently while increasing the chances of achieving a successful outcome. Remember, the key is to stay professional, flexible, and focused on mutual benefit.

A Day in the Life of a Full stack Engineer: Real Stories and Challenges

Er Hardik Chauhan — Thu, 12 Sep 2024 18:27:49 +0000

A day in the life of a full-stack engineer can vary greatly depending on the project they're working on, the size of the team, and the specific company or industry. However, here’s a general overview that combines real stories and common challenges:

Morning: Planning and Stand-ups

8:30 AM - 9:30 AM: Start the Day and Review Tasks

Many full-stack engineers begin their day by checking emails, reviewing any notifications on project management tools like Jira, Trello, or Asana, and updating themselves on the latest pull requests or code merges that happened overnight.

Reviewing bug reports, feature requests, or ongoing tasks is a priority. Some engineers also spend time checking build statuses on platforms like Jenkins or CircleCI.

9:30 AM - 10:00 AM: Daily Stand-Up Meeting (Agile)

Most full-stack engineers work in an Agile environment, which means they have a daily stand-up meeting with their team. Here, they quickly share what they worked on yesterday, what they're focusing on today, and any blockers they are facing.

The stand-up is a great time to collaborate, seek help on complex challenges, and stay updated on what other team members are working on, both on the front-end and back-end.

Mid-Morning: Deep Dive into Code

10:00 AM - 12:00 PM: Development (Back-End Focus)

During this period, a full-stack engineer might work on the back-end aspect of their project. This could include:

Writing server-side logic in Node.js, Python, Ruby, or Java.

Optimizing database queries (SQL, NoSQL) or integrating new endpoints with an API.

Configuring cloud infrastructure (AWS, Azure, or GCP).

Working with databases like PostgreSQL or MongoDB for data manipulation and ensuring queries are performant.

Writing unit tests and ensuring that backend services are running smoothly.

Challenge: Managing complex database transactions or dealing with slow queries can often be a source of frustration. Debugging cloud service issues and authentication problems is another common back-end challenge.

Lunch Break and Informal Chats

12:00 PM - 1:00 PM: Break Time

Many engineers take this time to unwind, have lunch, or engage in informal discussions with colleagues about technology, industry trends, or non-work-related topics.

Early Afternoon: Tackling Front-End

1:00 PM - 3:00 PM: Front-End Development

Shifting to the front-end, the engineer might work on implementing user interfaces using frameworks like React, Angular, or Vue.js.

Responsibilities can include:

Building and styling components with HTML, CSS, and JavaScript (or TypeScript).

Ensuring the front-end is responsive and accessible on different devices.

Integrating APIs or microservices with the front-end.

Debugging UI issues, cross-browser compatibility problems, or fixing layout bugs.

Challenge: Browser compatibility issues, handling state management (especially in complex applications), and optimizing page load times are often the most time-consuming tasks on the front-end.

Late Afternoon: Code Reviews, Testing, and Collaboration

3:00 PM - 4:30 PM: Code Reviews and Bug Fixes

Most full-stack engineers participate in code reviews. They may spend time reviewing their teammates' pull requests on GitHub or GitLab, ensuring that the code adheres to standards and doesn’t introduce bugs or security vulnerabilities.

They might also need to fix bugs or technical debt that has surfaced from previous sprints.

Challenge: Explaining code decisions or handling merge conflicts can sometimes be stressful, especially when different team members have differing opinions on implementation.

4:30 PM - 5:30 PM: Testing and Deployment

By the late afternoon, engineers focus on testing their code. They might run automated tests, conduct manual testing on a staging environment, or handle Continuous Integration/Continuous Deployment (CI/CD) tasks.

If everything looks good, they might push changes to production or prepare for a deployment.

Challenge: Unexpected deployment issues, such as failures in the CI/CD pipeline or performance degradation after a release, are always potential challenges. Full-stack engineers often need to troubleshoot in real-time, sometimes working alongside DevOps teams.

Evening: Wrap-Up and Learning

5:30 PM - 6:00 PM: Wrapping Up and Documentation

The engineer may spend the last part of their day wrapping up tasks, updating project documentation, writing comments on Jira tickets, or leaving notes for the next day's work.

Many engineers also dedicate this time to learning new tools, frameworks, or technologies, as the tech industry is ever-evolving.

Challenge: Balancing learning with daily tasks can be difficult, but staying up to date with modern development practices is crucial in the life of a full-stack engineer.

Real Challenges in a Full-Stack Engineer’s Day:

1. Context Switching: Switching between front-end and back-end tasks throughout the day requires mental agility. Moving from CSS styling issues to debugging an API can be mentally taxing.

2. Debugging Complexity: Debugging across the stack (front-end, back-end, databases) can be difficult. Tracking down issues that span multiple layers of the application can take up more time than anticipated.

3. Staying Updated: With ever-changing tools, frameworks, and best practices, staying current in both front-end and back-end technologies is a challenge in itself.

4. Collaboration: Since full-stack engineers work across the entire application stack, they often collaborate with both front-end and back-end specialists. Miscommunications or lack of alignment between teams can sometimes cause delays or misunderstandings.

5. Time Management: With competing priorities—fixing bugs, developing new features, reviewing code, writing tests, and ensuring everything runs smoothly on production—time management is critical.

While full-stack engineers face a wide range of responsibilities and challenges, many thrive on the variety of tasks and the opportunity to work across the entire software development lifecycle.

Immer : Clear understanding of how to handle nested state objects with Immer in React and TypeScript

Er Hardik Chauhan — Sat, 24 Aug 2024 13:01:09 +0000

A Step-by-Step Guide to Using Immer in TypeScript and React

Introduction

In modern React development, managing state immutably is crucial for predictable behavior and performance optimizations. However, ensuring immutability can be challenging, especially when dealing with complex or deeply nested state objects. This is where Immer comes in. Immer allows you to work with immutable state in a more convenient and readable way by using a concept called "draft state."

In this blog post, we'll walk through how to integrate Immer into a React project using TypeScript. We'll cover the basics of Immer, setting up a React project with TypeScript, and using Immer to manage state immutably, including handling deeply nested state objects.

Prerequisites

Basic knowledge of React and TypeScript.
Node.js and npm/yarn installed on your machine.

Step 1: Setting Up the React Project

First, let's set up a new React project with TypeScript.

npx create-react-app my-immer-app --template typescript
cd my-immer-app

Once the project is set up, you can start the development server to ensure everything is working correctly.

npm start

This should start a development server on http://localhost:3000.

Step 2: Installing Immer

Immer is not included by default in React projects, so you need to install it:

npm install immer

After installing Immer, you’re ready to start using it in your project.

Step 3: Understanding the Basics of Immer

Immer simplifies immutable updates by using the concept of a "draft state." Instead of directly modifying the state, you modify the draft state. Once the modifications are done, Immer produces the next immutable state based on the changes made to the draft.

Here's a basic example:

import produce from 'immer';

const state = {
  name: 'Alice',
  age: 25,
};

const nextState = produce(state, (draft) => {
  draft.age = 26;
});

console.log(state); // { name: 'Alice', age: 25 }
console.log(nextState); // { name: 'Alice', age: 26 }

In this example, the original state remains unchanged, while nextState reflects the changes made during the produce function.

Step 4: Using Immer in a React Component

Now, let's integrate Immer into a React component. We’ll create a simple counter component that uses Immer to manage state immutably.

import React, { useState } from 'react';
import produce from 'immer';

const Counter: React.FC = () => {
  const [state, setState] = useState({ count: 0 });

  const increment = () => {
    setState((currentState) =>
      produce(currentState, (draft) => {
        draft.count += 1;
      })
    );
  };

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

In this component:

We initialize the state with useState.
The increment function updates the count by using Immer's produce function.
The setState function is called with the updated state, ensuring that the state remains immutable.

Step 5: Handling Nested State

Immer is particularly useful when dealing with deeply nested state objects. Consider a state structure like this:

interface Address {
  city: string;
  zip: string;
}

interface UserProfile {
  name: string;
  age: number;
  address: Address;
}

const initialState: UserProfile = {
  name: 'Alice',
  age: 25,
  address: {
    city: 'New York',
    zip: '10001',
  },
};

If you want to update the zip code in the address object, Immer makes it easy:

import React, { useState } from 'react';
import produce from 'immer';

const UserProfileComponent: React.FC = () => {
  const [state, setState] = useState(initialState);

  const updateZip = (newZip: string) => {
    setState((currentState) =>
      produce(currentState, (draft) => {
        draft.address.zip = newZip;
      })
    );
  };

  return (
    <div>
      <p>Name: {state.name}</p>
      <p>Age: {state.age}</p>
      <p>City: {state.address.city}</p>
      <p>Zip: {state.address.zip}</p>
      <button onClick={() => updateZip('10002')}>Update Zip</button>
    </div>
  );
};

export default UserProfileComponent;

Here:

We use produce to update the nested address.zip property.
The original state remains untouched, and a new state object is created with the updated values.

Step 6: More Complex Nested State Example

Let’s explore an even more complex example where you need to update multiple nested properties. Consider a more detailed UserProfile:

interface Contact {
  email: string;
  phone: string;
}

interface Address {
  city: string;
  zip: string;
}

interface UserProfile {
  name: string;
  age: number;
  address: Address;
  contact: Contact;
}

const initialState: UserProfile = {
  name: 'Alice',
  age: 25,
  address: {
    city: 'New York',
    zip: '10001',
  },
  contact: {
    email: 'alice@example.com',
    phone: '123-456-7890',
  },
};

Suppose you want to update both the city and the phone in one operation:

import React, { useState } from 'react';
import produce from 'immer';

const UserProfileComponent: React.FC = () => {
  const [state, setState] = useState(initialState);

  const updateUserInfo = (newCity: string, newPhone: string) => {
    setState((currentState) =>
      produce(currentState, (draft) => {
        draft.address.city = newCity;
        draft.contact.phone = newPhone;
      })
    );
  };

  return (
    <div>
      <p>Name: {state.name}</p>
      <p>Age: {state.age}</p>
      <p>City: {state.address.city}</p>
      <p>Zip: {state.address.zip}</p>
      <p>Email: {state.contact.email}</p>
      <p>Phone: {state.contact.phone}</p>
      <button onClick={() => updateUserInfo('Los Angeles', '987-654-3210')}>
        Update City and Phone
      </button>
    </div>
  );
};

export default UserProfileComponent;

In this example:

We update the city in the address and the phone in the contact objects simultaneously.
Immer handles these complex nested updates smoothly, ensuring the state remains immutable.

Step 7: Conclusion

Immer is a powerful tool that simplifies working with immutable state in React applications, especially when using TypeScript. It provides a more readable and less error-prone way to manage state updates, making your code cleaner and easier to maintain.

By integrating Immer into your React projects, you can ensure that your state management remains predictable and robust, even as your application grows in complexity.

This guide has shown you how to handle both simple and complex state updates, including deeply nested state objects. Immer helps maintain immutability in a straightforward way, which is essential for building reliable and maintainable React applications.

Additional Resources

I hope this guide gives you a strong foundation for using Immer with React and TypeScript in your projects. Happy coding!

This version of the blog should give you a clear understanding of how to handle nested state objects with Immer in React and TypeScript.

Master Full-Stack Monorepos: A Step-by-Step Guide

Er Hardik Chauhan — Sat, 03 Aug 2024 05:59:17 +0000

Ever wondered how to streamline your full-stack development process? This guide walks you through setting up a full-stack monorepo with the latest tools and technologies. Follow these step-by-step instructions to create a modern, robust, and scalable application using:

> TypeScript
> Vite
> pnpm
> Docker
> And more!

Full-Stack Monorepo Setup Documentation

This documentation covers the setup and usage of a full-stack monorepo project with the following technologies and tools:

Here are the tools grouped into relevant categories:

Programming Language and Frameworks

- TypeScript
- Express
- React

Build and Development Tools

- Vite
- pnpm
- Docker
- ESLint
- Prettier
- Husky

Database and ORM

- Sequelize
- PostgreSQL

Authentication and Security

- jsonwebtoken
- bcryptjs
- cookie-parser
- AWS WAF

AWS and Cloud Services

- AWS SDK v3
- Terraform

Logging and Validation

- Winston
- Zod

Networking and API

- Axios

UI Frameworks and Libraries

- Bootstrap

CI/CD and DevOps

- GitHub Actions
- SonarQube
- Trivy

These groupings can help organize your tools by their purpose, making it easier for your readers to understand the different aspects of your full-stack monorepo setup.

Project Structure

my-monorepo/
│
├── packages/
│   ├── server/
│   │   ├── Dockerfile
│   │   ├── src/
│   │   │   ├── config/
│   │   │   │   └── sequelize.ts
│   │   │   ├── controllers/
│   │   │   │   └── userController.ts
│   │   │   ├── middleware/
│   │   │   │   └── auth.ts
│   │   │   ├── models/
│   │   │   │   └── user.ts
│   │   │   ├── repositories/
│   │   │   │   └── userRepository.ts
│   │   │   ├── routes/
│   │   │   │   ├── auth.ts
│   │   │   │   └── user.ts
│   │   │   ├── services/
│   │   │   │   └── userService.ts
│   │   │   ├── utils/
│   │   │   │   ├── logger.ts
│   │   │   │   └── syncEnv.ts
│   │   │   └── index.ts
│   │   ├── package.json
│   │   ├── tsconfig.json
│   │   ├── .env.development
│   │   ├── .env.beta
│   │   ├── .env.test
│   │   ├── .env.production
│   │   ├── sequelize-cli/
│   │   │   ├── config/
│   │   │   │   └── config.js
│   │   │   ├── models/
│   │   │   ├── migrations/
│   │   │   └── seeders/
│   ├── client/
│   │   ├── src/
│   │   │   ├── axios.ts
│   │   │   ├── context/
│   │   │   │   └── AuthContext.tsx
│   │   │   ├── components/
│   │   │   │   └── AuthExample.tsx
│   │   │   ├── App.tsx
│   │   │   ├── main.tsx
│   │   │   └── index.html
│   │   ├── package.json
│   │   ├── tsconfig.json
│   │   └── vite.config.ts
│   ├── shared/
│   │   ├── src/
│   │   │   └── utils.ts
│   │   ├── package.json
│   │   └── tsconfig.json
├── terraform/
│   ├── development/
│   │   ├── main.tf
│   │   ├── variables.tf
│   │   └── terraform.tfvars
│   ├── production/
│   │   └── main.tf
├── .github/
│   └── workflows/
│       └── deploy.yml
├── .eslintrc.json
├── .prettierrc
├── docker-compose.yml
├── package.json
├── pnpm-workspace.yaml
├── tsconfig.json

Step-by-Step Setup

1. Initialize the Monorepo

Create Project Structure:

mkdir my-monorepo
cd my-monorepo
mkdir packages
mkdir packages/server packages/client packages/shared
touch pnpm-workspace.yaml
touch .env.development .env.beta .env.test .env.production
touch docker-compose.yml
touch .eslintrc.json .prettierrc

Initialize the Monorepo with pnpm:

pnpm init -y

Set Up Workspaces in pnpm-workspace.yaml:

packages:
  - 'packages/*'

2. Environment Variables

Create Environment Files:

.env.development:

VITE_NODE_ENV=development
VITE_DATABASE_URL=postgres://user:password@db:5432/mydb_dev
VITE_PORT=4000
VITE_JWT_SECRET=your_jwt_secret

.env.beta, .env.test, .env.production: similarly create these files with appropriate values.

3. Docker Configuration

Create docker-compose.yml:

version: '3.8'
services:
  server:
    build: ./packages/server
    ports:
      - "${VITE_PORT}:${VITE_PORT}"
    env_file:
      - ./.env.development
    depends_on:
      - db
  db:
    image: postgres:latest
    ports:
      - "5432:5432"
    environment:
      POSTGRES_USER: user
      POSTGRES_PASSWORD: password
      POSTGRES_DB: mydb_development

Create Dockerfile for Server in packages/server/Dockerfile:

FROM node:22

WORKDIR /app

COPY package*.json ./
COPY pnpm-lock.yaml ./
RUN npm install -g pnpm
RUN pnpm install

COPY . .

RUN pnpm -r build

CMD ["pnpm", "dev"]

4. TypeScript Configuration

Create the Root tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@shared/*": ["packages/shared/src/*"],
      "@client/*": ["packages/client/src/*"],
      "@server/*": ["packages/server/src/*"]
    }
  },
  "include": ["packages/*/src"]
}

Install TypeScript:

pnpm add -D typescript

5. Linting and Formatting

Create .eslintrc.json:

{
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "rules": {}
}

Create .prettierrc:

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "trailingComma": "all"
}

Install ESLint and Prettier:

pnpm add -D eslint prettier eslint-plugin-prettier eslint-config-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser

6. Husky

Install Husky:

pnpm add -D husky
pnpm dlx husky-init && pnpm install

Add a Pre-commit Hook:

npx husky add .husky/pre-commit "pnpm lint"

7. Configure Server with Controller-Service-Repository Pattern, Logging, and Authentication

Install Dependencies:

pnpm add express sequelize pg pg-hstore jsonwebtoken bcryptjs cookie-parser zod winston @aws-sdk/client-secrets-manager
pnpm add -D @types/express @types/node @types/jsonwebtoken @types/bcryptjs @types/cookie-parser @types/sequelize

Configure vite.config.ts:

packages/server/vite.config.ts:

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    port: Number(import.meta.env.VITE_PORT) || 4000,
  }
});

Create Sequelize Configuration:

packages/server/src/config/sequelize.ts:

import { Sequelize } from 'sequelize';

const sequelize = new Sequelize(import.meta.env.VITE_DATABASE_URL as string, {
  dialect: 'postgres',
});

export default sequelize;

Create User Model:

packages/server/src/models/user.ts:

import { DataTypes, Model } from 'sequelize';
import sequelize from '../config/sequelize';

class User extends Model {
  public id!: number;
  public email!: string;
  public password!: string;
}

User.init(
  {
    id: {
      type: DataTypes.INTEGER,
      autoIncrement: true,
      primaryKey: true,
    },
    email: {
      type: DataTypes.STRING,
      allowNull: false,
      unique: true,
    },
    password: {
      type: DataTypes.STRING,
      allowNull: false,
    },
  },
  {
    sequelize,
    tableName: 'users',
  }
);

export default User;

Create Repository:

packages/server/src/repositories/userRepository.ts:

import User from '../models/user';

class UserRepository {
  async create(email: string, password: string) {
    return User.create({ email, password });
  }

  async findByEmail(email: string) {
    return User.findOne({ where: { email } });
  }

  async findById(id: number) {
    return User.findByPk(id);
  }
}

export default new UserRepository();

Create Service:

packages/server/src/services/userService.ts:

import bcrypt from 'bcryptjs';
import userRepository from '../repositories/userRepository';
import { generateToken } from '../utils/auth';
import User from '../models/user';

class UserService {
  async register(email: string, password: string) {
    const hashedPassword = await bcrypt.hash(password, 10);
    const user = await userRepository.create(email, hashedPassword);
    const token = generateToken(user);
    return { user, token };
  }

  async login(email: string, password: string) {
    const user = await userRepository.findByEmail(email);
    if (!user) throw new Error('Invalid email or password');
    const isValidPassword = await bcrypt.compare(password, user.password);
    if (!isValidPassword) throw new Error('Invalid email or password');
    const token = generateToken(user);
    return { user, token };
  }

  async getUserById(id: number) {
    return userRepository.findById(id);
  }
}

export default new UserService();

Create Controller:

packages/server/src/controllers/userController.ts:

import { Request, Response } from 'express';
import userService from '../services/userService';
import logger from '../utils/logger';

class UserController {
  async register(req: Request, res: Response) {
    try {
      const { email, password } = req.body;
      const { user, token } = await userService.register(email, password);
      res.cookie('token', token, { httpOnly: true });
      res.status(201).json({ message: 'User registered', user });
    } catch (error) {
      logger.error('Error in register: %o', error);
      res.status(400).json({ message: error.message });
    }
  }

  async login(req: Request, res: Response) {
    try {
      const { email, password } = req.body;
      const { user, token } = await userService.login(email, password);
      res.cookie('token', token, { httpOnly: true });
      res.status(200).json({ message: 'User logged in', user });
    } catch (error) {
      logger.error('Error in login: %o', error);
      res.status(400).json({ message: error.message });
    }
  }

  async logout(req: Request, res: Response) {
    res.clearCookie('token');
    res.status(200).json({ message: 'User logged out' });
  }

  async profile(req: Request, res: Response) {
    try {
      const user = await userService.getUserById(req.user.id);
      res.json({ user });
    } catch (error) {
      logger.error('Error in profile: %o', error);
      res.status(400).json({ message: error.message });
    }
  }
}

export default new UserController();

Authentication Middleware:

packages/server/src/middleware/auth.ts:

import { Request, Response, NextFunction } from 'express';
import jwt from 'jsonwebtoken';
import User from '../models/user';

export const authenticateJWT = (req: Request, res: Response, next: NextFunction) => {
  const token = req.cookies.token;

  if (token) {
    jwt.verify(token, import.meta.env.VITE_JWT_SECRET as string, (err, user) => {
      if (err) {
        return res.sendStatus(403);
      }
      req.user = user;
      next();
    });
  } else {
    res.sendStatus(401);
  }
};

export const generateToken = (user: User) => {
  return jwt.sign({ id: user.id, email: user.email }, import.meta.env.VITE_JWT_SECRET as string, { expiresIn: '1h' });
};

Logging with Winston:

packages/server/src/utils/logger.ts:

import { createLogger, format, transports } from 'winston';

const logger = createLogger({
  level: 'info',
  format: format.combine(
    format.timestamp({ format: 'YYYY-MM-DD HH:mm:ss' }),
    format.errors({ stack: true }),
    format.splat(),
    format.json()
  ),
  defaultMeta: { service: 'user-service' },
  transports: [
    new transports.File({ filename: 'error.log', level: 'error' }),
    new transports.File({ filename: 'combined.log' }),
  ],
});

if (process.env.NODE_ENV !== 'production') {
  logger.add(new transports.Console({
    format: format.combine(
      format.colorize(),
      format.simple()
    )
  }));
}

export default logger;

Create Routes:

packages/server/src/routes/auth.ts:

import express from 'express';
import userController from '../controllers/userController';

const router = express.Router();

router.post('/register', userController.register);
router.post('/login', userController.login);
router.post('/logout', userController.logout);

export default router;

packages/server/src/routes/user.ts:

import express from 'express';
import { authenticateJWT } from '../middleware/auth';
import userController from '../controllers/userController';

const router = express.Router();

router.get('/profile', authenticateJWT, userController.profile);

export default router;

Sync Environment Variables from AWS Secrets Manager:

packages/server/src/utils/syncEnv.ts:

import { SecretsManagerClient, GetSecretValueCommand } from "@aws-sdk/client-secrets-manager";
import dotenv from "dotenv";
dotenv.config();

const client = new SecretsManagerClient({ region: "your-region" });

async function syncEnv() {
  const secretName = "your-secret-name";
  const command = new GetSecretValueCommand({ SecretId: secretName });

  try {
    const data = await client.send(command);
    if (data.SecretString) {
      const secrets = JSON.parse(data.SecretString);
      for (const key in secrets) {
        import.meta.env[key] = secrets[key];
      }
    }
  } catch (err) {
    console.error(err);
  }
}

syncEnv();

Main Server File:

packages/server/src/index.ts:

import express from 'express';
import cookieParser from 'cookie-parser';
import dotenv from 'dotenv';
import authRoutes from './routes/auth';
import userRoutes from './routes/user';
import sequelize from './config/sequelize';
import './utils/syncEnv';
import logger from './utils/logger';

dotenv.config();

const app = express();
const port = import.meta.env.VITE_PORT || 4000;

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

app.use('/auth', authRoutes);
app.use('/user', userRoutes);

app.get('/', (req, res) => {
  res.send('Hello from Express and TypeScript!');
});

sequelize.sync().then(() => {
  app.listen(port, () => {
    logger.info(`Server is running at http://localhost:${port}`);
  });
});

8. Frontend Configuration

Create package.json for Client:

{
  "name": "client",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "vitest",
    "e2e": "playwright test"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "bootstrap": "^5.0.2",
    "axios": "^0.21.1"
  },
  "devDependencies": {
    "vite": "^2.3.8",
    "vitest": "^0.0.134",
    "typescript": "^4.2.4",
    "@vitejs/plugin-react": "^1.1.0",
    "@playwright/test": "^1.12.3"
  }
}

Create tsconfig.json in Client:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "src",
    "module": "esnext",
    "target": "es6",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src"]
}

Create vite.config.ts for Client:

packages/client/vite.config.ts:

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

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000
  }
});

Set Up Axios:

packages/client/src/axios.ts:

import axios from 'axios';

const api = axios.create({


 baseURL: import.meta.env.VITE_API_URL || 'http://localhost:4000',
  withCredentials: true,
});

export default api;

Auth Context:

packages/client/src/context/AuthContext.tsx:

import React, { createContext, useState, useEffect, ReactNode } from 'react';
import api from '../axios';

interface AuthContextProps {
  user: any;
  login: (email: string, password: string) => Promise<void>;
  logout: () => Promise<void>;
}

const AuthContext = createContext<AuthContextProps | undefined>(undefined);

export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [user, setUser] = useState<any>(null);

  useEffect(() => {
    // Check if the user is authenticated on mount
    const fetchUser = async () => {
      try {
        const response = await api.get('/user/profile');
        setUser(response.data.user);
      } catch (err) {
        setUser(null);
      }
    };

    fetchUser();
  }, []);

  const login = async (email: string, password: string) => {
    const response = await api.post('/auth/login', { email, password });
    setUser(response.data.user);
  };

  const logout = async () => {
    await api.post('/auth/logout');
    setUser(null);
  };

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => {
  const context = React.useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
};

Auth Component Example:

packages/client/src/components/AuthExample.tsx:

import React, { useState } from 'react';
import { useAuth } from '../context/AuthContext';

const AuthExample: React.FC = () => {
  const { user, login, logout } = useAuth();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async () => {
    await login(email, password);
  };

  return (
    <div>
      {user ? (
        <div>
          <h1>Welcome, {user.email}</h1>
          <button onClick={logout}>Logout</button>
        </div>
      ) : (
        <div>
          <h1>Login</h1>
          <input
            type="email"
            placeholder="Email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
          <input
            type="password"
            placeholder="Password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
          <button onClick={handleLogin}>Login</button>
        </div>
      )}
    </div>
  );
};

export default AuthExample;

Main Component:

packages/client/src/App.tsx:

import React from 'react';
import { AuthProvider } from './context/AuthContext';
import AuthExample from './components/AuthExample';

const App: React.FC = () => {
  return (
    <AuthProvider>
      <AuthExample />
    </AuthProvider>
  );
};

export default App;

Index File:

packages/client/src/main.tsx:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(<App />, document.getElementById('root'));

HTML File:

packages/client/src/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React Vite App</title>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
</body>
</html>

Step 9: CI/CD Configuration with GitHub Actions

Create .github/workflows/deploy.yml:

name: CI/CD Pipeline

on:
  push:
    branches:
      - main
      - development
      - beta
      - test
      - production
  pull_request:
    branches:
      - main

jobs:
  build:
    name: Build and Test
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v2

    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '22'
        cache: 'pnpm'

    - name: Install dependencies
      run: pnpm install

    - name: Run tests
      run: pnpm test

    - name: Run linting
      run: pnpm lint

    - name: Run formatting
      run: pnpm format

  sonar:
    name: SonarQube Scan
    runs-on: ubuntu-latest
    needs: build

    steps:
    - name: Checkout code
      uses: actions/checkout@v2

    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '22'
        cache: 'pnpm'

    - name: Install dependencies
      run: pnpm install

    - name: Run SonarQube scan
      env:
        SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
      run: |
        pnpm install -g sonar-scanner
        sonar-scanner \
          -Dsonar.projectKey=my-project \
          -Dsonar.sources=. \
          -Dsonar.host.url=${{ secrets.SONAR_HOST_URL }} \
          -Dsonar.login=${{ secrets.SONAR_TOKEN }}

  trivy:
    name: Trivy Scan
    runs-on: ubuntu-latest
    needs: build

    steps:
    - name: Checkout code
      uses: actions/checkout@v2

    - name: Set up Docker Buildx
      uses: docker/setup-buildx-action@v1

    - name: Build Docker image
      run: docker build -t my-app .

    - name: Run Trivy scan
      uses: aquasecurity/trivy-action@master
      with:
        image-ref: my-app

  deploy:
    name: Deploy
    needs: [build, sonar, trivy]
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/development' || github.ref == 'refs/heads/beta' || github.ref == 'refs/heads/test' || github.ref == 'refs/heads/production'

    steps:
    - name: Checkout code
      uses: actions/checkout@v2

    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '22'
        cache: 'pnpm'

    - name: Install dependencies
      run: pnpm install

    - name: Build project
      run: pnpm run build

    - name: Configure AWS credentials
      uses: aws-actions/configure-aws-credentials@v1
      with:
        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        aws-region: us-west-2

    - name: Deploy frontend to S3 and CloudFront
      run: |
        aws s3 sync packages/client/dist s3://${{ secrets.S3_BUCKET_NAME }}
        aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} --paths "/*"

    - name: Deploy backend with Terraform
      env:
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
      run: |
        cd terraform/${{ github.ref_name }}
        terraform init
        terraform apply -auto-approve

  release:
    name: Create Release
    runs-on: ubuntu-latest
    needs: deploy
    if: github.ref == 'refs/heads/main'

    steps:
    - name: Checkout code
      uses: actions/checkout@v2

    - name: Create release
      uses: actions/create-release@v1
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      with:
        tag_name: v1.0.${{ github.run_number }}
        release_name: Release v1.0.${{ github.run_number }}
        draft: false
        prerelease: false

Step 10: Configure Secrets in GitHub

In your GitHub repository, navigate to Settings -> Secrets and add the following secrets:

AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY
S3_BUCKET_NAME
CLOUDFRONT_DISTRIBUTION_ID
SONAR_HOST_URL
SONAR_TOKEN
GITHUB_TOKEN (usually auto-generated by GitHub Actions)

Step 11: Install Dependencies and Run

Install all dependencies:

pnpm install

Run local development:

pnpm run dev

Push to GitHub:

git add .
git commit -m "Initial setup with CI/CD, Docker, and Terraform"
git push origin main

Step 12: Sequelize Commands

Generate a new migration:

npx sequelize-cli migration:generate --name migration_name

Run migrations:

npx sequelize-cli db:migrate

Create a new model:

npx sequelize-cli model:generate --name ModelName --attributes name:string,age:integer

Generate seed data:

npx sequelize-cli seed:generate --name seed_name

Run seeders:

npx sequelize-cli db:seed:all