DEV Community: Harshil Parmar

Demystifying Frontend System Design Interviews: Insider Tips and Practical Advice

Harshil Parmar — Tue, 11 Jul 2023 16:48:05 +0000

Introduction:
Frontend system design interviews are relatively new compared to backend system design. In these interviews, several key pillars are assessed to evaluate a candidate's abilities:

Communication
Problem-solving
Decision making
Collaboration
Identifying context

Tips for Frontend System Design Interviews:

Understand and clarify requirements before proposing a solution. Take the time to grasp the requirements and context thoroughly. This showcases your problem-solving mindset.
Fulfill essential requirements before diving into details. For LLD (low-level design) questions, focus on specific components, responsibilities, state management, and API design (Look at it as how you want data from the backend). For HLD (high-level design) questions, approach the problem step by step, considering available resources and utilizing helpful online design resources (links provided below).
Check whether you are on right track by asking for feedback in middle of the conversation.
Be conscious to take hints. Sometimes you are going totally off track but you have to be ready to accept hints.
Engage in a conversation rather than treating it strictly as an interview.
Utilize online whiteboard tools (such as Exlidraw or Zoom Whiteboard) if they are part of the interview process.
Propose alternative approaches whenever possible.
Take a bird's eye view of the problem initially and zoom in as needed during the discussion. Keep in mind that a 45-minute interview may not cover all aspects, but aim to touch on concepts like accessibility, optimization, security, and reliability.

To find more resources on frontend system design, please refer to the first comment of my original LinkedIn post.

Harshil Parmar on LinkedIn: #frontend #systemdesign #interviewtips #learning

#frontend #systemdesign #interviewtips #learning Hey Guys, I have been giving interviews for the last 3 months. In between, I also got a chance to give…

linkedin.com

Conclusion:
By following these tips and utilizing available resources, you can better prepare for frontend system design interviews. Remember to approach the conversation with confidence, actively participate, and demonstrate your understanding of key design principles.

When to use forceUpdate() in React ⚛

Harshil Parmar — Mon, 01 Feb 2021 17:21:39 +0000

As the name suggests FORCE 🏋🏼‍♀️ is any interaction that, when unopposed, will change the motion of an object (from Wikipedia).

Force is something that we apply to things that are not usually intended to do. We have to use force smartly It could also harm you.

You will not encounter to use this react API usually. But I am writing this blog because I just used this at my work. And this article gives you a hint that where you can use forceUpdate. There are so many things in tech which you will not use in day to day life but you have to learn by which it will click into your mind 💡 whenever you truly need.

Disclaimer: Don't use forceUpdate until and unless you know what you are doing. As react suggest use state or props which will automatically handle all renders.

What is forceUpdate

In react, components will automatically re-render themselves when props or state change.
However, there are some scenarios in which render depends on some other data in which We have to tell react to re-render component forcefully.

For this There is an API in react called forceUpdate().

Whenever you call forceUpdate on any component react will re-render and skip shouldComponentUpdate life cycle method because it could be a reason to prevent render in the component. For child components react will not prevent any method on them.

Why not to use

React skip shouldComponentUpdate life cycle method which eventually affects the performance especially in PureComponent
It is an anti-pattern.
Harder to maintain (You can understand but your colleagues don't 😑or future developers).
It's harder to predict the next state.
Pollute the previous state value so can't use of shouldComponentUpdate/componentWillUpdate/componentDidUpdate for comparison.

Implementation

As we all moved to functional component from class component unfortunately there is no such direct react API which will provide us force re-renders.

But We can achieve the same functionality by using the useState hook. There are also some different approaches to this you can check here.

Let's jump into an example.

Example

Consider a problem in which we have table data and with each click of table row, we have to get some other details based on that row data.

Let's see the full code first

Here We have table data

const data = [
  {
    company: "Alfreds Futterkiste",
    contact: "Maria Anders",
    country: "Germany"
  },
  {
    company: "Centro comercial Moctezuma",
    contact: "Maria Anders",
    country: "Mexico"
  }
];

Looping through this and make a table is not a big deal if you are familiar with react.
But as you can see we have to expand and collapse the table row and inject data that we don't currently have (This is my approach to deal with this problem. You can suggest me another approach in the comments 🤗).

If you have some knowledge about react it uses the concept of functional programming. And due to this, we should follow the rule of immutability. Which you can't be modified after being instantiated.

Here react will not re-render itself by changing table data object directly. And finally, here we can use force update or useState as I showed in code. It will tell react to re-render the component.

const [state, setState] = useState(0);

 const handleClick = (index) => {
    const updatedState = data[index];

    if (updatedState.other) {
      delete updatedState.other;
      setState((pre) => {
        return pre + 1;
      });
    } else {
      updatedState.other = {
        description: "Hello there"
      };
      setState((pre) => {
        return pre + 1;
      });
    }
  };

handleClick is an event handler that takes clicked row index and mutates table data object. Here useState works as forceUpdate.I have simply used counter which will set a new incremental state after every setstate.

Thanks for reading. Thanks, me when it clicks in the future 🤝.

How to use Chart.js in React

Harshil Parmar — Tue, 22 Dec 2020 08:42:26 +0000

The purpose of this tutorial is to show how to use ChartJS in React. In this tutorial, a small activity logging system is created from scratch. Based on the activity logged and hours spent, the user will be able to see the relevant chart formed on the screen. At the end of this tutorial, learners will get the basic understanding of ChartJS with React.

Demo

https://harshilparmar.github.io/React-Chart-Tutorial/

How will it work ?

The app will work according to given steps,

Enter activity & hours spent
Press Submit or Add another activity
Charts will be shown(based on the activity & hours logged)

Flow of the web application is shown below:

Prerequisites:

To develop the Activity Logging System, we need to use few things.
Those are,

Install Node
Install VSCode
Install React
Install Chart
Install Bootstrap (optional)

Let’s walk through each of them,

Download Node:
To download node
Install VSCode:
You can visit here to download VSCode according to your OS.
Install react:
To install react on your machine, please run

npx create-react-app my-app

,

You can visit here for official documentation.
Install Chart-js:

npm install react-chartjs-2 chart.js

You can visit here.
Install Bootstrap:

npm i bootstrap

You can visit here.

Development:

Folder Structure

Styling in React

There are various technics to style react application.We have used CSS Modules style.
There is a separate style file for each component component-name.module.css.
We can easily use that by importing them in js/jsx file and access that by className={styles.form}.

For more details,you can visit below links:

Form component (Form.jsx)

Form in React

To make form in react, we have to make states which store local values and change it according to user-inputs.
For Function component we can use useState hook to make state.

const initialState = {
  dailyData: [
    {
      activity: "",
      timeSpent: 0,
    },
  ],
  chartLabels: [],
  chartData: [],
  chartColot: [],
};

By following above code snippets, we can initialize state.

const [state, setstate] = useState(initialState);

Here initial state will become initial value for our form field.

{state.dailyData.map((data, index) => (
          <Fragment key={index}>
            <div className="row">
              <div className="col">
                <input
                  type="text"
                  name="activity"
                  value={data.activity}
                  className="form-control"
                  onChange={(e) => onChange(e, index)}
                  placeholder="Activity"
                />
              </div>
              <div className="col">
                <input
                  type="number"
                  name="timeSpent"
                  value={data.timeSpent}
                  className="form-control"
                  onChange={(e) => onChange(e, index)}
                  placeholder="Time Spent"
                />
              </div>
            </div>
            <br />
          </Fragment>
        ))}

There are two fields in our form:

Activity
Time spent during that activity (in hour)

Each field has value property which is linked to state for showing current value of state in a form.

const onChange = (e, index) => {
    let { name, value } = e.target;

    let updatedState = [...state.dailyData];

    updatedState[index][name] = value;

    setstate((previousState) => {
      return {
        ...previousState,
        dailyData: [...updatedState],
      };
    });
  };

Onchange event of form will be handle by onChange handler.It will take event object and index of current changed activity.
For that we can use setState method.
For setting state we have to extract name and value from event object.
Here updatedState is temporary variable for mutating state.

For more details,you can visit: https://reactjs.org/docs/forms.html

Add Dynamic form field

       <button
          type="button"
          style={{ marginRight: "25px" }}
          name="addNew"
          onClick={addExtraField}
          className="btn btn-outline-success"
         >
          Add Activity
       </button>

To add an extra activity field we have to click a button which will add a new field to current form.

const addExtraField = (e) => {
    let extraActivity = [
      ...state.dailyData,
      {
        activity: "",
        timeSpent: 0,
      },
    ];

    setstate((previousState) => {
      return {
        ...previousState,
        dailyData: [...extraActivity],
      };
    });
  };

On every onClick event, addExtraField method will be called and set state after pushing new property to dailyData array.

Pass data to Chart

To pass current data to chart, we have to convert data in a specific format (array).
For that we use submit button to convert current state data to specific format. On every submit button click onSubmit method will be called.

const onSubmit = (e) => {
    e.preventDefault();
    let chartLabels = state.dailyData
      .map((data) => {
        return data.activity;
      })
      .filter((e) => e);
    let chartData = state.dailyData
      .map((data) => {
        return parseInt(data.timeSpent);
      })
      .filter((e) => e);

    setstate((previousState) => {
      return {
        ...previousState,
        chartData: chartData,
        chartLabels: chartLabels,
      };
    });
  };

Here, we have to convert state object to array using map method of array.
And after that we have to set that data to current state.

For passing data to chart component we have to check data availability for that we have to use conditional rendering.

{state.chartData.length && state.chartLabels.length ? (
        <Chart {...state} />
      ) : null}

Chart will only be rendered if there is a proper data to be passed to the chart.

For more details,you can visit: https://reactjs.org/docs/conditional-rendering.html

Chart Component (Chart.jsx)

To make charts, we have to use react react-chartjs-2 which is wrapper for Chart.js.
For this tutorial we will make three types of charts Line,Pie,Bar.
For more details,you can visit below links:

In every chart we have to pass prop object.

<Line
          data={{
            labels: props.chartLabels,
            datasets: [
              {
                data: props.chartData,
                label: "Activity",
                borderColor: "#3333ff",
                fill: true,
                backgroundColor: "#CAA6DB",
              },
            ],
          }}
        />

Here labels are those activities which we have been passed from Form component.
Datasets have various properties in which data property take data which we have to plot on chart.
For more details,you can visit below links:

To convert This chart to Bar chart we simply have to import Bar chat from react-chartjs-2 library.

<Bar
        data={{
          labels: props.chartLabels,
          datasets: [
            {
              data: props.chartData,
              label: "Activity",
              borderColor: "#3333ff",
              fill: true,
              backgroundColor: colorPicker.map(() => colorPicker[Math.round(Math.random() * 2)])
              ,
            },

          ],
        }}
      />

And same for pie chart

<Pie
        data={{
          labels: props.chartLabels,
          datasets: [
            {
              data: props.chartData,
              label: "Activity",
              borderColor: "#3333ff",
              fill: true,
              backgroundColor: colorPicker.map(() => colorPicker[Math.round(Math.random() * 2)])
              ,
            },
          ],
        }}
      />

For other examples of chart you can refer
http://jerairrest.github.io/react-chartjs-2/#/

Here colorPicker is an array which we are using to generate random colors for charts colorPicker.map(() => colorPicker[Math.round(Math.random() * 2)]).

Summary:

In this tutorial, you learnt how to show data in the form of charts using react.

Points covered:

Add new input fields to react app dynamically.
You can customise the look and feel of charts.
Real time data representation in form of charts.
Give random colors to the charts.
Styling of input fields and buttons using Bootstrap.

Future scopes:

You can create charts for large data sets using react.
You can create a Task Management System for an organization/school/universities.
Customise charts to represent data in a more visually appealing way.

Motivation behind the tutorial

I and my friend (Kathan Trivedi) had taken part in the Facebook Community challenge 2020 https://developercircles2020.devpost.com/ .In which we had to make a basic tutorial about any facebook technology.

Hope It helps.