Forem: Tapajyoti Bose

Sell yourself as a developer - creating a personal brand 🚀💼✨

Tapajyoti Bose — Sun, 25 May 2025 14:42:51 +0000

The world of tech has always been extremely fast-paced, especially after the advent of AI-based tools. Now, simply being incredible at programming is no longer sufficient — to get customers for a product you have built or simply get approached for jobs, standing out as a developer is crucial!

Does creating a personal brand feel like a gigantic, insurmountable task? Don't worry - this article will demystify the steps & help you build an image that is authentic to yourself, which will lead to recruiters lining up to hire you!

What is branding?

Branding is the art of crafting an identity of how people perceive a product. In terms of personal branding, it refers to encapsulating your skills, experiences & values and showcasing them such that makes people want to work with you, collaborate on projects, or seek your expertise.

When it comes to personal branding, authenticity is the key - your brand should be a reflection of who you are and should be consistent across various touch points on numerous platforms.

For example, I take great pride in delivering sleek UI/UX that works without much hassle - if you visit my portfolio, you will find the theme to be consistent with what I claim to deliver!

How others perceive you is crucial too - being true to your word, a stupid simple task, is a superpower. We live in a world where the majority overpromise & under-deliver, so if you can say what you are going to do & do what you said you would do, there's nothing in the world that can stop you from being an incredibly high-demand developer, who can charge much above market rates.

Take my Upwork profile as an example. For each of my clients, I delivered on time with the promised results & they were happy to leave a good review which led to building trust in me delivering to future clients - this creates an upward spiral, allowing me to get clients in the future far more easily (even though I primarily DON'T use Upwork anymore), and I get to charge much above market rates - in India, the average software developer salary is $5/hour, and I can say no to any clients offering me less than $75/hour without thinking twice!

Building a personal brand

We know what branding is - tell me how to create a personal brand

Glad you asked!

Know your strengths

You should always be playing to your strengths - highlighting what you are good at, it can be hard technical skills or soft skills that enable you to land better opportunities, any skill that you are extremely good at works, even if the skill is fairly common!

For example, most of the developers I have encountered in the past few years - hate the idea of working on styling in front-end development, but I love it. It comes easy to me & building layouts, regardless of whether it's Yoga (React Native) or basic web-based CSS/SCSS. As a result, in my early days, doing only front-end development got me to the $50/hour mark!

Eliminate or work on your weaknesses

No matter what most people say, you should NOT work on improving (most of) your weaknesses, but eliminate working on them altogether!

Let me explain: weaknesses are skills that don't come to you naturally (even after spending countless hours actively focusing on honing them) - even though it's possible to get world-class at these through repeated practice, you will hate the process & someone who enjoys the grind of developing the skill would easily beat you!

For example, when I was trying to decide which niche of tech I should be joining, I was keen on getting into data science as it had the highest average salary - but it took me months to understand some of the basic concepts & realized it was not for me. NOTE: I spent hours each day focusing solely on data science without any distractions, studying it - you shouldn't give up until you spent at least approximately 100 hours of active undivided attention on a topic

There is one exception to this rule - if the weakness is something that is actively holding you back from achieving the results you want, no ifs, no buts, you need to work on the skill.

For example, if you don't have the necessary negotiation skills but exceptional development skills, you will always receive low-ball offers & will not be able to negotiate the compensation. Here it's crucial to learn how to negotiate & get to a point where you can charge what you are worth. I once had a client who increased their budget by 50% to ensure I got paid what I was asking for - money is rarely the problem as long as you are providing more value to the client than what they are paying you.

Define your target audience

Once you have identified your strengths & weaknesses, you need to identify your target audience too & build up your brand image such that it caters to their desires - instead of chasing the people you want, you want to start attracting them!

For example, my brand is built specifically for potential clients, looking for sleek websites or native apps who prefer tasks done fast and well, instead of cheap & who enjoy injecting occasional light-hearted fun in the mix of work

Getting noticed

This is probably the most important tool for building a personal brand - you may be the best developer in the world, but nobody is going to hire you if they don't know you exist!

You need to actively get in front of people's eyeballs to get noticed & be considered a viable candidate for the roles you want. I found blogging and open source contributions exceptionally useful for this purpose - even though I had quit for a few years & started rebuilding my blogs recently, in the early days, I received 2.8M+ views. It gave me credibility for providing value for free to others consistently for years! The contributions I had made to large projects like Material UI & Microsoft ages ago on GitHub, still make potential clients take me seriously.

You don't have to start blogging, but ensure you have a platform where you regularly provide value to others in the developer community, it may be posting on LinkedIn, making Youtube videos, answering questions on Stack Overflow or even contributing to open source projects - you get to choose what resonates the most with you!

Conclusion

Building a personal brand as a developer is a long and arduous journey that requires self-awareness, consistency, and a willingness to put yourself out there. It's not going to be easy, but when done consistently, it will yield dividends you never imagined - earning crores while working part-time anywhere in the world. It's not easy by any stretch, but given I was able to do it (someone people used to label as stupid & delusional) I am sure that with proper effort anyone can achieve the same and even surpass me.

By following these steps, you'll not only stand out in a crowded field but also attract opportunities that align with your values. Best of luck!

That's all folks! 🎉

Thanks for reading

Need a Top Rated Software Development Freelancer to chop away your development woes? Contact me on Upwork

Want to see what I am working on? Check out my Personal Website and GitHub

Want to connect? Reach out to me on LinkedIn

Follow my blogs for bi-weekly new Tidbits on Medium

FAQ

These are a few commonly asked questions I receive. So, I hope this FAQ section solves your issues.

I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles:
Would you mentor me?

Sorry, I am already under a heavy workload and do not have the time to mentor anyone.

9 tricks that separate a pro Typescript developer from an noob 😎

Tapajyoti Bose — Sun, 11 May 2025 05:06:32 +0000

Typescript is a must-know tool if you plan to master web development in 2025, regardless of whether it's for Frontend or Backend (or Fullstack). It's one of the best tools for avoiding the pitfalls of JavaScript, but it can be a bit overwhelming for beginners. Here are 9 tricks that will kick start your journey from a noob to a pro Typescript developer!

1. Type inference

Unlike what most beginners think, you don't need to define types for everything explicitly. Typescript is smart enough to infer the data types if you help narrow it down.

// Basic cases
const a = false;  // auto-inferred to be a boolean
const b = true;   // auto-inferred to be a boolean
const c = a || b; // auto-inferred to be a boolean

// Niche cases in certain blocks
enum CounterActionType {
  Increment = "INCREMENT",
  IncrementBy = "INCREMENT_BY",
}

interface IncrementAction {
  type: CounterActionType.Increment;
}

interface IncrementByAction {
  type: CounterActionType.IncrementBy;
  payload: number;
}

type CounterAction = IncrementAction | IncrementByAction;

function reducer(state: number, action: CounterAction) {
  switch (action.type) {
    case CounterActionType.Increment:
      // TS infers that the action is IncrementAction
      // & has no payload when the code in this case is
      // being executed
      return state + 1;
    case CounterActionType.IncrementBy:
      // TS infers that the action is IncrementByAction
      // & has a number as a payload when the code in this
      // case is being executed
      return state + action.payload;
    default:
      return state;
 }
}

2. Literal types

When you need a variable to hold specific values, the literal types come in handy. Consider you are building a native library that informs the user about the permissions status, you could implement it as:

type PermissionStatus = "granted" | "denied" | "undetermined";

const permissionStatus: PermissionStatus = "granted"; // ✅
const permissionStatus: PermissionStatus = "random";  // ❌

Literal types are not only limited to strings, but work for numbers and booleans, too.

interface UnauthenticatedUser {
  isAuthenticated: false;
}

interface AuthenticatedUser {
  data: {
    /* ... */
 };
  isAuthenticated: true;
}

type User = UnauthenticatedUser | AuthenticatedUser;

const user: User = {
  isAuthenticated: false,
}; // ✅

NOTE: To make realistic examples above, we have used Union with the literal types. You can use them as standalone types, too, but that makes them somewhat redundant (act as a type alias)

type UnauthenticatedUserData = null;

3. Enums

As TypeScript docs define them:

Enums are one of the few features TypeScript has which is not a type-level extension of JavaScript.

Enums allow a developer to define a set of named constants. Using enums can make it easier to document intent or create a set of distinct cases. TypeScript provides both numeric and string-based enums.

You can define enums as follows:

enum PrivacyStatus {
  Public,
  Private,
}

As an added functionality, you can also define string or number enums:

enum PrivacyStatus {
  Public = "public",
  Private = "private",
}

By default (if unspecified), enums are mapped to numbers starting from 0. Taking the example above, the default enum values would be:

enum PrivacyStatus {
  Public,  // 0
  Private, // 1
}

But if we introduce a new enum value, the values of the existing enums will change too.

enum PrivacyStatus {
  Public,     // 0
  OnlyWith,   // 1
  OnlyExcept, // 2
  Private,    // 3
}

If you plan to store the enum values in a database, it's strongly recommended to define the values each enum should map to, instead of leaving them with the default numbers - else it's easy to run into a plethora of bugs when the list of values the enum contains changes.

4. Type guards

Type guards are a way to narrow down the type of a variable. They are functions that help you to check which type a value is at runtime.

// continuing from the previous example
interface UnauthenticatedUser {
  isAuthenticated: false;
}

interface AuthenticatedUser {
  data: {
    /* ... */
 };
  isAuthenticated: true;
}

const isAuthenticatedUser = (user: User): user is AuthenticatedUser =>
  user.isAuthenticated;

if (isAuthenticatedUser(user)) {
  // user is AuthenticatedUser & you can access the data property
  console.log(user.data);
}

You can define custom type guards as per your requirement, but if you are lazy like me, try out @rnw-community/shared for some commonly used type guards such as isDefined, isEmptyString, isEmptyArray, etc

5. Index Signatures and Records

When you have dynamic keys in an object, you can use an index signature or Record to define its type:

enum PaticipationStatus {
  Joined = "JOINED",
  Left = "LEFT",
  Pending = "PENDING",
}

// Using index signature
interface ParticipantData {
 [id: string]: PaticipationStatus;
}

// Using Record
type ParticipantData = Record<string, PaticipationStatus>;

const participants: ParticipantData = {
  id1: PaticipationStatus.Joined,
  id2: PaticipationStatus.Left,
  id3: PaticipationStatus.Pending,
  // ...
};

NOTE: In the code above, you should use either index signature or Record, not both - having both in will cause an error saying Duplicate identifier 'ParticipantData'

6. Generics

Occasionally, you may want to create a function or a class that is not restricted to work with multiple types of data. Generics allow you to handle just that. You can define a generic type by using angle brackets <>:

const getJsonString = <T>(data: T) => JSON.stringify(data, null, 2);

// usage
getJsonString({ name: "John Doe" }); // ✅
getJsonString([1, 2, 3]);            // ✅
getJsonString("Hello World");        // ✅

Generics also allow you to define constraints on the type of data you want to work with. For example, if you want to create a function that only works with objects with ids, you can do it like this:

const removeItemFromArray = <T extends { id: string }>(
  array: T[],
  id: string
) => {
  const index = array.findIndex((item) => item.id === id);
  if (index !== -1) {
    array.splice(index, 1);
 }
  return array;
};

// usage
removeItemFromArray(
 [
  { id: "1", name: "John Doe" },
  { id: "2", name: "Jane Doe" },
 ],
 "1"
);                                   // ✅
removeItemFromArray([1, 2, 3], "1"); // ❌

7. Immutable types

Immutable types are a way to ensure that the data in your objects or arrays cannot be modified, thus you can prevent unintended side effects and make your code predictable and easy to debug.

You can use Readonly and ReadonlyArray to enforce immutability.

Using `Readonly` for objects

interface User {
  name: string;
  age: number;
}

const user: Readonly<User> = {
  name: "John Doe",
  age: 30,
};

user.name = "Jane Doe"; // ❌ Error: Cannot assign to 'name' because it is a read-only property

Using `ReadonlyArray` for arrays

const numbers: ReadonlyArray<number> = [1, 2, 3];

numbers.push(4); // ❌ Error: Property 'push' does not exist on type 'readonly number[]'
numbers[0] = 10; // ❌ Error: Index signature in type 'readonly number[]' only permits reading

Deep immutability

If you need deep immutability (ensuring nested objects are also immutable), you can use libraries like deep-freeze or create custom utility types.

type DeepReadonly<T> = {
  readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P];
};

interface User {
  name: string;
  address: {
    city: string;
    country: string;
 };
}

const user: DeepReadonly<User> = {
  name: "John Doe",
  address: {
    city: "New York",
    country: "USA",
 },
};

user.address.city = "Los Angeles"; // ❌ Error: Cannot assign to 'city' because it is a read-only property

You can start off by making the constant objects read only - there are hundreds of utilities for using the immutable pattern, eg: allows you to use time travel debugging in Redux, but they would require a lot deeper dive to explain in detail.

8. Utility types

Typescript introduces several utility types to generate types with niche characteristics using pre-existing types. These utility types are extremely useful when you need to generate a new type that is similar to an already existing type with minor alterations.

Pick: Pick the necessary properties from an object type
Omit: Pick all the properties from an object type, omitting the selected keys
Partial: Make all properties of an object type optional
Required: Make all properties of an object type required

interface User {
  name: string;
  age?: number;
  email: string;
}

type PickUser = Pick<User, "name" | "age">;
type OmitUser = Omit<User, "age">;
type PartialUser = Partial<User>;
type RequiredUser = Required<User>;

// PickUser is equivalent to:
// interface PickUser {
//   name: string;
//   age?: number;
// }

// OmitUser is equivalent to:
// interface OmitUser {
//   name: string;
//   email: string;
// }

// PartialUser is equivalent to:
// interface PartialUser {
//   name?: string;
//   age?: number;
//   email?: string;
// }

// RequiredUser is equivalent to:
// interface RequiredUser {
//   name: string;
//   age: number;
//   email: string;
// }

9. Union & Intersection types

As already explored above, we can combine 2 or more types using Union types - Union types are defined using the | operator and combine multiple types into a single type. This is useful when you want to create a type that can be one of multiple different types.

interface UnauthenticatedUser {
  isAuthenticated: false;
}

interface AuthenticatedUser {
  data: {
    /* ... */
 };
  isAuthenticated: true;
}

// Union - user type allows both unauthenticated users and authenticated users to be stored
type User = UnauthenticatedUser | AuthenticatedUser;

The intersection operator uses the & operator and combines the object types into a single type.

interface UserData {
  name: string;
  email: string;
  phoneNumber: string;
}

interface UserMetaData {
  lastSignedInAt: Date;
  signInLocation: {
    country: string;
    city: string;
 };
}

type UserFullData = UserData & UserMetaData;
// UserFullData is equivalent to:
// interface UserFullData {
//   name: string;
//   email: string;
//   phoneNumber: string;
//   lastSignedInAt: Date;
//   signInLocation: {
//     country: string;
//     city: string;
//   };

Wrapping up

Now you know how pros use TypeScript! Give yourself a pat on the back.

That's all folks! 🎉

Thanks for reading

Need a Top Rated Software Development Freelancer to chop away your development woes? Contact me on Upwork

Want to see what I am working on? Check out my Personal Website and GitHub

Want to connect? Reach out to me on LinkedIn

Follow my blogs for bi-weekly new Tidbits on Medium

FAQ

These are a few commonly asked questions I receive. So, I hope this FAQ section solves your issues.

I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles:
Would you mentor me?

Sorry, I am already under a heavy workload and do not have the time to mentor anyone.

7 skill you must know to call yourself HTML master in 2025 🚀

Tapajyoti Bose — Sun, 27 Apr 2025 03:23:28 +0000

HTML is the backbone of web development, and it's not changing anytime soon. Even though HTML is a simple markup language, and you can easily get a reasonable grasp of it within a few hours, knowing the nitty-gritty details of HTML is what separates an average developer from a great one!

Here are 7 HTML skills you should know to become an exceptional developer in 2025.

1. Semantic HTML

As Google spits out

Semantic HTML refers to using HTML elements that clearly define the purpose and meaning of the content they contain, making your website code more understandable for both humans and machines. This is important because it enhances readability, accessibility, and search engine optimization (SEO).

Though picking up Semantic HTML is a tad difficult for beginners, once you get the hang of things, using Semantic HTML becomes almost unconscious.

Common Semantic HTML Tags are:

section: The section tag groups the content into different sections.
header: The header tag is used to define the header for a document
nav: The nav element defines a set of navigation links.
footer: Just like the header, the footer tag is used to define the footer for a document
aside: The aside element defines some content aside from the main content (eg: placed in a sidebar).
main: The main element specifies the main content of the document

Here's an example of how to use Semantic HTML:

<header>
  <img src="brand-logo.png" />
</header>

<aside>
  <nav>
    <a href="#sec-1">Section 1</a>
    <a href="#sec-2">Section 2</a>
  </nav>
</aside>

<main>
  <section id="sec-1">
    <h1>Section 1</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </section>
  <section id="sec-2">
    <h1>Section 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </section>
</main>

<footer>
  <nav>
    <a href="http://ext-1.com">External Link 1</a>
    <a href="http://ext-2.com">External Link 2</a>
  </nav>
</footer>

2. Lazy loading assets

Lazy loading is a technique that defers the loading of non-essential resources at the point the page is initially loaded. Deferring the loading of images and videos can significantly improve the initial load speed of your website.

One important note - you should only lazy load images and videos that are below the fold (fancy term for elements that are not visible in the viewport when the page is loaded, you have to manually scroll down to view the elements that are below the fold). Lazy loading of images and videos that are above the fold (ie: visible on visiting the website) can lead to a poor user experience as the user will have to wait for the images and videos to load after the page is loaded.

Here's an example of how to lazy load images and videos:

<!-- image -->
<img src="image.png" loading="lazy" />

<!-- video -->
<video preload="none">
  <source src="video.mp4" type="video/mp4" />
</video>

3. Preloading assets

This is the opposite of lazy loading. Preloading is a technique that allows you to load essential resources before the page is fully loaded. This can significantly improve the performance of your website, especially for resources that are critical for rendering the page.

The most common use case for preloading is to load up content that is above the fold (ie: visible on visiting the website).

Here's an example of how to preload images - the tag should be placed in the <head> section of your HTML document:

<link rel="preload" href="https://example.com/asset.png" as="image" />

For videos, you can reuse the preload attribute in the <video> tag:

<video preload="auto">
  <source src="video.mp4" type="video/mp4" />
</video>

4. Custom link previews

Ever wondered how WhatsApp shows a preview of the link you are sharing? It's as simple as slapping in a few tags in the <head> section of your HTML document.

WhatsApp (& other platforms from Meta) uses the Open Graph protocol (og) to generate link previews, whereas Twitter uses the Twitter Card protocol. You can (& should) use both protocols to generate link previews for your website.

This is what I use for my portfolio:

<!-- Basic meta tags -->
<meta
  name="description"
  content="I am Tapajyoti Bose, a 5-Star & Top Rated Freelance Frontend Web Developer specializing in React. This is my portfolio."
/>
<meta name="image" content="/card-image.png" />
<meta name="thumbnail" content="/card-image.png" />
<meta name="title" content="Tapajyoti Bose: Personal Portfolio" />

<!-- Twitter -->
<meta name="twitter:card" content="summary" />
<meta
  name="twitter:description"
  content="I am Tapajyoti Bose, a 5-Star & Top Rated Freelance Frontend Web Developer specializing in React. This is my personal portfolio."
/>
<meta name="twitter:image" content="/card-image.png" />
<meta name="twitter:title" content="Tapajyoti Bose: Personal Portfolio" />

<!-- Open Graph (Facebook, Whatsapp, Instagram, Pinterest, etc) -->
<meta
  property="og:description"
  content="I am Tapajyoti Bose, a 5-Star & Top Rated Freelance Frontend Web Developer specializing in React. This is my personal portfolio."
/>
<meta property="og:image" content="/card-image.png" />
<meta property="og:site_name" content="Tapajyoti Bose" />
<meta property="og:title" content="Tapajyoti Bose: Personal Portfolio" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://tapajyoti-bose.vercel.app/" />

There are hundreds of meta tag generators available online, but I found Meta Tags to be the best one so far.

5. Make a call or send an email

These days, most devices (including laptops & desktops) allow you to place calls. You can use the tel: links to make a call from your device simply using HTML.

If you want to send an email, mailto: links got your back! It will open the default email client on the user's device and pre-fill the recipient's email address.

Here's an example of how to use tel: and mailto: links:

<a href="tel:+919876543210">Call someone</a>
<a href="mailto:user@email.com">Send an email</a>

6. Responsive images

Ever run into a slow website that takes ages to fully load due to humongous images? Well, you can avoid that in your next awesome website by using responsive images.

Art Direction is an incredible optimization technique that saves a huge amount of bandwidth by loading the optimally sized images based on some media queries.

<picture>
  <source media="(max-width: 1200px)" srcset="link-to-img" />
  <source media="(max-width: 2560px)" srcset="link-to-img@2x" />
  <source media="(min-width: 2560px)" srcset="link-to-imgl@3x" />
  <img src="link-to-img@3x" />
</picture>

In the example above, the browser will load the required image based on the media query that matches the user's device. This is a great way to optimize the load time of your website for different devices and screen sizes.

7. Preformatted text

Are you building an app where the text formatting a user enters needs to be preserved, but HTML keeps reverting to the default formatting?

Fret not my friend, all you need to do is wrap the content with a <pre> tag to preserve the formatting of the text. Text in a pre element is displayed in a fixed-width font by default (does allow manual styling), and the text preserves both spaces and line breaks.

<pre>
Lorem

 Ipsum   dolor sit             amet.
</pre>

That's all folks! 🎉

Thanks for reading

Need a Top Rated Software Development Freelancer to chop away your development woes? Contact me on Upwork

Want to see what I am working on? Check out my Personal Website and GitHub

Want to connect? Reach out to me on LinkedIn

Follow my blogs for bi-weekly new Tidbits on Medium

FAQ

These are a few commonly asked questions I receive. So, I hope this FAQ section solves your issues.

I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles:
Would you mentor me?

Sorry, I am already under a heavy workload and do not have the time to mentor anyone.

11 Interview Questions You Should Know as a React Native Developer in 2025 📈🚀

Tapajyoti Bose — Sun, 13 Apr 2025 12:40:15 +0000

^{Originally published on Medium}

This is the second part of the interview questions series. If you are looking for React Developer interview questions, check out my previous article here.

Here are the 11 React Native Interview Questions you should know in 2025.

1. How does React Native achieve native-like performance?

React Native achieves native-like performance through several key features.

Direct native rendering

React Native components map directly to native UI components, allowing the app to render UI elements using the platform's native APIs. This results in a UI that's indistinguishable from one built using native code.

Native threads

There are 3 threads commonly used in React Native:

UI thread: This is the main thread responsible for initializing the app, rendering the UI, managing touch events, and invoking the JavaScript thread. The biggest advantage of this thread is that it can run in parallel with the JavaScript thread, enabling smooth UX even when an intensive computation is running on the JavaScript thread.
JavaScript thread: This thread runs the JavaScript code, including the React Native app logic. It communicates with the UI thread to update the UI based on user interactions and app state changes.
Shadow thread: This thread is responsible for performing UI layout and measurements. Before its introduction, the UI thread was responsible for layout and measurements. Due to the segregation of responsibilities between the UI and shadow threads, React Native can now deliver a much smoother experience, especially when dealing with complex layouts.

Optimized UI updates

By using React under the hood, React Native's reconciliation process (read: a fancy term for detecting the minimum changes to the actual DOM to sync it with the Virtual DOM) intelligently updates only the necessary parts of the UI, reducing unnecessary rendering and enhancing performance.

If you want to dive deeper into the differences between Virtual DOM, real DOM & the Shadow DOM, check out this article

2. What is the role of the bridge in React Native?

The bridge in React Native is a crucial component that facilitates communication between the JavaScript code and the native modules. It acts as a two-way communication channel, allowing JavaScript to call native APIs and vice versa.

When JavaScript code needs to access a native module, it sends a message to the bridge, which then forwards the request to the appropriate native code. The native code processes the request and sends the result back through the bridge to the JavaScript side. The communication through the bridge is asynchronous and batched.

The data is serialized and deserialized into a JSON-like format as it passes through the bridge. The huge advantage is that the two sides can communicate effectively despite being written in different languages (JavaScript and native code). One of the major challenges of the bridge is that it can introduce latency, due to the additional overhead of serialization and deserialization, especially when dealing with huge amounts of data, frequent communication, and complex objects.

PS: The bridge primarily runs on the Main/UI thread and doesn't have its own thread.

3. What is the new architecture in React native?

The new architecture in React Native is a complete rewrite of the major systems such as rendering, communication between native & Javascript code, etc. It is aimed at improving performance, flexibility, and developer experience.

The biggest change is the removal of the bridge - previously, the bridge was a major bottleneck, leading to performance issues and laggy experiences. The new architecture drastically improves JavaScript abstractions and communicates with native code using JavaScript Interface (JSI), which allows for direct access to native APIs without the need for serialization and deserialization. So now it's possible to call native code synchronously from JavaScript.

One of the most common issues developers can recreate due to this infamous bridge overhead is typing fast in a controlled input field. The bridge is unable to keep up with the rapid changes, leading to a buggy experience, where the cursor lags behind what the user is typing. The source of the issue is that after each keystroke the data had to be sent over the bridge to that native side requesting the value to be updated to the new state value.

Fast typing in a controlled input using the new architecture

Fast typing in a controlled input using the old architecture

4. What are the differences between using React Native CLI vs Expo?

To create a React Native app, you have two options:

Use the React Native CLI (Command Line Interface) to set up a project from scratch. This comes with full control and flexibility over project setup & native code integration.
Use Expo, a framework built on top of React Native that provides a streamlined experience for building and deploying apps, but comes with limited access to native modules and APIs.

Here are the key differences:

Feature	React Native CLI	Expo
Development Workflow	More flexible and customizable, but requires more setup	Streamlined and managed, simplifies development
Native Access	Full access to native code and modules	Limited access to native modules - requires `prebuild` for full control
Build Process	Developers manage the build process	Expo handles the build process (via EAS - Expo Application Services)
Learning Curve	Difficult to pick up for beginners	Easier for beginners
Ideal Use Cases	Complex applications which require extensive customization	Quick prototyping and smaller projects, for rapid development

NOTE: Even though to use Expo for complex apps you require additional workarounds, it is possible to develop complicated apps with Expo. I personally have used Expo to build apps with App Clips & Widgets, by combining React Native with native code in Swift.

5. Explain the role of managed and bare workflows in Expo.

As mentioned above, Expo makes it easy for developers to build and deploy React Native apps but comes with limited access to native modules and APIs. To get full access to Native modules, you need to "eject" from the managed Expo workflow and use the bare workflow. This can be done using a single command:

expo prebuild

The prebuild command would generate the necessary files, and convert the managed workflow into a bare workflow where you have access to the android & ios folders, allowing you to write custom native code.

The managed workflow is easier to use as Expo handles the native code for you, but it has limited customization options for the native code. The bare workflow gives you full control over the native code, allowing you to write your native functionalities (eg: App Clips, Widgets, custom logic) but it requires more setup and maintenance.

6. How to style a component in React Native?

Similar to React, React Native provides a bunch of methods to style components.

Inline styles

Similar to React, this is the quickest (& dirtiest) way to style a component. You can pass a style object directly to the style prop of a component.

<h1 style={{ textAlign: "center", color: "#F43596" }}>Hello</h1>

CSS-in-JS Modules (Styled Components)

Using the same CSS-in-JS approach as React, you can use libraries like Styled Components to style your components. This allows you to write CSS directly in your JavaScript files (personally not a fan of using these).

const StyledText = styled.Text`
  color: #bf4f74;
`;

const App = () => {
  return <StyledText>Hello World!</StyledText>;
};

React Native StyleSheet

This is the suggested way to style components in React Native. The StyleSheet API allows you to create a stylesheet object that can be reused across multiple components.

import { StyleSheet, Text } from "react-native";

const styles = StyleSheet.create({
  text: {
    color: "#F43596",
    fontSize: 20,
    textAlign: "center",
  },
});

const App = () => {
  return <Text style={styles.text}>Hello World!</Text>;
};

Suggestion: keep the styles in a separate file and import them into the component file. This keeps the code clean and easy to maintain.

NOTE: React Native uses Yoga for layout, which has access to a smaller subset of the CSS properties.

7. How do you handle platform-specific code in React Native?

React Native provides a few ways to handle platform-specific code.

Platform.OS

The Platform.OS API allows you to check the current platform (iOS, Android, or web) and is commonly used to conditionally render components or styles based on the platform.

import { Platform, Text } from "react-native";

const App = () => {
  return <Text>Hello {Platform.OS === "ios" ? "iOS" : "Android"} user</Text>;
};

Platform.select

If you plan on supporting multiple platforms, the Platform.select method might be easier to use - create a single object that contains conditional code for each platform, and React Native will automatically select the correct one based on the current platform.

import { Platform, Text } from "react-native";

const App = () => {
  return (
    <>
      <Text style={styles}>
        {Platform.select({
          ios: "Hello iOS user",
          android: "Hello Android user",
          default: "Hello user",
        })}
      </Text>
      <Text style={styles}>
        {Platform.select({
          native: "You are on native",
          web: "You are on web",
        })}
      </Text>
    </>
  );
};

Platform-specific file extensions

React Native allows you to create platform-specific files by using file extensions. For example, if you have a component that needs to behave differently on iOS and Android, you can create two separate files with the same name but different extensions:

// Component.js
import { Text } from "react-native";

export const Component = () => {
  return <Text>Hello user</Text>;
};

// Component.web.js
import { Text } from "react-native";

export const Component = () => {
  return <Text>Hello Web user</Text>;
};

When you import the Component, React Native will automatically select the correct file based on the current platform. Other extensions include .ios.js, .android.js, and .native.js (or .jsx & .tsx equivalents).

This approach is most useful for handling a codebase that targets both native & web - quite often trying to use components with underlying native modules can lead to crashes on the web, which can be bypassed by using the platform-specific file extensions.

8. What is the difference between Flatlist and Scrollview when would you use one over the other?

Both FlatList and ScrollView are used to render lists of items in React Native, but they have different use cases and performance characteristics.

ScrollView is a simple component that renders its children in a scrollable view. It is best suited for small lists of items - it renders all its children at once, which can lead to performance issues when dealing with large lists.
FlatList is a more advanced component that is optimized for rendering large lists of items. It only renders a set number of items on the screen & loads more items as the user scrolls through the list, which improves performance and reduces memory usage.

// ScrollView
<ScrollView>
  <Text>Item 1</Text>
  <Text>Item 2</Text>
  <Text>Item 3</Text>
</ScrollView>

// FlatList
<FlatList
   data={data}
   renderItem={({ item }) => <Text>{item}</Text>}
   keyExtractor={(item) => item.id}
/>

For any real-world use case, most people find that even FlatList is not performant enough. So the folks at Shopify created a new component called FlashList which is almost a drop-in replacement for FlatList and is much more performant.

FlashList uses a different technique called "cell recycling" that only renders the visible portion of a list and reuses those views as the user scrolls, reducing memory usage and improving performance. It takes in a few additional props such as estimatedItemSize and estimatedListSize to efficiently generate the UI.

<FlashList
  data={data}
  renderItem={({ item }) => <Text>{item}</Text>}
  keyExtractor={(item) => item.id}
  estimatedItemSize={100}
  estimatedListSize={{ height: 600; width: 200 }}
/>

9. What is the use of Native modules in React Native?

React Native allows developers to use platform-specific APIs, libraries, and native features written in the platform's native language (eg: Java/Swift/Objective-C) to add custom functionality to their apps in case the existing React Native modules do not support them out of the box. The NativeModule system exposes instances of native classes to JavaScript as JS objects, thereby allowing you to execute arbitrary native code from within JS.

The communication between JavaScript and native code is done through the bridge.

The new architecture introduces Turbo Native Module, which is similar to how React Native uses Native Modules but uses JSI for direct synchronous calls between JavaScript and native code, resulting in much-improved performance.

10. What are the benefits of React Native?

React Native is one of the most popular cross-platform frameworks. There are massive benefits of using React Native:

Cross-platform development: React Native is extremely adept at the write once, run everywhere philosophy, it allows developers to write code that can be used on both iOS and Android platforms, reducing development time and effort.
Community: React Native has the largest active community, which means there are plenty of resources, libraries, and third-party plugins available to reduce development time. If you run into any issues, chances are, you will find a solution for the problem on Stack Overflow
Builds upon existing React knowledge: If you are already familiar with React, you can easily pick up React Native and start building mobile apps. The component-based architecture and the use of JavaScript make it easy to transition from web development to mobile development.
Native-like performance and UX: It goes without saying, that unless React Native can deliver native-like performance and UX, it would not be as popular as it is today. Innumerable apps like WhatsApp, Instagram, Facebook, etc. are built using React Native.

11. What are the limitations of React Native?

Just like everything in the universe, React Native has its cons too.

Native-LIKE performance: Though React Native does provide close to native performance, especially after the introduction of the new architecture, it is still not as performant as fully native apps (or even Flutter). This is especially true for complex animations and heavy computations.
Dependency hell: Managing dependencies for React Native projects is something every developer dreams of, the dream just happens to be a nightmare! When you are upgrading to a new version of React Native (or potentially Expo), you need to ensure that all your dependencies are compatible with the new version. This can be a tedious and time-consuming process, and can occasionally result in days' worth of work adding patches.
Native knowledge is still required: This is highly dependent on what you are building, but if you need some native features such as App Clips, Widgets, etc. you will need to write native code - there's no way around it.

Even though React Native is a cross-platform framework, it is not a silver bullet for all mobile development needs. It is best suited for teams who are already familiar with React and for projects that require a quick turnaround time. For complex applications that require extensive customization or native features, there might be better development alternatives available.

That's all folks! 🎉

Thanks for reading

Need a Top Rated Software Development Freelancer to chop away your development woes? Contact me on Upwork

Want to see what I am working on? Check out my Personal Website and GitHub

Want to connect? Reach out to me on LinkedIn

Follow my blogs for bi-weekly new Tidbits on Medium

FAQ

These are a few commonly asked questions I receive. So, I hope this FAQ section solves your issues.

I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles:
Would you mentor me?

Sorry, I am already under a heavy workload and do not have the time to mentor anyone.

17 React Interview Questions You Must Know as a Developer in 2025

Tapajyoti Bose — Sun, 30 Mar 2025 05:47:58 +0000

^{Originally published on Medium}

React is one of the most in-demand skills for Frontend Developers in 2025. If you're preparing for a React developer interview in 2025, it's crucial to stay ahead of the curve with the latest best practices, patterns, and concepts.

This article compiles a list of 17 React interview questions that cover everything from core React principles to advanced performance optimizations that will help you ace your next React developer interview.

Let's dive in!

1. What is the React Virtual DOM? How is it different from the real DOM & Shadow DOM?

Virtual DOM is a concept where a virtual representation of the real DOM is kept inside the memory and is synced with the actual DOM by a library such as ReactDOM only when necessary.

The Virtual DOM is an object that represents the real DOM in the memory. Since DOM updates are an integral part of any web app but are the costliest operation in frontend development, the Virtual DOM is utilized to check for parts of the app that need to be updated & update only those parts, thus significantly boosting performance.

The Virtual DOM is a completely different concept from the real DOM and shadow DOM. The real DOM is the actual representation of the HTML document in a tree-like structure that browsers use to track the contents of a web page, and the Shadow DOM is a programming practice that allows developers to create isolated reusable components for web applications.

If you want to dive deeper into the differences between Virtual DOM, real DOM & the Shadow DOM, check out this article

2. What are the 2 types of components in React? Where should we use them?

There are 2 types of components in React:

Class Components
Functional Components

Previously, class components were the only way to create components with any functionality in React, with the functional components being used only as presentational components and often being referred to as "dumb" components.

But, with the release of React 16.8 and the introduction of React Hooks, functional components can now have state & lifecycle methods, making them the preferred way to create components in React.

Functional components are much faster than class components with less overhead & boilerplate code, so it's recommended to use functional components wherever possible. However some of the lifecycle methods are still available only in class components, so you might need to use class components in some niche cases like creating your custom error boundaries (eg: using the componentDidCatch lifecycle method in class components).

3. Why do we need keys in React? Can we use keys without lists in React?

Keys in React are used to identify unique Virtual DOM Elements with their corresponding data driving the UI. Using keys helps React optimize rendering by recycling existing DOM elements.

Keys help React identify which items have changed, are added, or are removed, enabling it to reuse already existing DOM elements, thus providing a performance boost.

For example:

const Todos = ({ todos }) => {
  return (
    <div>
      {todos.map((todo) => (
        <li>{todo.text}</li>
      ))}
    </div>
  );
};

This would cause new DOM Elements to be created every time todos change, but adding the key prop (ie: <li key={todo.id}>{todo.text}</li>) would result in "dragging" around the DOM Elements inside the ul tag & updating only the necessary lis

Keys can be used with any element in React & does not necessarily need to be used with lists, but it's most commonly used with lists to optimize rendering. Some non-standard (& non-recommended) use cases of keys include using them to force the re-rendering of components like the example below:

const TimeNow = () => {
  const [key, setKey] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => setKey((prevKey) => prevKey + 1), 1000);
    return () => clearInterval(interval);
  }, []);

  return <div key={key}>{new Date()}</div>;
};

As mentioned, code like this should definitely be avoided & you are better off using the state to store the time instead of the key to force re-rendering. Using keys to force re-rendering is an anti-pattern & can lead to severe performance issues unless you know exactly what you are doing.

4. Difference between controlled and uncontrolled input in React

Controlled components rely on the React state to manage the form data, while uncontrolled components use the DOM itself to handle form data.

In most cases, controlled components are preferred because they provide a single source of truth for the form data, making it easier to manage, validate, and submit the form data.

const ControlledInputForm = () => {
  const [value, setValue] = useState("");
  const handleChange = (e) => setValue(e.target.value);
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={value} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
};

const UncontrolledInputForm = () => {
  const inputRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
};

5. Why do we need to transpile JSX code?

Unless you hurt your head, you are NOT using React like this:

import { createElement } from "react";

const Greeting = ({ name }) => {
  return createElement("h1", { className: "greeting" }, "Hello");
};

Yet, this is what the browser reads - it is simply unable to understand the JSX syntax commonly used to write React components.

Thus we are required to use tools like Babel to transpile JSX to JavaScript so that the browser can execute it. So when you write the following code:

const Greeting = ({ name }) => <h1 className="greeting">Hello</h1>;

It's transpiled to the former code snippet so that the browser can interpret it & render the component.

6. How does JSX prevent injection attacks?

Since JSX renders content as text, any element in user input is not treated as HTML, just as plain text. For example, the following script tag would be rendered as text and not executed:

const MyComponent = () => {
  const content = "<script>alert('XSS')</script>";
  return <div>{content}</div>;
};

NOTE: You can override this behavior by using dangerouslySetInnerHTML but it's not recommended unless you are absolutely sure about the source of the input (& would strongly suggest sanitizing the content before injecting it).

const MyComponent = () => {
  const content = "<script>alert('XSS')</script>";
  return <div dangerouslySetInnerHTML={{ __html: content }} />;
};

7. How can we add styling to React components?

CSS Files

Using CSS files is one of the most common ways to style React components. It allows for the use of all CSS features and is set up by default with the Create React App.

/* Button.css */
.button {
  background-color: blue;
  color: white;
}

// Button.tsx
import "./Button.css";

const Button = () => {
  return <button className="button">Click me</button>;
};

Inline CSS

Styling React elements using inline CSS allows styles to be completely scoped to an element. However, certain styling features are not available with inline styles. For example, the styling of pseudo-classes like :hover.

const Button = () => {
  return (
    <button style={{ backgroundColor: "blue", color: "white" }}>
      Click me
    </button>
  );
};

CSS-in-JS Modules (Styled Components, Emotion, and Styled-jsx)

CSS-in-JS modules are a popular option for styling React applications because they integrate closely with React components. For example, they allow styles to change based on React props at runtime. Also, by default, most of these systems scope all styles to the respective component being styled.

import styled from "styled-components";

const Button = styled.button`
  background-color: blue;
  color: white;
`;

const App = () => {
  return <Button>Click me</Button>;
};

CSS Modules

My personal favorite styling method, CSS Modules allow styles to be scoped to a single component. It's a great way to avoid class name collisions (fancy term for 2 classes ending up with the same name - quite common in a large scale project), keep styles organized & add shared styles to multiple components.

/* Button.module.css */
.button {
  background-color: blue;
  color: white;
}

// Button.js
import styles from "./Button.module.css";

const Button = () => {
  return <button className={styles.button}>Click me</button>;
};

8. What are synthetic events in React?

Synthetic events combine the response of different browser's native events into one API, ensuring that the events are consistent across different browsers. The application is consistent regardless of the browser it is running in.

const Component = () => {
  const handleClick = (e) => {
    e.preventDefault(); // synthetic event
    console.log("link clicked");
  };
  return <a onClick={(e) => handleClick}>Click me</a>;
};

9. What is the strict mode in React?

<StrictMode /> is a component included with React to provide additional visibility of potential issues in components. If the application is running in development mode, any arising issue is logged to the development console, but these warnings are not shown if the application is running in production mode.

Developers use <StrictMode /> to find problems such as deprecated lifecycle methods and legacy patterns, to ensure that all React components follow current best practices.

<StrictMode /> can be applied at any level of an application component hierarchy, which allows it to be adopted incrementally within a codebase.

The docs for <StrictMode /> are added below

Strict Mode enables the following development-only behaviors:

Your components will re-render an extra time to find bugs caused by impure rendering.

Your components will re-run Effects an extra time to find bugs caused by missing Effect cleanup.

Your components will re-run refs callbacks an extra time to find bugs caused by missing ref cleanup.

Your components will be checked for usage of deprecated APIs.

10. How to gracefully handle errors in React?

By default, if a React app throws an error during rendering, React will remove its UI from the screen. To prevent this, we can wrap a part of the UI into an error boundary, which would allow us to catch the error & display a fallback UI instead of crashing the entire app.

You can build your custom error boundary:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI, or even accept it as a prop
      return <FallbackComponent />;
    }
    return this.props.children;
  }
}

But for most cases, you can use the react-error-boundary package which provides the necessary components to handle errors in React applications.

import { ErrorBoundary } from "react-error-boundary";

const App = () => (
  <ErrorBoundary FallbackComponent={FallbackComponent}>
    <MyComponent />
  </ErrorBoundary>
);

11. What are the rules of React Hooks?

There are 3 main rules of React Hooks:

Only call hooks from React Functions: Hooks can only be called within a React Function Component or from within another hook. Calling hooks within regular JS/TS functions will be treated as a regular function call & will not work as expected.
Only call hooks at the Top Level: Hooks can only be called at the top level of a React Function Component or a custom hook. This is to ensure that hooks are called in the same order each time a component renders. Using hooks inside loops, conditions, or nested functions will result in errors.
Hooks must start with 'use': All hook names (including custom hooks) must begin with the word "use". This is to ensure that React can identify hooks and enforce the rules of hooks. For example, useState, useEffect, useContext, etc.

12. How to handle the common lifecycle methods in React Functional Components?

The common lifecycle methods in React are:

componentDidMount: called after the component is mounted on the DOM. Commonly used to fetch data or perform side effects like adding event listeners.
componentDidUpdate: called after some specific value in the component is updated. Commonly used to perform side effects based on the updated value.
componentWillUnmount: a cleanup method called before the component is unmounted from the DOM. Commonly used to remove event listeners or cancel network requests.

In functional components, these lifecycle methods can be handled using the useEffect hook. The useEffect hook takes a function as its first argument and an array of dependencies as its second argument.

const Component = () => {
  useEffect(() => {
    // componentDidMount
    console.log("Component mounted");

    return () => {
      // componentWillUnmount
      console.log("Component unmounted");
    };
  }, []); // empty dependency array implies this effect runs only once when the component mounts

  useEffect(
    () => {
      // componentDidUpdate
      console.log("Component updated");
    },
    [
      /* dependencies - changes to these values should trigger the function to re-run */
      /* NOTE: This function will run during mount too */
    ]
  );

  return <React.Fragment />;
};

13. What are refs in React?

Refs are variables that allow you to persist data between renders, just like state variables, but unlike state variables, updating refs does NOT cause the component to re-render.

Refs are usually used to (but not restricted to) store references to DOM elements.

const Component = () => {
  const inputRef = useRef(null);
  const handleClick = () => inputRef.current.focus();

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

14. What is prop drilling in React? How can we avoid it?

While developing React applications, there is often a need to pass data from a component that is higher in the hierarchy to a component that is deeply nested. Prop drilling refers to the process of passing props from a source component to the deeply nested component through all the intermediate components.

The disadvantage of using prop drilling is that the components that should otherwise be not aware of the data have access to the data, moreover, the code becomes harder to maintain.

Prop drilling can be avoided using the Context API or some form of State Management library.

15. Describe some of the optimization techniques in React

Using memoization

useMemo is a React hook that is used for caching CPU-Expensive functions. A CPU-Expensive function called repeatedly due to re-renders of a component can lead to severe performance issues & UX degradation.

The useMemo hook can be used to cache the results from such functions. By using useMemo, the CPU-Expensive function gets called only when it is needed.

Lazy Loading

Lazy loading is a technique used to reduce the initial load time of a React app. It helps reduce the risk of web app performances to a minimum, by loading up the components as the user navigates through the app.

Throttling and Debouncing

Although this is not a React-specific optimization technique, it is often used in React applications to improve performance. Throttling and debouncing are techniques used to limit the number of times a function is called in response to an event - they are often used with inputs that provide real-time feedback to the user (eg: typing in a search field with auto-suggestions - the API call to fetch the suggestions can be throttled or debounced to avoid making unnecessary API calls)

16. What are portals?

Portal is a recommended way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. It is advisable to create a new DOM node for the portal.

const Portal = ({ children }) => {
  // NOTE: it is assumed that the portal root is already present in the HTML file
  //       <div id="portal-root" />
  const portalRoot = document.getElementById("portal-root");
  return ReactDOM.createPortal(children, portalRoot);
};

17. What is React Fiber?

React Fiber is a concept of ReactJS that is used to render a system faster and smoother. It is an internal engine change aimed at making React faster & somewhat "smarter". The Fiber reconciler, which became the default reconciler for React 16 and above, is a complete rewrite of React’s reconciliation algorithm to solve some long-standing issues in React.

Because Fiber is asynchronous, React can:

Pause, resume, and restart rendering work on components as new updates come in
Reuse previously completed work and even abort it if not needed
Split work into chunks and prioritize tasks based on importance

This change allows React to break away from the limits of the previous synchronous Stack Reconciler, where tasks couldn’t be interrupted. This change also allows React to fine-tune rendering components, ensuring that the most important updates happen as soon as possible.

Are you scratching your head, wondering what "reconciliation" is?

Don't worry, we got you covered! In React, reconciliation is the core mechanism responsible for efficiently updating the UI in response to changes in a component's state or props. It determines the minimal set of operations needed to transform the actual DOM to match the desired state represented by the virtual DOM.

That's all folks! 🎉

If you want a list of interview questions for React Native, stay tuned for the next article!

Thanks for reading

Need a Top Rated Software Development Freelancer to chop away your development woes? Contact me on Upwork

Want to see what I am working on? Check out my Personal Website and GitHub

Want to connect? Reach out to me on LinkedIn

Follow my blogs for bi-weekly new Tidbits on Medium

FAQ

These are a few commonly asked questions I receive. So, I hope this FAQ section solves your issues.

I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles:
Would you mentor me?

Sorry, I am already under a heavy workload and do not have the time to mentor anyone.

7 Tools that Make Me Productive as a Software Engineer

Tapajyoti Bose — Sun, 16 Mar 2025 05:54:46 +0000

^{Originally published on Medium}

As a software engineer working at a start-up, my days are a whirlwind of coding, debugging, planning, and numerous discussions with the team.

In this fast-paced environment, productivity isn't just a nice-to-have but an essential component for delivering high-quality code efficiently and maintaining sanity. Being skilled is valuable, but the right tools can amplify those skills, leading to better output for the same effort.

Here are the indispensable tools I use daily that have immensely helped me boost my productivity over the years!

1. Calendar

You probably didn't think I would start off with such a basic tool that everyone has on their phones, but at the end of the day, generating exceptional results doesn't require some fancy magic pill - it simply requires doing the basic mundane tasks efficiently and reliably.

If you are forgetful like me, Google Calendar is a lifesaver! Whether it's creating a meeting, a reminder, or a plan for the day, it enables you to stay on top of your tasks and ensures that missing deadlines becomes a relic of the past

This is actually what my calendar looks like for March 2025

These days I find myself using Apple Reminders a lot more than I used to though, due to the seamless integration of voice commands with Siri

2. Pomodoro

Be Focused is a time management app that uses the Pomodoro Technique to help you stay focused and productive. It breaks down your work into intervals, separated by short breaks. This technique has been a game-changer in terms of productivity & focus and also ensures that you don't burn out by working for long hours at a stretch.

Even if you are not using a Mac, you can get any Pomodoro timer app from the internet, personal suggestions being Pomofocus

3. Product Management Tool

This one might be controversial - most people prefer using Notion over Jira, but since I started using Jira much before Notion became popular, I stuck to my guns

Regardless whether it's integration with GitHub and Slack, keeping track of the sprints, or simply documenting various guidelines, Jira has never let me down so far.

4. Notes App

Keep is a free note-taking app by Google that helps you capture ideas, organize lists, and even set reminders. Whenever I need to jot down ideas or break down tasks, Google Keep is my go-to tool.

5. IDE

Have you heard of anyone using Notepad (on Windows) or TextEdit (on Mac) for coding? Me neither!

An IDE is a developer's best friend, and VS Code is the most popular one out there. With its vast library of extensions, themes, and Git integration, it's a non-negotiable for any developer. The best part is that it's free & open-source, so if you feel like you need a new feature, you can always build it yourself!

There are hundreds of IDEs available on the market, but the level of customization and ease of use that VS Code provides is unparalleled because it supports all programming languages unlike PyCharm or WebStorm, which are language-specific (but considered superior to VS Code for their respective use-cases).

6. AI Tools

After the hype with AI, it should be evident by now that AI is here to stay. As a reminder of the popular saying: "AI won't take your job, but someone using AI definitely will!"

Using these tools can boost your productivity multifold, whether it's generating code snippets, automating repetitive tasks, or even refactoring your codebase.

My go-to tool for development is GitHub Copilot as it's a great pair programming buddy, and comes free for Open Source developers - I have a few contributions to Open Source projects at Material UI, Microsoft, Amazon, Webhint, and numerous others (read: shameless self-promotion).

Occasionally I also find myself using ChatGPT for fixes & suggestions and Gemini for image generation too.

7. Communication

Professionally, Slack is hands down the best communication tool out there. It's a great way to keep in touch with your team, have quick calls, share files, and even integrate with other tools like Jira, GitHub, and numerous others.

Given the team I work with is spread across the globe, I find the scheduled messages feature extremely handy, as it ensures that I can send messages to my team members without annoying them in their wee hours

That's all folks! 🎉

These are my trade secrets to turn into a productivity Jedi!

Let's help each other boost productivity! Share your favorite tools in the comments below 👇

Thanks for reading

Need a Top Rated Software Development Freelancer to chop away your development woes? Contact me on Upwork

Want to see what I am working on? Check out my Personal Website and GitHub

Want to connect? Reach out to me on LinkedIn

Follow my blogs for bi-weekly new Tidbits on Medium

FAQ

These are a few commonly asked questions I receive. So, I hope this FAQ section solves your issues.

I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles:
Would you mentor me?

Sorry, I am already under a heavy workload and do not have the time to mentor anyone.

Good Commit vs Bad Commit: The 5 Commandments of Git Bible

Tapajyoti Bose — Sun, 02 Mar 2025 03:30:22 +0000

^{Originally published on Medium}

If you are accustomed to the world of software development, chances are you have heard of the term Git. Git is the de-facto version control system - a fancy term for a tool that helps you keep track of all the changes made to a project & enables multiple developers to collaborate on a single project.

Efficient use of Git is a necessity for anyone in the realm of tech!

What are commits?

One of the most commonly used features of Git is the commit feature, which creates & stores a snapshot of the project at a particular point in time, allowing users to revert back to that snapshot at any point in the future. Commits are usually accompanied by a message that describes the changes made in that commit.

In this article, we will go through the best practices of creating a commit, which will help you look like a pro to anyone checking out your projects

5 Commandments of Git Commits

Written down in the Holy Git Bible, these commandments are the key to creating good commits & maintaining a clean git history:

Thou shalt write clear, descriptive commit messages: Vague messages provide little context to the commit & end up making it difficult to keep track of the git history - they should be avoided like the plague. Always use clear & descriptive messages
```
 # Bad commit
 git commit -m "minor changes"

 # Good commit
 git commit -m "minor UI polishes to the auth flow"
```
Thou shalt avoid committing humongous changes: Stike a balance between the number of commits & the size of each commit. A commit should always be atomic & should NOT hold hundreds of files in most cases. Sometimes extremely rarely, would you encounter a situation where actually commit hundreds of files in a single commit is a good idea.

One such example of an exception from my experience: one of my clients uses yarn cache to cache packages so that the CI/CD pipelines don't have to download the packages every time (thus preventing reliance on NPM & mitigating a point of failure for our pipelines). But when we install new packages, the changes often span across hundreds, if not thousands of files - here adding all the changes in a single commit makes sense due to the nature of the changes.

Thou shalt keep commits atomic: As mentioned above, changes should be atomic & multiple changes should NOT be bundled, even when it's small - this adds the ease of isolating bugs, reverting changes when needed & making the review process much simpler!

# Bad commit
git commit -m "fix sign out not redirecting to the home page, minor UI polishes to the auth flow, add test setup for the auth flow"

# Good commits
git commit -m "fix sign out not redirecting to the home page"
git commit -m "minor UI polishes to the auth flow"
git commit -m "add test setup for the auth flow"

Thou shalt follow a structured commit format: Following a pre-defined structure for commits can make the git history look consistent & easy to follow. Personally, I like to follow the Conventional Commits standard, which is widely used in the industry.
```
# Bad commits
git commit -m "update expo sdk"

# Good commit
git commit -m "chore(expo): update sdk to 52.0.37"
```
Thou shalt test before pushing changes: Always test your changes locally before pushing them to the main branch. This will prevent breaking the code & save you from the wrath of your team members!

Best practices

Use branches efficiently: Create separate new branches for each feature/bugfix. Raise PRs for reviews & merge it into the main branch after approval
Write clear & descriptive commit messages: Each commit in a PR should be self-explanatory on what was changed & build-up to the final feature/bugfix addressed in the PR
Strike a balance between the number of commits & the size of the commit: Each commit should make a meaningful contribution to the scope of the PR, but don't bundle all the changes in a single commit.
Squash commits before merging to the main branch: If you are a project owner, leader, admin, or someone reviewing the code, before merging a branch in the main one, consider squashing the commits from the PR during the merge. This practice keeps the commit history clean and easy to follow, especially when working on a real-world project with potentially thousands of PRs & millions of commits.
Use Git Hooks to automate the process: A brief overview of Git Hooks - Git can fire off custom scripts when certain actions occur, this can be used to automate the process of linting, formatting, testing, and even check whether the commit message follows a certain format. This will help you maintain the quality of the commits seamlessly without requiring manual intervention. You can check out one of my older articles on how to set up Git Hooks with Husky

Conclusion

Now you are well-versed with the commandments of the Holy Git Bible & would easily be able to sniff out bad commits from miles away!

NOTE: Git Bible is a fictional book - resemblance to any real book is purely coincidental & unintended

That's all folks! 🎉

Thanks for reading

Need a Top Rated Software Development Freelancer to chop away your development woes? Contact me on Upwork

Want to see what I am working on? Check out my Personal Website and GitHub

Want to connect? Reach out to me on LinkedIn

Follow my blogs for bi-weekly new Tidbits on Medium

FAQ

These are a few commonly asked questions I receive. So, I hope this FAQ section solves your issues.

I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles:
Would you mentor me?

Sorry, I am already under a lot of workload and would not have the time to mentor anyone.

7 More JavaScript Web APIs to Build Futuristic Websites you didn't Know 🤯

Tapajyoti Bose — Sun, 25 Jun 2023 06:36:57 +0000

Welcome back to the future! This is the second article on futuristic JavaScript Web APIs, so if you haven't read the first one, you are recommended to do so here

Here are the 7 more cutting-edge JavaScript Web APIs to add an enchanting touch to your projects to make users part with their money 💰

1. Web Speech

The Web Speech API enables you to incorporate voice data into web apps. The Web Speech API has two parts: SpeechSynthesis (Text-to-Speech), and SpeechRecognition (Asynchronous Speech Recognition)

// Speech Synthesis
const synth = window.speechSynthesis;
const utterance = new SpeechSynthesisUtterance("Hello World");
synth.speak(utterance);

// Speech Recognition
const SpeechRecognition =
  window.SpeechRecognition ?? window.webkitSpeechRecognition;

const recognition = new SpeechRecognition();
recognition.start();
recognition.onresult = (event) => {
  const speechToText = event.results[0][0].transcript;
  console.log(speechToText);
};

NOTES

Even though Speech Synthesis is supported by all major browsers with 96% coverage, Speech Recognition is still a bit early to use in production with only 86% coverage.
The API CANNOT be used without the user interaction (eg: click, keypress, etc).

2. Page Visibility

The Page Visibility API allows you to check if the page is visible to the user or not. This is useful when you want to pause a video.

There are 2 methods to perform this check:

// Method 1
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") {
    document.title = "Visible";
    return;
  }
  document.title = "Not Visible";
});

// Method 2
window.addEventListener("blur", () => {
  document.title = "Not Visible";
});
window.addEventListener("focus", () => {
  document.title = "Visible";
});

The difference between the two methods is that the second one will be triggered if you switch over to another app OR a different tab, while the first one will be triggered only if you switch over to another tab.

3. Accelerometer

The Accelerometer API allows you to access the acceleration data from the device.

This can be used to create games that use the device's motion control or add interaction if the user shakes the device, the possibilities are endless!

const acl = new Accelerometer({ frequency: 60 });

acl.addEventListener("reading", () => {
  const vector = [acl.x, acl.y, acl.z];
  const magnitude = Math.sqrt(vector.reduce((s, v) => s + v * v, 0));
  if (magnitude > THRESHOLD) {
    console.log("I feel dizzy!");
  }
});

acl.start();

You can ask for Accelerometer permission using:

navigator.permissions.query({ name: "accelerometer" }).then((result) => {
    if (result.state === "granted") {
      // now you can use accelerometer api
    } 
  });

4. Geo-location

The Geolocation API allows you to access the user's location.

This can be extremely useful if you are building anything related to maps or location-based services.

navigator.geolocation.getCurrentPosition(({ coords }) => {
  console.log(coords.latitude, coords.longitude);
});

You can ask for Geolocation permission using:

navigator.permissions.query({ name: "geolocation" }).then((result) => {
    if (result.state === "granted") {
      // now you can use geolocation api
    } 
  });

5. Web worker

Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down.

// main.js
const worker = new Worker("worker.js");
worker.onmessage = (e) => console.log(e.data);
worker.postMessage([5, 3]);

// worker.js
onmessage = (e) => {
  const [a, b] = e.data;
  postMessage(a + b);
};

6. Resize Observer

The Resize Observer API allows you to observe the size of an element and handle the changes with ease.

It is exceptionally useful when you have a resizable sidebar.

const sidebar = document.querySelector(".sidebar");
const observer = new ResizeObserver((entries) => {
  const sidebar = entries[0];
  //Do something with the element's new dimensions
});
observer.observe(sidebar);

7. Notification

Ah, Notifications! The annoying little popups (or bubbles of dopamine, based on where you lie on the spectrum).

The Notification API, just as the name suggests, allows you to send notifications to annoy users (bundle it with the Page Visibility API to annoy them even more 😈)

Notification.requestPermission().then((permission) => {
  if (permission === "granted") {
    new Notification("Hi there!", {
      body: "Notification body",
      icon: "https://tapajyoti-bose.vercel.app/img/logo.png",
    });
  }
});

Side Note

Some of the APIs mentioned above are still in the experimental stage and are not supported by all browsers. So, if you want to use them in production, you should check if the browser supports them

For example:

if ("SpeechRecognition" in window || "webkitSpeechRecognition" in window) {
  // Speech Recognition is supported
}

That's all folks! 🎉

Thanks for reading

Need a Top Rated Software Development Freelancer to chop away your development woes? Contact me on Upwork

Want to see what I am working on? Check out my Personal Website and GitHub

Want to connect? Reach out to me on LinkedIn

Follow my blogs for bi-weekly new Tidbits on Medium

FAQ

These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.

I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles:
Would you mentor me?

Sorry, I am already under a lot of workload and would not have the time to mentor anyone.

7 Free Lifesaver Image Tools Every Frontend Developer Must Have In Their Arsenal 🛠️🚀

Tapajyoti Bose — Sun, 11 Jun 2023 06:37:40 +0000

Images are an integral part of every frontend developer's journey, shaping captivating digital experiences.

To conquer the challenges of working with images, here are 7 Lifesaver Tools tailored for your needs: from optimizing and resizing to background removal and finding royalty-free images, these tools will empower you to create stunning visuals effortlessly!

1. Online Photoshop web client:

Photopea is a powerful online image editing tool that brings the functionalities of Adobe Photoshop right to your web browser, that too for free!

So forget setting up Photoshop on your machine and start editing images right away!

2. Royalty free images

Finding high-quality, royalty-free images is a constant challenge for frontend developers.

If you are looking for resources that provide a vast collection of images that can be used in web projects without the need for complex licensing agreements or costly fees, here are my go-to ones:

Unsplash for nature and landscape images
Freepik for illustrations & facial expressions

3. Responsive image generator

Now that you have an image, you would want to optimize it for different devices.

In today's multi-device landscape, responsive design is crucial for frontend developers as all apps want to save bandwidth without compromising on the user experience.

Responsive Breakpoints addresses the need for device-optimized images effortlessly.

By automatically generating multiple versions of an image in different sizes, frontend developers can ensure that their websites or applications look stunning and load quickly on all devices without having to set up services like Cloudinary or Imagekit.

4. Background generator

Creating visually captivating backgrounds can elevate the overall look and feel of a website or application.

Background generation tools, like Bg-jar and Hero Patterns, simplify the process of designing unique and eye-catching backgrounds that suit their project's aesthetic.

5. Background remover

While backgrounds can make or break the visual appeal of an image, sometimes you just need to remove them altogether.

Remove Bg comes to the rescue, allowing frontend developers to effortlessly kiss the "background drama" goodbye with a few simple clicks.

Whether you want to create a clean and professional product shot or superimpose an object onto a different background, this tool is the way to go!

6. Image converter

Convertio is hands down the best convertor tool I encountered.

With support for 300+ formats, it makes converting not only images but also audio, video, documents, and more a breeze.

7. SVG tools

Scalable Vector Graphics (SVG) play a vital role in modern web design, offering flexibility and resolution independence.

Tools that I love using are:

Haikei for creating common SVG shapes
SVGOMG for optimizing SVG

That's all folks! 🎉

Thanks for reading

Need a Top Rated Software Development Freelancer to chop away your development woes? Contact me on Upwork

Want to see what I am working on? Check out my Personal Website and GitHub

Want to connect? Reach out to me on LinkedIn

Follow my blogs for bi-weekly new Tidbits on Medium

FAQ

These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.

I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles:
Would you mentor me?

Sorry, I am already under a lot of workload and would not have the time to mentor anyone.

7 VS Code Tricks you should Definitely Know 😍

Tapajyoti Bose — Sun, 28 May 2023 06:25:48 +0000

Want to be a VS Code Pro?

Here are 7 VS Code Tricks you should Definitely Know, which will undoubtedly take your productivity to the Moon 🚀🌕!

1. Sticky Scroll

Do you often get lost while scrolling through a long file?

Sticky Scroll to the rescue! It shows you the functions/class you are in at the top of the screen, so you never get lost again!

You can enable it by going to Settings and searching for Sticky Scroll.

Or if are a nerd at heart, add the following to your settings.json file:

"editor.stickySrcoll.enabled": true

2. Command Palette

Need to execute a command fast? Command Palette is there to help!

Just use the shortcut & select the command you need

Windows: Ctrl + Shift + P

Mac: Cmd + Shift + P

3. Custom Snippets

Find yourself rewriting the same code over and over and yet over again? With Custom Snippets you can automate that!

There are dedicated articles on how to write your own snippets.

You can find them here: https://dev.to/ruppysuppy/how-pros-automate-repetitive-code-using-vs-code-53b

4. File Finder

Just like the Command Palette, Go to File is a handy feature to quickly open a file.

Here are the shortcuts:

Windows: Ctrl + P

Mac: Cmd + P

5. Insider Version

Did you know you can try out the latest features of VS Code before they are released?

The Insiders version is updated every day with the latest features, and you can download it from here: https://code.visualstudio.com/insiders/

6. Go to Symbol

Go to Symbol is another handy feature to quickly jump to a function/class in a file.

Windows: Ctrl + Shift + O

Mac: Cmd + Shift + O

7. Check out file changes

By default VS Code ships with a timeline feature, which shows you all the changes you have made to a file.

No more scrambling through git logs to find out what was changed!

That's all folks! 🎉

Thanks for reading

Need a Top Rated Software Development Freelancer to chop away your development woes? Contact me on Upwork

Want to see what I am working on? Check out my Personal Website and GitHub

Want to connect? Reach out to me on LinkedIn

Follow my blogs for bi-weekly new Tidbits on Medium

FAQ

These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.

I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles:
Would you mentor me?

Sorry, I am already under a lot of workload and would not have the time to mentor anyone.

7 Secret TypeScript Tricks Pros Use 😎🤫

Tapajyoti Bose — Sun, 14 May 2023 06:15:36 +0000

TypeScript is an outstanding tool to make our lives easier & avoiding bugs, yet sometimes feels overwhelming to use.

This article outlines 7 TypeScript tricks that will make your life easier which all pros use.

1. Type Inference

Typescript is smart enough to infer the data types when you help it narrow them down.

enum CounterActionType {
  Increment = "INCREMENT",
  IncrementBy = "INCREMENT_BY",
}

interface IncrementAction {
  type: CounterActionType.Increment;
}

interface IncrementByAction {
  type: CounterActionType.IncrementBy;
  payload: number;
}

type CounterAction =
  | IncrementAction
  | IncrementByAction;

function reducer(state: number, action: CounterAction) {
  switch (action.type) {
    case CounterActionType.Increment:
      // TS infers that the action is IncrementAction
      // & has no payload
      return state + 1;
    case CounterActionType.IncrementBy:
      // TS infers that the action is IncrementByAction
      // & has a number as a payload
      return state + action.payload;
    default:
      return state;
  }
}

As shown above, TypeScript infers the type of the action based on the type property, so you DON'T need to check whether payload exists.

2. Literal Types

Often you need specific values for a variable, that's where literal types come in handy.

type Status = "idle" | "loading" | "success" | "error";

It works for numbers too:

type Review = 1 | 2 | 3 | 4 | 5;

// or better yet:
const reviewMap = {
  terrible: 1,
  average: 2,
  good: 3,
  great: 4,
  incredible: 5,
} as const;

// This will generate the same type as above,
// but it's much more maintainable
type Review = typeof reviewMap[keyof typeof reviewMap];

3. Type Guards

Type guards are another method to narrow down the type of a variable:

function isNumber(value: any): value is number {
  return typeof value === "number";
}

const validateAge = (age: any) => {
  if (isNumber(age)) {
    // validation logic
    // ...
  } else {
    console.error("The age must be a number");
  }
};

NOTE: In the example above, it's better to use:

const validateAge = (age: number) => {
  // ...
};

The example was a simplification to show how type guards work.

4. Index Signature

When you have dynamic keys in an object, you can use an index signature to define its type:

enum PaticipationStatus {
  Joined = "JOINED",
  Left = "LEFT",
  Pending = "PENDING",
}

interface ParticipantData {
  [id: string]: PaticipationStatus;
}

const participants: ParticipantData = {
  id1: PaticipationStatus.Joined,
  id2: PaticipationStatus.Left,
  id3: PaticipationStatus.Pending,
  // ...
};

5. Generics

Generics are a powerful tool to make your code more reusable. It allows you to define a type that will be determined by the use of your function.

In the following example, T is a Generic type:

const clone = <T>(object: T) => {
  const clonedObject: T = JSON.parse(JSON.stringify(object));
  return clonedObject;
};

const obj = {
  a: 1,
  b: {
    c: 3,
  },
};

const obj2 = clone(obj);

6. Immutable Types

You can make your types immutable by adding as const. This ensures that you don't end up accidentally changing the values.

const ErrorMessages = {
  InvalidEmail: "Invalid email",
  InvalidPassword: "Invalid password",
  // ...
} as const;

// This will throw an error
ErrorMessages.InvalidEmail = "New error message";

7. Partial, Pick, Omit & Required Types

Often while working with server & local data, you need to make some properties optional or required.

Instead of defining hundreds of interfaces with slightly altered versions of the same data. You can do that using Partial, Pick, Omit & Required types.

interface User {
  name: string;
  age?: number;
  email: string;
}

type PartialUser = Partial<User>;
type PickUser = Pick<User, "name" | "age">;
type OmitUser = Omit<User, "age">;
type RequiredUser = Required<User>;

// PartialUser is equivalent to:
// interface PartialUser {
//   name?: string;
//   age?: number;
//   email?: string;
// }

// PickUser is equivalent to:
// interface PickUser {
//   name: string;
//   age?: number;
// }

// OmitUser is equivalent to:
// interface OmitUser {
//   name: string;
//   email: string;
// }

// RequiredUser is equivalent to:
// interface RequiredUser {
//   name: string;
//   age: number;
//   email: string;
// }

And of course, you can use intersection to combine them:

type A = B & C;

Where B & C are any types.

That's all folks! 🎉

Resources used

Thanks for reading

Need a Top Rated Software Development Freelancer to chop away your development woes? Contact me on Upwork

Want to see what I am working on? Check out my Personal Website and GitHub

Want to connect? Reach out to me on LinkedIn

Follow my blogs for bi-weekly new Tidbits on Medium

FAQ

These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.

I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles:
Would you mentor me?

Sorry, I am already under a lot of workload and would not have the time to mentor anyone.

What I learned from 2 years of freelancing 🤫💰

Tapajyoti Bose — Sun, 30 Apr 2023 01:52:46 +0000

Ah freelancing, the dream of working from anywhere in the world, being your own boss, and making a ton of money. It's a life numerous people dream of. I started freelancing in May 2021 & never looked back.

In one year, I became one of the top 3% of freelancers on the planet (as a Top Rated Plus Freelancer on Upwork) & I have already gone through the highest of highs & lowest of lows of freelancing.

Let's discuss some of the pros & cons of freelancing I found out the hard way.

Pros

Let's start off with the mindblowing pros that come with freelancing!

1. Money, money & some more money

If you DON'T reside in one of the developed countries, you are in for an incredible surprise my friend, as you can make a ton of money relatively easily by freelancing!

Of course, you need to have the skills to justify what you charge, but due to geographical arbitrage (a fancy term for earning in a strong currency & spending in a weak currency), you can make a lot of money.

Earning $60/hour might be classified as poor in New York, US, but in India, it's mind-numbing money & can easily land you in the top 0.1% earners in the country.

2. Freedom to work from anywhere

There is unparallel freedom in working as a freelancer: you are not bound at any particular location while working. All you need is a laptop & an internet connection and you are golden.

As long as you can deliver quality work on time, nobody cares where you work.

So the next time you feel bored, you can pack your bags & head to Bali for thrills with minimal bills!

3. Freedom to work any time

As a cherry on top of the location freedom, you also have time freedom: you get to choose when you work & how long you work!

Most clients would allow you to work according to your schedule as long as you deliver.

Regardless of whether you are a part of the 5 AM club or the 5 PM club, there is always something for you!

Cons

Getting started with freelancing already? Hold your horses!

It is NOT all rainbows and sunshine. Let's now explore the cons that come with freelancing!

1. With great money comes great responsibility

Financial Education

This is the most important life skill, which is taught in no school.

For example, since you don't have a company to replace your work laptop when it's damaged, you need to be prepared for such unforeseen expenses, as NOT replacing a malfunctioning laptop can potentially take you out of business.

Even though such expenses are expected to be rare, you never know when they would hit & can put a significant dent in your finances.

Taxes

Rules of money change when you cross a specific threshold as a business owner. While the threshold varies from country to country, in India it is ₹20L (₹2M) & again at ₹50L (₹5M).

Assuming you are NOT working as a professional Chartered Accountant or Tax Attorney, you will need to hire one to help you out with your taxes.

The last thing you want is being slapped with a huge tax bill at the end of the year, just because you didn't know how to do it correctly.

2. You trade one boss for a platoon of bosses

Being your own boss is a myth. It is true that as a freelancer, you DO NOT have one single boss, but you are answerable to each and every one of your clients.

When things go south, there is NO ONE holding your hand through the mess. Mostly, you are expected to figure it out & come up with a solution on your own, which can be a tad overwhelming at times.

3. Office life gives you FOMO

This might be my personal experience, but never having worked at an office, I feel like I am missing out on meeting people, making friends, and attending corporate events.

As a freelancer, you have to create your own opportunities to socialize, regardless of whether you work at a co-working place or talk to random strangers on the street (which is quite unwelcome in quite a few pockets of the world).

You might be thinking, I am an introvert & don't care about socializing, but the 2020 pandemic must have shown you even if you identify yourself as one, you still need to interact with people to remain sane.

Even if you are offered multiple job opportunities, you can't take them on as they do not make sense from a financial perspective.

Conclusion

So now we are down to the big question: should you freelance?

Well, even though my experience was mostly positive, I would encourage you to weigh the pros & cons and test out the freelancing waters.

One big caveat of freelancing is you absolutely must have a monetizable skill! Unless you can solve someone else's woes, nobody is going to pay you.

With that said, I wish you the best of luck if you want to try freelancing!!!

Have you ever tried freelancing before? Or are you planning to get started? Let me know in the comments below!

Thanks for reading

Need a Top Rated Software Development Freelancer to chop away your development woes? Contact me on Upwork

Want to see what I am working on? Check out my Personal Website and GitHub

Want to connect? Reach out to me on LinkedIn

Follow my blogs for bi-weekly new Tidbits on Medium

FAQ

These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.

I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles:
Would you mentor me?

Sorry, I am already under a lot of workload and would not have the time to mentor anyone.

Forem: Tapajyoti Bose

Sell yourself as a developer - creating a personal brand 🚀💼✨

What is branding?

Building a personal brand

Know your strengths

Eliminate or work on your weaknesses

Define your target audience

Getting noticed

Conclusion

Thanks for reading

9 tricks that separate a pro Typescript developer from an noob 😎

1. Type inference

2. Literal types

3. Enums

4. Type guards

5. Index Signatures and Records

6. Generics

7. Immutable types

Using Readonly for objects

Using ReadonlyArray for arrays

Deep immutability

8. Utility types

9. Union & Intersection types

Wrapping up

Thanks for reading

7 skill you must know to call yourself HTML master in 2025 🚀

1. Semantic HTML

2. Lazy loading assets

3. Preloading assets

4. Custom link previews

5. Make a call or send an email

6. Responsive images

7. Preformatted text

Thanks for reading

11 Interview Questions You Should Know as a React Native Developer in 2025 📈🚀

1. How does React Native achieve native-like performance?

Direct native rendering

Native threads

Optimized UI updates

2. What is the role of the bridge in React Native?

3. What is the new architecture in React native?

Fast typing in a controlled input using the new architecture

Fast typing in a controlled input using the old architecture

4. What are the differences between using React Native CLI vs Expo?

5. Explain the role of managed and bare workflows in Expo.

6. How to style a component in React Native?

Inline styles

CSS-in-JS Modules (Styled Components)

React Native StyleSheet

7. How do you handle platform-specific code in React Native?

Platform.OS

Platform.select

Platform-specific file extensions

8. What is the difference between Flatlist and Scrollview when would you use one over the other?

9. What is the use of Native modules in React Native?

10. What are the benefits of React Native?

11. What are the limitations of React Native?

Thanks for reading

17 React Interview Questions You Must Know as a Developer in 2025

1. What is the React Virtual DOM? How is it different from the real DOM & Shadow DOM?

2. What are the 2 types of components in React? Where should we use them?

3. Why do we need keys in React? Can we use keys without lists in React?

4. Difference between controlled and uncontrolled input in React

5. Why do we need to transpile JSX code?

6. How does JSX prevent injection attacks?

7. How can we add styling to React components?

CSS Files

Inline CSS

CSS-in-JS Modules (Styled Components, Emotion, and Styled-jsx)

CSS Modules

8. What are synthetic events in React?

9. What is the strict mode in React?

10. How to gracefully handle errors in React?

11. What are the rules of React Hooks?

12. How to handle the common lifecycle methods in React Functional Components?

13. What are refs in React?

14. What is prop drilling in React? How can we avoid it?

15. Describe some of the optimization techniques in React

Using memoization

Lazy Loading

Using `Readonly` for objects

Using `ReadonlyArray` for arrays