```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHcjRS5SFTUb6nGErABpGWCNwpfg1%2Fdecoding-react-hooks%2F76954396-b0b4-4f7b-8bcd-02ac154d0704.jpg?alt=media&token=a1b031f2-3f2c-4a7b-8f0e-d387955725fc","id":"76954396-b0b4-4f7b-8bcd-02ac154d0704","width":4800,"height":3200,"filename":"Vintage Background Pattern.jpg","type":"image/jpeg","caption":"","border":false}]}
```

To better understand how hooks work in React, I set out to try and implement a simplified replica. At the heart of it lies one of the most fundamental features of Javascript, **closures**, an introduction to which serves as an appropriate prelude to this article.

### What are closures?

As defined by [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures):

> A **closure** is the combination of a function bundled together (enclosed) with references to its surrounding state (the **lexical environment**).

Best explained with the help of a simple example

```javascript
// A call to makeAdder returns a function that has access to the argument x throughout it's lifespan.
const makeAdder = (x) => (y) => x+y;

const adder1 = makeAdder(1);
const adder2 = makeAdder(2);

console.log(adder1(10)); // 11
console.log(adder2(10)); // 12
```

Closures enable functions to have access to private variables.

### Implementing [useState](https://react.dev/reference/react/useState)

Let's look at the basic interface for `useState`

```javascript
namespace React {
  /**
   * @param initialValue the initial value
   * @returns a stateful value and a function to update it
   */
  export interface useState {
    <T>(initialValue: T): [T, (value: T) => void];
  }
  }
}
```

From the initial introduction to closure, we can deduce that `useState` employs a private variable to maintain our state value and exposes a function to update it.

---

**Tracking a single state value**

```javascript
let stateValue;

const useState: React.useState = <T>(
  initialValue: T
): [T, (currentValue: T) => void] => {
  stateValue = stateValue ?? initialValue;

  return [
    stateValue,
    (newValue: T) => {
      stateValue = newValue;
    },
  ];
};

const Component = () => {
  const [count, setCount] = useState(0);

  return {
    logState() {
      console.log(`Count: ${count}`);
    },
    click() {
      setCount(count + 1);
    },
  };
};

let element = Component();
element.logState(); // Count: 0

element.click(); // Increment count;
element = Component();

element.logState(); // Count: 1
element.logState(); // Count: 1
```

The above is the most basic implementation of `useState` which keeps track of our one state value in a global variable. Ideally, we want all data related to React, including our state variable to be encapsulated within our library to prevent it from any unintended manipulation, which we can achieve using an [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) expression as you will see in the next section.

---

**Tracking multiple state values**

Now what happens if we need to track multiple state values instead of just one? We need to store a collection of state values in an array instead.

```javascript
// Encapsulating all values and methods for React with this IIFE.
const React = (function () {
  let stateValues = [];
  let hooksIndex = 0;

  const useState: React.useState = <T>(
    initialValue: T
  ): [T, (currentValue: T) => void] => {
    // Increment the hooks index everytime.
    const _locallyScopedIndex = hooksIndex++;

    const stateValue = (stateValues[_locallyScopedIndex] as T) ?? initialValue;

    return [
      stateValue,
      (newValue: T) => {
        stateValues[_locallyScopedIndex] = newValue;
      },
    ];
  };

  /**
   * We shift the responsibility of rendering our component to React,
   * so it can reset the hooksIndex to 0 everytime our application is rendered.
   */
  const render = (component) => {
    hooksIndex = 0;
    return component();
  };

  return {
    useState,
    render,
  };
})();

const Component = () => {
  const [count, setCount] = React.useState(0);
  const [name, setName] = React.useState("foo");

  return {
    logState() {
      console.log(`Count: ${count} & Name: ${name}`);
    },
    click() {
      setCount(count + 1);
    },
    type(newName: string) {
      setName(newName);
    },
  };
};

let element = React.render(Component);
element.logState(); // Count: 0 & Name: foo

element.click(); // Increment count;
element = React.render(Component);
element.logState(); // Count: 1 & Name: foo

element.type("bar"); // Change name
element = React.render(Component);
element.logState(); // Count: 1 & Name: bar
```

Some important characteristics of React hooks that become evident from the implementation above:

1. Every invocation of a hook is assigned an address, `hooksIndex` in our case. Hooks must be invoked in the same sequence for each render cycle to ensure they have access to the correct address assigned to them, which enforces the following [Rule of Hooks](https://legacy.reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level):\
   \
   **Don’t call Hooks inside loops, conditions, or nested functions.** Instead, always use Hooks at the top level of your React function, before any early returns.

2. [The `set` function ](https://react.dev/reference/react/useState#setstate-caveats)**[only updates the state variable for the](https://react.dev/reference/react/useState#setstate-caveats) *[next](https://react.dev/reference/react/useState#setstate-caveats)* [render](https://react.dev/reference/react/useState#setstate-caveats)**[. If you read the state variable after calling the `set` function, you will still get the old value that was on the screen before your call.](https://react.dev/reference/react/useState#setstate-caveats)

### Implementing [useEffect](https://react.dev/reference/react/useEffect)

```javascript
namespace React {
  ...

  /**
   * @param cb the callback to run when dependencies change.
   * @param dependencies a list of dependencies that determine if React should run our effect.
   */
  export interface useEffect {
    (cb: () => void, dependencies?: StateValues): void;
  }

  ...
}
```

`useEffect` builds on top of `useState` essentially storing the dependencies as an application state.

```javascript
const React = (function () {
  ...
  const useEffect: React.useEffect = (cb, dependencies) => {
    const oldDependencies = stateValues[hooksIndex] as
      | Array<unknown>
      | undefined;

    if (
      // Run the effect every time if dependencies are undefined
      // or only once, if dependencies is an empty array.
      !oldDependencies ||
      // Check if any of the values in the dependencies array has changed
      (dependencies as Array<unknown>).some(
        (val, index) => !Object.is(val, oldDependencies[index])
      )
    ) {
      cb();
    }

    // Increment hook index and update the dependencies
    stateValues[hooksIndex++] = dependencies;
  };

  ...
})();

const Component: React.FC = () => {
  const [count, setCount] = React.useState(0);
  const [name, setName] = React.useState("foo");

  // Run the effect every time `name` changes.
  React.useEffect(() => {
    console.log(`Name changed to: ${name}`);
  }, [name]);

  return {
    ...
  };
};

let element = React.render(Component);
element.logState();

element.click();
element = React.render(Component);
element.logState();

element.type("bar");
element = React.render(Component);
element.logState();

// Outputs:
// Name changed to: foo
// Count: 0 & Name: foo
// Count: 1 & Name: foo
// Name changed to: bar
// Count: 1 & Name: bar
```

Our effect runs only when the `name` state changes as expected. The implementation above uses [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) to compare elements of the dependencies which is also [true for React](https://react.dev/reference/react/useEffect#parameters).

Also worth noting is one important anomaly in our implementation. We are running our effect as soon as the `useEffect` hook is invoked, while in [React](https://blog.logrocket.com/useeffect-react-hook-complete-guide/#:~:text=This%20may%20sound%20strange%20initially,UI%20because%20they%20run%20asynchronously.),

> ..effects defined with `useEffect` are invoked after render. To be more specific, it runs both after the first render and after every update. In contrast to lifecycle methods, [effects don’t block the UI](https://reactjs.org/docs/hooks-effect.html#detailed-explanation) because they run asynchronously.

---

**Customs hooks**

Interestingly, at this time, we can extract our stateful logic into a custom hook and it should work as expected.

```javascript
const useCustomHook = () => {
  const [count, setCount] = React.useState(0);
  const [name, setName] = React.useState("foo");

  React.useEffect(() => {
    console.log(`Name changed to: ${name}`);
  }, [name]);

  return {
    count,
    setCount,
    name,
    setName,
  };
};
const Component = () => {
  const { count, setCount, name, setName } = useCustomHook();

  return {
    ...
  };
};
...
```

### Exercise for the reader

Try recreating the `useMemo` and `useCallback` hooks. You can check my implementation here,

[Code sandbox for the article](https://codesandbox.io/p/sandbox/prototyping-react-wl72w6?file=%2Fsrc%2Findex.ts%3A10%2C4&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clso6xu6i00063b6lxae0a4yt%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clso6xu6i00023b6lec7fct1u%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clso6xu6i00033b6lu05htalw%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clso6xu6i00053b6lx2xjq8wb%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B100%252C0%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clso6xu6i00023b6lec7fct1u%2522%253A%257B%2522id%2522%253A%2522clso6xu6i00023b6lec7fct1u%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clso7l8o600023b6n5qh3bsop%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A10%252C%2522startColumn%2522%253A4%252C%2522endLineNumber%2522%253A10%252C%2522endColumn%2522%253A4%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.ts%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clso7l8o600023b6n5qh3bsop%2522%257D%252C%2522clso6xu6i00053b6lx2xjq8wb%2522%253A%257B%2522id%2522%253A%2522clso6xu6i00053b6lx2xjq8wb%2522%252C%2522activeTabId%2522%253A%2522clso73oh700h13b6nevyulymc%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522id%2522%253A%2522clso73oh700h13b6nevyulymc%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522clso6xu6i00033b6lu05htalw%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clso6xu6i00033b6lu05htalw%2522%257D%257D%252C%2522showDevtools%2522%253Afalse%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Afalse%252C%2522sidebarPanelSize%2522%253A0%257D)

---

Hope you enjoyed the read.

✌🏾

Decoding React Hooks — Building a Prototype from Scratch

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHcjRS5SFTUb6nGErABpGWCNwpfg1%2FDxl2R2OiZgygrxw8nK26%2Ff7ecd395-0027-4511-8e7c-69e7b7b02646.jpg?alt=media&token=cd5ce37a-0953-4446-b209-c667b7d647f1","id":"f7ecd395-0027-4511-8e7c-69e7b7b02646","width":8000,"height":6000,"filename":"Purple white heart.jpg","type":"image/jpeg","caption":"","border":false}]}
```

Welcome to a journey through the fascinating world of iterators, iterables, and generators in JavaScript! These concepts are usually shrouded in mystery but fear not - by the end of this article, you'll have a clear understanding of how they work and how they can empower you to write more concise and efficient code. So, let's dive in and demystify these essential elements of JavaScript programming.

## What is an iterator?

The definition of an iterator can be summarized using the following interface:

```typescript
interface MyIterationResult<T> {
  value?: T;
  done: boolean;
}

interface MyIterator<T> {
  next(): IterationResult<T>;
}
```

So basically, an iterator is an object with a method `next` that returns the result of the current iteration upon each invocation.

An example iterator:

```typescript
/**
 * @returns {MyIterator<number>} an iterator that iterates from `start` to `end`
 */
function getRangeIterator(start: number, end: number): MyIterator<number> {
  let current = start;
  return {
    next() {
      if (current <= end) {
        return { value: current++, done: false };
      } else return { done: true };
    },
  };
}

const range = getRangeIterator(1, 5);
let { value, done } = range.next();

while (!done) {
  console.log(value); // 1, 2, 3, 4, 5
  ({ value, done } = range.next());
}
```

## What is an iterable?

```typescript
interface MyIterable<T> {
  [Symbol.iterator](): MyIterator<T>;
}
```

Any object that has a method defined for the [system symbol](https://javascript.info/symbol#system-symbols) `Symbol.iterator` that returns an iterator, is considered an iterable.

An example iterable:

```typescript
class MyRange implements MyIterable<number> {
  start: number;
  end: number;

  constructor(start: number, end: number) {
    this.start = start;
    this.end = end;
  }

  [Symbol.iterator]() {
    return getRangeIterator(this.start, this.end);
  }
}
```

You can loop through an iterable using the `for..of` construct:

```typescript
const myRange = new MyRange(1, 5);
for (const value of myRange) {
  console.log(value); // 1, 2, 3, 4, 5
}
```

You can also use the `...` spread syntax with an iterable to convert it to an array of corresponding values:

```typescript
const myRangeArray = [...myRange];
console.log(myRangeArray); // (5) [1, 2, 3, 4, 5]
```

## What are generator functions?

Generator functions are a special type of function that allows you to define an iterative algorithm by writing a single function that can maintain its state. Unlike regular functions that execute and return a single value, generator functions can pause their execution and yield control back to the caller while retaining their context.

```typescript
function* myGenerator() {
    yield 1;
    yield 2;
}
```

In the example above, **`myGenerator`** is a generator function declared using the **`function*`** syntax. Within the function body, **`yield`** is used to pause execution and produce a value. Each time **`yield`** is encountered, the function pauses, allowing the caller to retrieve the yielded value.

```typescript
const gen = myGenerator();
console.log(gen.next().value); // Output: 1
console.log(gen.next().value); // Output: 2

console.log(gen); // Generator {}
```

Generator functions return an object that is an instance of the class `Generator`. Interestingly, **generators are both iterators and iterables**.

```
const genArray = [...gen];
console.log(genArray); // (2) [1, 2]
```

This proves invaluable when constructing an iterable, as it allows us to substitute a generator function for the more verbose iterator.

Here is an example of `MyRange` class from a previous example, re-implemented using generator functions:

```typescript
class MyRange {
  start: number;
  end: number;

  constructor(start: number, end: number) {
    this.start = start;
    this.end = end;
  }

  *[Symbol.iterator]() {
    for (let i = this.start; i <= this.end; i++) {
      yield i;
    }
  }
}

const myRange = new MyRange(1, 5);
for (const value of myRange) {
  console.log(value); // 1, 2, 3, 4, 5
}
```

Generators are particularly useful for dealing with asynchronous code, iteration over large datasets, and implementing custom iteration behaviors. They offer a powerful mechanism for writing clean, readable, and efficient code by enabling lazy evaluation and on-demand generation of values.

---

In closing, I hope this article provides a concise overview of iterables and generators, equipping you with the knowledge to leverage these powerful features effectively in your projects.

### References

* https://javascript.info/generators

* [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\\\_Objects/Generator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global%5C_Objects/Generator)

* [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\\\_Objects/Iterator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global%5C_Objects/Iterator)

Iterate with Ease — Understanding Iterators, Iterables, and Generators in JavaScript

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHcjRS5SFTUb6nGErABpGWCNwpfg1%2FrJa3tVWXelIvcCCsDUWJ%2Fe7002cf3-4307-4538-afc0-08b9df4f2641.jpg?alt=media&token=ecd57348-a0c3-4b95-bfee-80dd31d92543","id":"e7002cf3-4307-4538-afc0-08b9df4f2641","width":4096,"height":2731,"filename":"Sun in the sky photo.jpg","type":"image/jpeg","caption":"","border":false}]}
```

In the realm of JavaScript programming, distinguishing between [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) and [regular functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions#function_declarations) is crucial for making informed coding decisions and steering clear of potential pitfalls. This article serves as a concise overview, elucidating the key disparities between these two constructs.

### Arrow functions do not have their own bindings to `this`

When we call a regular function, the execution context has access to the `this` binding, which serves as a reference to the context in which the function is executed/called. That is not the case, however, when executing an arrow function. If we refer to `this` within the body of an arrow function, the interpreter simply looks for the binding in its containing lexical scope.

```javascript
const family = {
  name: "foo",
  members: ["a", "b"],

  printAll() {
    this.members.forEach(
      member => console.log(`${member} ${this.name}`)
    )
  }
}

family.printAll();
// a foo
// b foo
```

In the example above, the arrow function within `forEach` didn't have its own binding for `this`, and was able to reference the `this` within the execution context of `printAll`.  Let's look at the same example implemented using a regular function:

```javascript
const family = {
  name: "foo",
  members: ["a", "b"],

  printAll() {
    this.members.forEach(
      function(member) {
          console.log(`${member} ${this.name}`)
      }
    )
  }
}

family.printAll();
// a
// b
```

The function within `forEach` has its own binding for `this` which resolves to the `window` object. We can fix it by explicitly binding the context to the function.

```javascript
const family = {
  name: "foo",
  members: ["a", "b"],

  printAll() {
    const ctx = this;
    this.members.forEach(
      function(member) {
          console.log(this);
      }.bind(ctx)
    )
  }
}
```

`bind` has no effect on an arrow function.

```javascript
(() => console.log(this)).bind(1)();
// logs the window object.
```

### Arrow functions do not have their own binding to `arguments`

Quite similarly, arrow functions do not have their own bindings to `arguments` in their execution context, as opposed to regular functions.

```javascript
function arg(a) {
    console.log(arguments);
};

arg(1); // Arguments [1, ...]
```

\
This can come in handy when we want to run our function at a later time but want it to retain the execution context.

```javascript
// Returns a function that runs f after the specified duration.
const defer = (f, duration) => function() {
    setTimeout(() => f.apply(this, arguments), duration);
};

const deferredLog = deferred(function(x){
    console.log(x);
}, 1000);

deferredLog(5);
// 5 (after 1 second);
```

### Arrow functions cannot be used as constructors

Since arrow functions do not have their own bindings for `this`, they cannot be used as constructors using the `new` keyword. Here is an example of how we can use we can use a regular function as constructors:

```javascript
function Person(name, age){
    this.name = name;
    this.age = age;
}

const foo = new Person("foo", 12);
```

Using `new` with an arrow function will cause a syntax error.

```javascript
const Person = (name) => {
    this.name = name;
}

const foo = new Person("foo");
// Uncaught TypeError: personArrow is not a constructor
```

### Arrow functions are not hoisted

Unlike regular functions, arrow functions are not hoisted during the [creation phase of the execution context](https://www.freecodecamp.org/news/how-javascript-works-behind-the-scene-javascript-execution-context/) and hence, cannot be invoked before their definition.

```javascript
hoisted();
hoistedArrow();

function hoisted(){
    console.log("All is fine.")
}
const hoistedArrow = () => {};

// All is fine.
// Uncaught ReferenceError: hoistedArrow is not defined
```

---

In conclusion, understanding the differences between regular functions and arrow functions empowers JavaScript developers to choose the right tool for the job. While both serve similar purposes, their nuances in syntax and behavior can significantly impact code clarity and functionality.

### Resources

1. https://javascript.info/arrow-functions

2. https://www.freecodecamp.org/news/regular-vs-arrow-functions-javascript

3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow\_functions

4. https://www.freecodecamp.org/news/how-javascript-works-behind-the-scene-javascript-execution-context/

Arrow Functions vs Regular Functions

UX Engineer

Near Certified Developer

Recently, I've been exploring React JS hooks, HTML5 Canvas, and Figma for UI design. To apply these skills comprehensively, I developed a [progressive ping-pong game](https://eccentricdz.github.io/ping-pong-react/). Players face an AI bot that improves with each level, and the game tracks the top score across sessions.

AI Pong

Recently delving into React JS, I aimed to apply my newfound knowledge by creating a music application. This platform enables users to seamlessly search, play, and download their favorite tunes.

Sound Stash

A news aggregator app that presents all that's going on in the Crypto & Web 3 landscape in a sleek interface, letting you pick and choose your sources and re-arrange them based on your preferences. No ads, no bloat, just content in an intuitive interface.

Coin Feed

Facing a time constraint, I revamped my previous portfolio, crafted during my college graduation. The goal was to create a representation more aligned with my current body of work, accomplished within a single day.

Portfolio 2020

Bento Buzz uses AI to go through 1000 news stories every day, giving them a score from 0 to 10 based on how important they are. Only stories with a score higher than 7 make the cut. It considers factors like the number of people affected, the impact size, uniqueness, recency, reader actionability, positive aspects, and source reliability. This helps Bento Buzz pick out the most interesting and important stories for its readers.

Bento Buzz

Presenting a thoughtfully compiled collection of my most cherished logo design projects from the past few years.

Logofolio 2021—2023

Explore a curated selection of logos I crafted between 2019 and 2020.

Logofolio 2019—2020

Alpha and Omega Holdings is a trading company based out of Belize with offices in Honduras, Guatemala, and El Salvador. The company deals in commodities such as gold, silver, coffee, cocoa, sea-food, and tobacco.\
\
I was commissioned to design the brand’s identity system and personality from the ground up.

Alpha & Omega – Identity Design

UI Animations using Lottie

Jeevan is an NGO based out of Jamshedpur, India. It aims to reduce the stigma around, spread awareness about, and change the way we look at mental health. This is a platform where you can seek help for yourself or a loved one, find comprehensive knowledge, connect with professionals, and find comfort in knowing that you are not alone.\
\
I have been working with this NGO to design visuals for their social media outreach and related events.

Visual Designer

* Led cross-border collaboration with Jordan-based teams to ensure seamless adaptation of legacy UI components, achieving crucial Right-to-Left (RTL) compliance. This initiative played a pivotal role in [Amazon's successful launch in UAE](https://www.aboutamazon.eu/news/press-lounge/souq-becomes-amazon-ae-in-the-uae), Saudi Arabia, and Egypt, demonstrating adaptability and global teamwork skills.

* Played a key role in developing an internal templating language and its language server extension, widely adopted by Amazon developers for crafting secure AUI-compatible HTML, ensuring uniform coding standards.

* Owned the visual design and development of crucial internal tools, including a component metrics dashboard, library documentation site, and a live debug platform for Amazon Retail. These tools streamlined operations and troubleshooting efforts.

Software Development Engineer II

* Contributed significantly as part of the initial team to launch [Prime Wardrobe](https://www.amazon.com/learn-more-prime-wardrobe/b?node=16122413011), Amazon’s innovative service allowing customers to try on apparel before purchase, enhancing customer engagement and satisfaction.

* Received the prestigious Think Big award for conceptualizing [Amazon Spark](https://www.theverge.com/2019/6/15/18680165/amazon-spark-discovery-social-network-shutdown), a social platform enabling influencers to curate and share product collections.

Software Development Engineer

* Directed the architecture and development of Amazon's next-generation UI library, deployed globally in Amazon Retail. Enhanced user experience by enabling dynamic theming of components based on product lines, devices, and user preferences.

* Successfully migrated the Service Worker platform to AWS Cloud, ensuring uninterrupted service across all Amazon pages. Notably improved service cost and latency, enhancing overall performance.

I was the [product designer](https://www.behance.net/gallery/9737087/Pee-Safe-Product-Design) at [Peesafe](https://www.peesafe.com/), a global provider of personal hygiene products. Their presence spans across Bhutan, Nepal, USA, UAE, Uganda, Africa, Qatar, Bangladesh, Sri Lanka, Europe, and the United Kingdom.

Design Intern

* Orchestrated the creation of Facility Hub, a globally utilized platform integrating modules and tools for seamless cloud kitchen operations, currently deployed in 957 facilities worldwide.

* Led the design and development of the Automated Robotics Conveyance platform, revolutionizing order processing through the deployment of [Bear](https://www.bearrobotics.ai/) robots, optimizing facility operations, and enhancing overall efficiency.

* Engineered a robust end-to-end task management system empowering facility staff to record tasks and enabling managers to create, assign, and monitor progress. Implemented user attribution and performance feedback mechanisms, contributing to enhanced operational efficiency and data-driven decision-making.

Rahul Agarwal

2024