🚀 React Interview Experience (August 2025): Airtel (Part- 1)

Overview

This document outlines a React developer interview experience, providing insights into the types of questions asked and expected solutions. The interview focused on core JavaScript concepts, React component creation, and problem-solving abilities. This serves as a guide for developers preparing for frontend interviews.

Interview Rounds

The interview process included questions covering various aspects of JavaScript and React. Below are some of the key questions and their solutions:

Q1: Implement a flipping card component in React.

The candidate was asked to create a React component that displays a card with a front and back side, flipping on click to reveal different content. The provided solution uses React's useState hook to manage the flipped state and CSS transitions for the flipping animation.

import { useState } from "react";
import "./styles.css";

const Card = () => {
  const [flipped, setFlipped] = useState(false);

  const handleFlip = () => {
    setFlipped(!flipped);
  };

  return (
    <div className={`card ${flipped ? "flipped" : ""}`} onClick={handleFlip}>
      <div className="card-inner">
        <div className="card-front">
          <h2>Card Title</h2>
          <p>Click to see offer!</p>
        </div>
        <div className="card-back">
          <h2>Special Offer</h2>
          <p>Get 50% off!</p>
        </div>
      </div>
    </div>
  );
};

export default function App() {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        height: "100vh",
        backgroundColor: "#f8f9fa",
      }}
    >
      <Card />
    </div>
  );
}

// styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.card {
  width: 200px;
  height: 200px;
  cursor: pointer;
  perspective: 1000px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card.flipped .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  border: 1px solid black;
  border-radius: 20px;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: rgb(3, 3, 3);
}

.card-front {
  background-color: rgb(228, 203, 173);
}

.card-back {
  background-color: rgb(241, 174, 74);
  transform: rotateY(180deg);
}

Q2: Write polyfills for reduce.

The candidate was asked to implement a polyfill for the Array.prototype.reduce method. The provided solution checks if the method already exists and, if not, defines a custom implementation.