Welcome, in this website I will be sharing my experience as a Software Engineer!

Ismoil Shokirov's blog


### Why Self-Hosting?

Today, hosting applications can get quite expensive. Cloud platforms like AWS, Google Cloud, and DigitalOcean offer great services, but costs can quickly add up as your project scales. On the other hand, frontend hosting platforms like Vercel and Netlify provide free plans, but sometimes you need full control over your server for backend applications or more complex configurations.

One cost-effective solution is self-hosting your applications on a VPS (Virtual Private Server) like DigitalOcean or even on a Raspberry Pi, a low-cost mini-computer. This guide will walk you through deploying a React app on DigitalOcean using Nginx, configuring DNS to use your own domain, and optimizing performance with caching.

🛠 What You’ll Need:

- A DigitalOcean droplet (or any other VPS, even a Raspberry Pi)
- A registered domain name (from Namecheap, GoDaddy, Cloudflare, etc.)
- SSH access to the server
- Basic knowledge of Linux commands
- A ReactJS app ready for deployment

## Read the full post [`here in medium`](https://medium.com/@ismoil.793/deploying-a-react-app-on-digitalocean-with-nginx-a-custom-domain-a-budget-friendly-guide-5b7d379286cf)


Want to Host Your Frontend or Backend App for under $4 a month? Here’s How! 🌍

🚀 Deploying a React App on DigitalOcean with Nginx & a Custom Domain (A Budget-Friendly Guide)


### Introduction

Enterprise applications are the backbone of modern businesses, designed to handle large-scale operations, multiple users, and complex workflows. With its robust features and simplicity, Java Spring Boot has become a favorite framework for building such applications. In this post, we’ll dive into the essential and advanced concepts of enterprise application development using Spring Boot.

### What Are Enterprise Applications?

Enterprise applications are large-scale software solutions designed to address the intricate needs of modern organizations. They focus on ensuring operational efficiency, enabling scalability, and maintaining performance under demanding conditions.

### Key Features

- Reliability: Consistently operational with minimal disruptions.
- Scalability: Grows seamlessly with increased workloads.
- Performance: Handles extensive transactions and processes efficiently.

Common Applications

- ERP Systems: Integrate key business operations like finance, logistics, and HR.
- CRM Platforms: Help manage customer relationships and sales pipelines.
- SCM Solutions: Streamline supply chain activities and inventory management.
- HRM Tools: Automate hiring, payroll, and employee performance tracking.
- BI Systems: Analyze organizational data for strategic decision-making.

## Read the full post [`here in medium`](https://medium.com/@ismoil.793/mastering-enterprise-applications-with-java-spring-boot-9fbdf040790f)


Enterprise applications are the backbone of modern businesses, designed to handle large-scale operations, multiple users, and complex workflows.

☕️ Mastering Enterprise Applications with Java Spring Boot


We will go over the actual codes for all types of design patterns.

There are 3 categories of design patterns:

- Creational (Builder, Factory, Prototype, Singleton and others)
- Structural ()
- Behavioral (Iterator, Mediator, Observer, State and others)

## Creational design patterns

#### Singleton.ts

```ts
class SingleTon {
  private static instance: SingleTon;

  private constructor() {}

  public static getInstance(): SingleTon {
    if (!SingleTon.instance) {
      SingleTon.instance = new SingleTon();
    }

    return SingleTon.instance;
  }
}

const s = SingleTon.getInstance();

// As objects in JS are passed by reference the below code
// can also be considered as Singleton
const singletonObj = {
  test: 1,
};
```

#### Prototype.ts

```ts
// Prototype is just a fancy word for "clone"
// it basically permorms clone operation

const zombie = {
  eatBrains() {
    return 'yum 🧠';
  },
};

const chad = Object.create(zombie, { name: { value: 'little chad' } });
console.log(chad.name, chad.eatBrains());
```

## Structural design patterns

#### Proxy.ts

```ts
// This pattern is useful when you want to add an extra layer of control over access to an object.
// The proxy acts as an intermediary, controlling access to the real object.

const original = { name: 'Jeff' };

const reactive = new Proxy(original, {
  get: (target, key) => {
    console.log('Tracking: ', key);
    return target[key];
  },
  set: (target, key, value) => {
    console.log('Updating...');
    return Reflect.set(target, key, value);
  },
});

reactive.name;

reactive.name = 'Bob';
```

## Behavioral design patterns

#### Iterator.ts

```ts
// Defines how items in a collection should be iterated

const arr = [1, 2, 3];
const obj = { name: 'Ism' };

for (const item of arr) {
  console.log(item);
}

for (const prop in obj) {
  console.log(prop, obj[prop]);
}
```

#### Mediator.ts

```ts
// Example: ExpressJS middleware

function logger(req, res, next) {
  console.log('Request type is', req.method);
}

// @ts-ignore
app.use(logger);
```

## Find all examples in my [`github repo`](https://github.com/ismoil793/grokking-algorithms/tree/main/Design%20Patterns)


In this tutorial we will go over some design patterns and learn how to use them in real projects

Design Patterns in a nutshell


You might have seen such a Javascript file containing _**use strict;**_ on top

```js
"use strict";
```
It is quite an important statement which makes a Javascript to run in a strict mode

It is very handy to get rid of potential bugs, let's take a look to some examples


```js
myVariable = 10
console.log(10)
```
It is just going to log `10` with no errors, even thogh we didn't use var, let or const keywords

```
10
```

However, if you use the strict mode like this:
```java
"use strict";

myVariable = 10
console.log(10)

// Result:
Uncaught ReferenceError: myVariable is not defined
```

Without strict mode being used you can do really weird things with Javascript
```js
undefined = "defined"
```
Value of **undefined** won't be changed because it **is ready only**, but it won't also print any errors

```java
"use strict";

undefined = "defined"

// Result:
Uncaught TypeError: Cannot assign to read only property 'undefined'
```

Let's also have a look to the following script:

```javascript

function combine(x, x, z) {
    return [x, x, z]
}

console.log(combine(1,2,3))

// Result:
[2,2,3] // because value of x is overwritten
```

It is just meaningless to redifine a function parameter

```java
"use strict";

function combine(x, x, z) {
    return [x, x, z]
}

console.log(combine(1,2,3))

// Result:
Uncaught SyntaxError: Duplicate parameter name 
not allowed in this context
```



> Good news for those who use `module exports and imports`, because they use the strict mode by defautl.
Moreover, class definitions will also use the strict mode.


If you are interested in more details about **"use strict"**, I recommend you to watch [this video](https://www.youtube.com/watch?v=G9QTBS2x8U4)

This time we will discuss what is 'use strict' and why it is needed

What is "use strict" in Javascript and its importance


First of all we need to remember that in ReactJS **window** object is available only after the component is mounted.
So, we can use a **useEffect** hook to subscribe for **_window resize_** event and unsubscribe from it on component unmount.

```js
const useDeviceSize = () => {

  const handleWindowResize = () => {}

  useEffect(() => {
    // component is mounted and window is available
    handleWindowResize();
    window.addEventListener('resize', handleWindowResize);
    // unsubscribe from the event on component unmount
    return () => window.removeEventListener('resize', handleWindowResize);
  }, []);
  
}
```

Next up we need a state to keep track of width and height of the window
```js
const useDeviceSize = () => {
  const [width, setWidth] = useState(0)
  const [height, setHeight] = useState(0)

  const handleWindowResize = () => {
    setWidth(window.innerWidth);
    setHeight(window.innerHeight);
  }

  ...
}
```

Complete code snippet of **useDeviceSize()** hook:

```js
import React, {useState, useEffect} from 'react'

const useDeviceSize = () => {

  const [width, setWidth] = useState(0)
  const [height, setHeight] = useState(0)

  const handleWindowResize = () => {
    setWidth(window.innerWidth);
    setHeight(window.innerHeight);
  }

  useEffect(() => {
    // component is mounted and window is available
    handleWindowResize();
    window.addEventListener('resize', handleWindowResize);
    // unsubscribe from the event on component unmount
    return () => window.removeEventListener('resize', handleWindowResize);
  }, []);

  return [width, height]

}

export default useDeviceSize 
```

**Below is the use case of our hook:**
```js
import React from 'react'
import useDeviceSize from './yourPathToHook'

const ExampleComponent = () => {
    const [width, height] = useDeviceSize()

    return (
        <div>
            width of window: {width}
            height of window: {height}
        </div>
    )
}
```

Go back [home](/).

We will create a react hook called useDeviceSize() to get the window.width and window.height

How to dynamically get window width and height in ReactJS


Assuming that you already have a react app running, we will start by modifiying `App.js`

We will create 2 contexts:
    - To store theme value (ThemeContext)
    - To update theme value (ThemeContextUpdate)

Start
1. We will create a separate file called `ThemeContext.js` for our context

```jsx
import {useState, useContext, createContext} from 'react'

// create a new context to store value
const ThemeContext = createContext()

// create a new context to update value
const ThemeContextUpdate = createContext()

// create a hook to access the value of context
// we will use this hook later in MyComponent.js
export const useTheme = () => {
    return useContext(ThemeContext)
}

export const useThemeUpdate = () => {
    return useContext(ThemeContextUpdate)
}

export const ThemeProvider = ({children}) => {
    const [theme, setTheme] = useState('light')

    const toggleTheme = () => {
        setTheme(prev => prev === 'light' ? 'dark' : 'light')
    }

    return (
        <ThemeContext.Provider value={theme}>
            <ThemeContextUpdate.Provider value={toggleTheme}>
                {children}
            </ThemeContextUpdate.Provider>
        </ThemeContext.Provider>
    )
}
```

2. Inside `App.js` wrap its children with `ThemeProvider`

```jsx
import {ThemeProvider} from './ThemeContext'
import {MyComponent} from './MyComponent'

export const App = () => {

    return (
        <ThemeProvider>
            <MyComponent />
        </ThemeProvider>
    )
}
```

3. Create `MyComponent.js` which will have access to our theme from context

```jsx
import {useTheme, useThemeUpdate} from './ThemeContext'

export const MyComponent = () => {
    const theme = useTheme()
    const toggleTheme = useThemeUpdate()

    return (
        <div>
            <h1>Current theme is: {theme}</h1>
            <button onClick={toggleTheme}>Change theme</button>
        </div>
    )
}
```

## Take a look to the [`demo`](/examples/react-dark-theme)