Recently I interviewed for a **Software Engineer** position at Postman. For those who are not aware, [Postman](https://www.postman.com/) is an API platform. Everything and Anything that you think has something to do with an API, has something to do with Postman.

The interview had 5 rounds, 4 technical and 1 hiring manager round.

### How I applied

So I actually did not apply myself for this role. The recruiter got my resume from [Instahyre](https://www.instahyre.com/). I do not know how, but I was actively using Instahyre to apply to companies, and had updated my profile also with the latest details and resume.

### 1st Round: Discussion with Hiring Manager

General discussion on things related to my past work like challenges I faced, how I solved them, and other similar things.
A normal discussion rather than a interview, I'd say.

### 2nd Round: (Skipped)

Was unable to give dates for this round in the same week, so HR moved me to next round directly, skipping this round.

### 3rd Round: Coding Round

Was given a question to create a Folder structure similar to VS Code's folder layout. Free to choose any framework/ Vanilla JS.

Functionalities required:
- Folder can have multiple files as well as folders
- Folder can be collapsed and expanded on click
- When folder is expanded, the items inside it should be nested inside it.

After this was done, a lot of follow up questions on the same were asked like:

- How to optimise the state of component
- Why functional components over class components (I had used functional components that's why)
- Event delegation
- Event Propagation
- How to optimise CSS animations
- How to optimise the API response returned from backend

### 4th Round: Technical Knowledge Round

This was again a discussion round, but a technical discussion.

Questions were on topics like Javascript, Typescript, CSS, React and stuff.

Some that I can recall are:
- Why is React better
- Why is Typescript better
- How state gets updated in React
- How objects work in JS
- How PureComponent works in React

### 5th Round: Problem Solving Round

Was given a question, which I can vaguely remember, and asked explain the logic, and write pseudocode for that.

There is a mall, which has `n` lifts. Each lift is connected to a black box sort of thing. This black box takes two inputs, the `dest floor no` where you want to go, and the `current floor no` that you're currently on. And it returns you the lift no which is optimal for you to go to your desired floor.

I felt that the interviewer was more interested in my approach, rather than the solution. 


### The Result

After 3 days, I got a call from HR that I am selected 🎉 

Overall, it was a great interview experience. I learnt some new things also, during the process. Postman is a remote first company, so all the rounds were conducted over Zoom. The recruiter was also very supportive the entire process. 


If you have any queries, feel free to reach out to me on [Twitter](https://twitter.com/tapanchudasama7) or [Linkedin](https://www.linkedin.com/in/tapanchudasama/).

Thanks for reading, Cheers!



My interview experience at Postman

### Introduction

Promises in Javascript are used to denote an eventual completion or failure of an asynchronous task. This task can be either fetching data from API or reading the contents of a file from the file system.

The spec for Promises (https://promisesaplus.com/) defines Promises as such:

> A promise represents the eventual result of an asynchronous operation.

Okay, now that we have all the definitions out of the way, let's get into the meat of the matter and write some code.

Let us first verify how we use actual promises.

```
const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(/* some data here */);
    })
});


promise
    .then((res) => doSomething(res));
    .catch((err) => alert(err));

```

So we create a promise using `new` keyword, pass a function as a parameter which in turn takes two arguments which are also functions out of which one gets run on successful completion of task and other on failure of task.

Okay, now that we have an brief idea of how Promises are created and used, let's write some code.

### Promise class

```
class MyPromise {
  constructor(callback) {
    if (typeof callback === "function") {
      callback(this._onFulfilled, this._onRejected);
    }
  }

  _onFulfilled = (value) => {};

  _onRejected = (reason) => {};

}
```

Here `_onFulfilled` and `_onRejected` are internal functions which map to `resolve` and `reject` functions.

📌 A thing to keep in mind here which the spec says is this:

> This requirement ensures that onFulfilled and onRejected execute asynchronously, after the event loop turn in which `then` is called, and with a fresh stack.

In simple terms, this means to say that the `resolve` or `reject` function which we pass as arguments to callback function should be put on call stack only when the call stack is empty. How do we do this? Using a `setTimeout` with function that runs with 0 delay.

```
class MyPromise {
  constructor(callback) {
    if (typeof callback === "function") {
      // This ensures that _onFulfilled and _onRejected
     // execute asynchronously, with a fresh stack.
      setTimeout(() => {
        try {
          callback(this._onFulfilled, this._onRejected);
        } catch (err) {
          console.log("callback is not a function", err);
        }
      }, 0);
    }
  }
}
```

### State and Value

The promises spec mentions that a promise must have a state and a value according to that particular state.

A promise can be in any of the three states:

1.  Pending (initial state)

    - By default, the promise in in pending state

2.  Fulfilled (denotes successful completion of the task)

    - a promise in fulfilled state must have a `value`
    - after fulfilled, a promise must not change to any other state

3.  Rejected (denotes failure of the task)
    - a promise in rejected state must have a `reason` (which we'll refer to as value only for simplicity)
    - after fulfilled, a promise must not change to any other state

The `resolve` and `reject` function of promise modify the state of promise and assign it a value (or a reason) which you pass as a argument to it.

```
const states = {
  pending: "PENDING",
  rejected: "REJECTED",
  fulfilled: "FULFILLED",
};

class MyPromise {
  constructor(callback) {
    this._state = states.pending;

    this._value = undefined;

    if (typeof callback === "function") {
      setTimeout(() => {
        try {
          callback(this._onFulfilled, this._onRejected);
        } catch (err) {
          console.log("callback is not a function", err);
        }
      }, 0);
    }
  }

  _onFulfilled = (value) => {
    if(this._state === states.pending) {
      this._state = states.fulfilled;
      this._value = value;
    }
  };

  _onRejected = (reason) => {
    if(this._state === states.pending) {
      this._state = states.rejected;
      this._value = value;
    }
  };

}
```

### Core functions of Promise

As per promise spec, any JS object/ function which has a method named `then` can be called a promise.

> “promise” is an object or function with a then method.

Apart from `then`, a promise also has a `catch` and a `finally` method. (We'll skip finally here just to keep things a bit simple).

`then` function takes two optional arguments. One is a function that gets run on successful completion of task. And other on failure of task.

You might have seen such code many times if you are a frontend developer.

```
fetchSomeData.then((res) => console.log(res));
```

What you might not know is that it also takes a second function, which gets run on failure. (I also did not know 😛).

```
then(onFulfilled, onRejected) {
  if (this._state === states.fulfilled) {
    onFulfilled(this._value);
  }
  else if(this._state === states.rejected) {
    onRejected(this._value);
  }
}

catch(onRejected) {
  return this.then(undefined, onRejected);
}
```

Notice the _catch_ above 😛 ? The `catch` is just `then` with first argument as `undefined`.

Okay, Cool. So if you stayed till here, congratulations ✨ ! You have written a working version of promise. (Working because we still have not implemented a major functionality i.e Promise chaining).

### Promise Chaining

The most wonderful feature of Promises is that they can be chained. What do I mean by that? Check this out.

```
fetchSomeData()
  .then((res) => res.json()) // res.json() returns a promise
  .then((json) => console.log(json)) // we get the result of res.json() here
  .then((abc) => console.log(abc)) // this would print undefined
  .then                                             // this too
  .then                                             // this too
  ...
```

Not only `.then`, but you can do same with `.catch` also. Just that it is not a standard way to chain `.catch`. Usually you `throw` an Error in `.catch`.

So how do you implement this?

Let us note a few key things here:

- `.then` should return a Promise.
- The result of each `.then` is propagated to all the next `.then` calls.
- Calling the same `.then` multiple times would not change the value for that particular `.then`.

  i.e These two `.then` would not have any effect on each other.

  ```
  const promisePlusOne = promise.then(x => x + 1);
  const promiseMinusOne = promise.then(x => x - 1);
  ```

All these things point to a fact that we need return a promise whenever `then` is called and also keep track of the values that are returned from `.then` and propagate to all the future calls of `then`.

We would need a array for this.
Also, we would need to modify our then function to return a promise, and also propagate the modified value to future `then` calls.

```
class MyPromise {
  constructor(callback) {

    this._thenQueue = [];
  }

  then(onFulfilled, onRejected) {
    const newPromise = new MyPromise();
// we push a new promise, its onFulfilled and onRejected functions
// in array so that  we can propagate the modified value in this call to all the
// successive calls
    this._thenQueue.push([newPromise, fulfilledFn, catchFn]);

    if (this._state === states.fulfilled) {
// instead of calling the onFulfilled function here
// we'll call it on each item in thenQueue.
      this._propagateFulfilled();
    }
    if (this._state === states.rejected) {
// Same as then but we propagate the reason for failure
      this._propagateRejected();
    }

// because it should return a promise
    return newPromise;
  }
}
```

Now let's move to the propagate function which gives the modified value to all promises in thenQueue. 

### Promise Resolution Procedure

Before writing code for that, understand this flow which spec refers as _Promise Resolution Procedure_.

- if `then` has a function (onFulfilled) which returns

  - a promise
    - wait for that to resolve
  - a value
    - resolve the manually created promise with it

- if `then` does not have any arguments
  - resolve the manually created promise with the current value of the promise

- if `catch` has a function (onRejected) which returns

  - a promise
    - wait for that to resolve
  - a value (a reason per se)
    - resolve the manually created promise with it (yes resolve because we'll recover from errors that onRejected will throw here)

- if `catch` does not have any arguments
  - reject the manually created promise with the current value of the promise


If you remember, we talked above that as per spec, any object or a function with a `then` function can be called a promise. We'll use this fact to check if `onFulfilled` function of `then` returns a value or promise.

```
const isThenable = (x) => x && typeof x.then === "function";

_propagateFulfilled() {
// we destructure our manually created promise and onFulfilled function
// from thenQueue
    this._thenQueue.forEach(([newPromise, onFulfilled]) => {
      if (typeof onFulfilled === "function") {

        const valueOrPromise = onFulfilled(this._value);

        if (isThenable(valueOrPromise)) {
// now we need to wait for this promise to resolve i.e call
// its then method with our _onFulfilled (resolve)
// and _onRejected (reject) functions
          valueOrPromise.then(
            (value) => newPromise._onFulfilled(value),
            (reason) => newPromise._onRejected(reason)
          );
        } else {
// its a normal value, resolve our manually 
// created promise with the value
          newPromise._onFulfilled(valueOrPromise);
        }
      } else {
// no function is passed, use the current value of promise 
// to resolve out manually created promise
        return newPromise._onFulfilled(this._value);
      }
    });

    this._thenQueue = [];
}

```

Damn, that was a lot to bear! 😪


That's it. We have now implemented promise chaining in our code.

If you are wondering about `catch`, then don't. `catch` is similar to `then` with few tweaks.

Have a look at the entire code below:

```
const states = {
  pending: "PENDING",
  rejected: "REJECTED",
  fullfilled: "FULFILLED",
};

const isThenable = (check) => check && typeof check.then === "function";

class MyPromise {
  constructor(callback) {
    this._state = states.pending;

    this._value = undefined;

    this._thenQueue = [];

    if (typeof callback === "function") {

      setTimeout(() => {
        try {
          callback(this._onFulfilled, this._onRejected);
        } catch (err) {
          console.log("callback is not a function", err);
        }
      });
    }
  }

  then(onFulfilled, onRejected) {
    const newPromise = new MyPromise();
    this._thenQueue.push([newPromise, onFulfilled, onRejected]);

    if (this._state === states.fullfilled) {
      this._propagateFulfilled();
    }
    if (this._state === states.rejected) {
      this._propagateRejected();
    }

    return newPromise;
  }

  catch(onRejected) {
    return this.then(undefined, onRejected);
  }

  _onFulfilled = (value) => {
    if (this._state === states.pending) {
      this._state = states.fullfilled;
      this._value = value;
      this._propagateFulfilled();
    }
  };

  _onRejected = (reason) => {
    if (this._state === states.pending) {
      this._state = states.rejected;
      this._value = reason;
      this._propagateRejected();
    }
  };

  _propagateFulfilled() {
    this._thenQueue.forEach(([newPromise, onFulfilled]) => {
      if (typeof onFulfilled === "function") {
        const valueOrPromise = onFulfilled(this._value);

        if (isThenable(valueOrPromise)) {
          valueOrPromise.then(
            (value) => newPromise._onFulfilled(value),
            (reason) => newPromise._onRejected(reason)
          );
        } else {
          newPromise._onFulfilled(valueOrPromise);
        }
      } else {
        return newPromise._onFulfilled(this._value);
      }
    });

    this._thenQueue = [];
  }

  _propagateRejected() {
    this._thenQueue.forEach(([newPromise, _, onRejected]) => {
      if (typeof onRejected === "function") {
        const valueOrPromise = onRejected(this._value);

        if (isThenable(valueOrPromise)) {
          valueOrPromise.then(
            (value) => newPromise._onFulfilled(value),
            (reason) => newPromise._onRejected(reason)
          );
        } else {
          newPromise._onFulfilled(valueOrPromise);
        }
      } else {
        return newPromise._onRejected(this._value);
      }
    });
    this._thenQueue = [];
  }
}
```

If you found this blog post helpful, post some reaction on it so I can know. If you still have some questions, please reach out to me. I'll try my level best to answer them. Maybe I'll learn a thing or two also.

Cheers! 🥂

References:
- [Promises/A+ spec](https://promisesaplus.com/)
- [Youtube Video on Promises from scratch]([https://www.youtube.com/watch?v=4GpwM8FmVgQ)


Write your own: JS Promises

As the title suggests, javascript is not so simple. Although, learning it is quite simple, understanding the fundamentals... not so much.

So in this series of posts, this being the first one, I'll be covering the core concepts that one must understand to know how javascript works under the hood.

### Synchronous and Asynchronous
**Synchronous**: 

Each statement is executed in sequence. So if there are 10 lines of code, each line will wait for the previous one to finish.

```
function doSomething() {
  console.log('First');
  axios.get('https://foo.com');
  console.log('Second');
  console.log('Third');
}
```
In the above example, the execution of program will get blocked after first line. The second `console.log` will have to wait for the API call to finish.

**Asynchronous**:

Opposite of Synchronous. The execution of the program is taken outside the box allowing the statements to not wait and get called immediately.

```
function doSomething() {
  console.log('First');
  axios.get('https://foo.com', function (err, data) {
    console.log('Second');
  })
  console.log('Third');
}
```

In the example above, the output will be: “First”, “Third”, “Second”. In this case, the program execution does not wait after first `console.log`.

### Single Threaded vs Multi Threaded


> 
A thread is just a small process which has it own call stack, its own program counter, its own set of registers and stuff.

**Single Threaded**

Single Threaded means it has one call stack, one memory heap, one program counter and one sequence of instructions that can be executed at a possible time. 

Take for example, a web server which runs a single threaded application that handles user requests. Here other users have to wait for the server to finish executing the request of the user 1.

**Multi Threaded**

Multi Threaded means each thread has its own program counter, its own call stack and its own memory heap but they all share the common code, data and other certain things such as file system.

Today, almost all operating systems are multi-threaded. For example in a word processor, a background thread may check spelling and grammar while a foreground thread processes user input, while yet a third thread loads images from the hard drive, and a fourth does periodic automatic backups of the file being edited.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1606979490994/qWTlYuTic.png)

Javascript: A single-threaded, non-blocking, synchronous, concurrent language (Part 1)

One of the most asked questions during the interviews of freshers is this: "*Explain to me what happens when you search something*". So today, let's dive into it and crack it once and for all.

**Overview of things**
 - Typing URL and hitting Enter
 - Check HSTS list
 - DNS Lookup
 - TCP Handshake
 - TLS Handshake

### Typing URL and hitting enter
As soon as you hit enter after typing "www.facebook.com", the browser first parses the URL. Now it has following information with itself,

 1. Protocol http: Use HTTP (Hyper Text Transfer Protocol)
 2. Resource '/':  Fetch the main page. If you had entered "www.facebook.com/profile.php/id=123xde", the browser would fetch the page with id=123xde accordingly.



Thing to note here is that by default, browser sends a HTTP request and not a HTTPS request because it is not the browser's responsibility to ensure that the website is secure. It relies on the website to make the necessary redirection and support HTTPS.

### Check HSTS list

Every browser comes preloaded with the HSTS (HTTP Strict Transport Security) list. If a website is persent in this list, the browser will send a HTTPS request for that website. Accordingly, for every search, the browser searches this list and if it is present, it will send a HTTPS request.

If in case, a new website pops up and it is not included in the HSTS list, the first response recieved from its server will have a HSTS header which will instruct the browser to add this site in the HSTS list.

Example of HSTS header:


```Strict-Transport-Security: max-age=31536000; includeSubDomains```

### DNS Lookup

Now the browser tries to get the I.P address of the URL entered by the user. For this first it looks into the cache memory of itself. The process goes on in following order:

 1. Browser Cache
 2. OS Cache
 3. Router Cache
 4. ISP Cache
 5. DNS Recursive


After looking into all these, if I.P address is still not found, it starts the DNS recursive search which is the meat of the topic.


Before proceeding further, it is important to understand the different parts of the URL and what they represent.


![url.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1604255919872/MxcZa7vPg.png)

![dns-lookup.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1604255884807/4_Pt8-tg2.png)


DNS Lookup is done in many steps.

 1. **Root Name Server**: Root Name Server tells the resolver that the site you are looking for is of ``.com`` domain by looking at the extension of URL and provides the resolver I.P address of the TLD Name Server that has all the ``.com`` domain sites.
 2. **TLD Name Server**: Now resolver goes to the Top Level Domain (TLD) name server using the I.P address provided by the Root Name Server. This name server then gives the I.P address of the Authoritative Name Server.
 3. **Authoritative Name Server**: The Authoritative Name Server finally gives the I.P address of "www.facebook.com" to the resolver.


### TCP Handshake

After the browser receives the I.P address of the website, it takes that and the default port number (80 incase if HTTP and 443 incase of HTTPS) and makes a call to the function named socket in system and requests a TCP socket stream.

After socket has been opened, client initiates the TCP handshake.

 - Client chooses a sequence number for packet and sends the packet to server with SYN bit set to 1.
 - Server receives the SYN and responds to client with the SYN-ACK bits set to 1. (ACK to denote that it has received the packet and SYN to denote what sequence number it is likely to start the segments with).
 - Client acknowledges the response of server and now data transfer can start.


![tcp-handshake.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1604255974540/gQSDYhG_0.png)

### TLS Handshake
After TCP handshake, TLS handshake starts.

 1. The client system then sends a ```ClientHello``` message to the server with its TLS version, list of cipher algorithms and compression methods available.
 2. Server replies with the ```ServerHello``` message with the selected cipher algorithm, selected compression method and its own public certificate signed by the CA. This certificate has the public key that will be used to encrypt the messages until a symmetric key is decided.
 3. The client verifies the certificate of server with its list of trusted CAs and now both the client and server agree on a symmetric key.
 4. After symmetric key has been decided, the client sends a ```Finished``` message encrypted with the decided symmetric key.
 5. Now data transfer can occur between both using the symmetric key.



So far, I have gone through all the major things that happen, although there are many minute details that you can get to know from [this](https://github.com/alex/what-happens-when) GitHub repo by Alex. *Thanks to Alex!*


*P.S This post will be regularly updated as I dive deeper and deeper into the topic.*

What happens when you search for something in your browser

Databases are used by almost all the applications that we create. If you want your application to store data at some point, then database is a must. But then the question arises which database to use, **SQL or NoSQL**?

## What are SQL databases?

**SQL** databases are traditional databases that everyone has a picture of in their minds. It has rows and columns. Generally, each row represents an entity and each column of the row represents some attribute of the entity.
*For example:*
Consider this table1.

| Employee_ID | Employee_Name | Age |
|-----|-----------|---:|
| 001 | John Doe  | 37 |
| 002 | Jason Fox | 29 |
| 003 | Mary Jane | 21 |

Here, *Employee_Name*,*Age* and Employee_ID are attributes of each Employee.


Let us consider a second example. Consider this table2.

| Employee_ID | Position | Salary |
|-----|-----------|-------|
| 001 | Tech Lead | 700000|
| 002 | SDE 1     | 30000 |
| 003 | Intern    | 4000  |

Now, let's say you want to get all the names of people who are at the position of Tech Lead. Note that the second table does not have the names of the Employees, but only *Position*. So you'll have to perform **JOIN** between two tables. Both the tables have one column in common: *Employee ID*. 
So the query you need is-

> SELECT t1.Employee_Name, t2.Position,
>
> FROM table1 t1
>
> INNER JOIN  table2 t2
>
> ON t1.Employee_ID=t2.Employee_ID
>
> WHERE Position="Tech Lead"

There result of this query will be:

| Employee_ID | Employee Name | Position |
|-------------|---------------|----------|
| 001         |   John Doe    | Tech Lead|

Thing to note here is that *Employee_ID* attribute ***links*** both the tables together and establishes a relation between them. So SQL databases are also called RDBMS (Relational Database Management Systems).

## What are NoSQL databases?
**NoSQL** databases are different from SQL databases in a way that they don't store data in a traditional row and column format. But in a key-value format or document-oriented format or graph-based format.

*For example:*
MongoDB, an example of a NoSQL database, stores data in the form of documents in the database. 

But before creating a database, MongoDB creates a cluster and within this cluster, it creates multiple databases. Within each database, you have multiple documents (*collection*) and in each document, lies your data.
> Cluster (has) -> Databases (have) -> Collection of Documents (have) ->  Data.

Each document has some data that is stored in the form of JSON.
An example of JSON would be

```json
{
    "name":"Jhon Doe",
    "Position":"Tech Lead",
    "Age": 37,
    "Salary":"700000",
}
```

So each person in the document is a JavaScript Object. So the entire table1 if stored in MongoDB would look like this.

```json
{
    "Jhon Doe": {
        "Position": "Tech Lead",
        "Age": 37,
        "Salary": 700000
    },
    "Jason Fox": {
        "Position": "SDE 1",
        "Age": 29,
        "Salary": 30000
    },
    "Mary Jane": {
        "Position": "Intern",
        "Age": 21,
        "Salary": 4000
    }
}
```
Each employee is a JSON object and each object has some fields associated with it.
Now, if you want to query some data in the document, the query would go like:

> db.employeedata.find( { "position" : "Tech Lead" } )

Here *employeedata* is the name of the collection where our data is stored.
This query is equivalent to the SQL query above.


The thing to note here is that as data is stored in JSON format, adding a value becomes easy. *For example,*
If you want to add attribute *End Date* of internship for Mary Jane, so the table becomes:

```json
"Mary Jane": {
    "Position": "Intern",
    "Age": 21,
    "Salary": 4000,
    "End Date":12-07-2020
}
```
The same goes for deletion. If you delete the *Salary* field from Mary Jane, the entire database does not get affected. But in case of SQL, if you want to delete *Salary* of an entity, you have to delete *Salary* for all the entities.

## Differences between SQL and NoSQL

| No. | SQL | NoSQL  |
|---|-----|--------|
| **1**  | Fixed Schema (Row and Columns) | Flexible Schema (JSON) |
| **2**  | Useful to make Complex Queries (JOINS)| Complex queries are not possible |
| **3**  | Follow ACID properties | ACID properties not guaranteed |
| **4**  | Vertically Scalable (By increasing CPU/RAM) | Horizontally Scalable (By adding more servers to pool) |
| **5**  | MySQL, MS-SQL, Oracle, PostgreSQL | MongoDB, Cassandra, Redis |

## Conclusion

- If you want to develop an application that will be storing sensitive
    data or any other application where you think that data should be
    consistent throughout the database (ACID properties), you should go for **SQL** database.
    That is why databases used by banking applications, Air Ticket booking websites, and other online booking sites always use SQL.
- If you are developing an application where security is not an issue, or you expect that user is not going to perform complex queries such as JOINS, or maybe just you want to have a flexible schema for database, go for **NoSQL** database. That is why database used by EA Sports for storing the user preferences and user data, is NoSQL.


SQL or NoSQL?

URL Shorteners are very useful if you want to remember a large URL of some websites. They trim down the huge URLs into really small URLs which are easier to remember and share. Here will be creating one using React and Node.

## How does it work?

1.  You enter your long lengthy URL in the input field and the slug that you want to have in your trimmed URL on the website and hit submit.
2.  As soon as you hit submit, the backend logic fires a POST request which makes an entry in the database of the URL. Also, at the same time, if you have not entered a custom slug for your URL, it generates a random id consisting of 6 digits. This id is mapped with the long URL and stored in the database. Otherwise, a database query first checks that the slug you entered is not present in the database. (Necessary because the slug needs to be unique) If it is present, it notifies you to enter a new slug.
3. After this step, the URL along with the slug or the random ID is stored in the database.

The following Code shows the backend logic which handles the requests coming from the frontend.

```jsx
// This route finds all the shortURLs that have been created till now and displays them in a tabular form
app.get("/api", (req, res) => {
	ShortURLs.find(function(err,urls){
		if(err){
			console.log(err);
		}
		else{
			console.log(urls);
			res.json(urls);
		}
	});
});
app.post("/api/shortURLs", function (req, res) {
  let slug = req.body.slug;
  if (slug === '') { // If slug is not entered, generate random ID
	  console.log(slug);
    slug = shortID.generate();
  }
  ShortURLs.find({ short: req.body.slug }, (err, docs) => {
    if (docs.length > 0) {
      res.sendStatus(500);// If slug is already present, notify user to enter new slug
    } else {
      ShortURLs.create({ full: req.body.fullURL, short: slug })
        .then(() => console.log("Short URL created!"))
        .catch((err) => console.log(err));
      res.redirect("/");
    }
  });
});
// This route finds a specific url associated with a particular id (:shortUrl)
// and the redirects to the long url associated with it
app.get("/api/:shortUrl", async (req, res) => {
	const shortUrl = await ShortURLs.findOne({ short: req.params.shortUrl });
	if (shortUrl == null) return res.sendStatus(404);
	shortUrl.clicks++;
	shortUrl.save();
	res.redirect(shortUrl.full);
});

```

## Why use Mongo, Node and React
-   Node.js along with its Express framework helps in creating routes quickly without worrying. Also, Node.js provides a lot of packages which help to create the application fast by focusing on the meat of the application and leave the unimportant things.
-   MongoDB as the database is super easy to use and deploy. Also since we do not need to do complex queries, there is no harm in using NoSQL database.
-   Finally using React helps us to greatly reduce the loading time as it only re-renders the components whose state changes.

## Further tasks

Ideally, URL Shorteners are huge systems and are a good question in System design interviews. So what all things can we do to improve our current system:

-   Use Redis /other caching database. Accessing the main database for each **GET** request is not efficient. So we can use some caching algorithms such as LRU or FIFO and based on that we can put data in Redis which is a caching database. So before accessing the main database, the system queries the cache database. If the data is not found in the cache, then only the main database is queried.
-   As it is possible a lot many people can access that site and make **GET** requests. So in such a case, we may need to implement a load balancer too.
-   Also, we can have the user create an account and display only those short URLs that he has created. This would enforce security. An implementation for this would be to give each user that visits the site a UUID. And store this UUID in his local storage. Then we can map all the URLs created by a particular UUID in the database and display only those URLs. 

Feel free to contribute to this project if you want to. 

Link to the project: https://github.com/inflame07/url-shrinker