🚀 My Viacom18 [JioCinema] Frontend Engineer Interview Experience (2025) | SDE II - Frontend Web

💼 Position Applied: SDE II - Frontend Web
🏢 Company: Viacom18 [JioCinema]
📍 Location: Bangalore [Hybrid]
💰 Compensation: 38 LPA Fixed + Some ESOPs
🧠 Primary Skills: JavaScript, React, TypeScript, Data Structures, Performance Optimization
🎯 Final Outcome: Received Offer (Did not join, got better offer from other firm)

🏢 About Viacom18 [JioCinema]

Viacom18 Media Private Limited is a Mumbai-based media company; it is a joint venture between Network18 Group, a subsidiary of Reliance Industries, and Paramount Global. It was founded in 2007 and owns various channels, as well as content production studios in India.

👥 Round 1: DSA + Web Fundamentals

This round was a balanced mix of frontend fundamentals, OOPs in JS, CSS visibility tricks, and a hands-on DOM-based problem. The interview lasted around 50–60 minutes and was very structured yet friendly.

🔵 1. What are the SOLID Principles?

These are five design principles that help software developers build scalable, maintainable, and readable systems:

🧠 JavaScript Context:
While JS is not class-based traditionally, we apply these principles in React components, services, and custom hooks to separate concerns and encourage testability.

🔵 2. How Do We Use OOPs in JavaScript?

Despite being a prototype-based language, JavaScript supports OOP concepts:

✅ We use:

• Classes & Constructors
• Encapsulation via closures or private fields (#field)
• Inheritance via extends
• Polymorphism using method overriding

📌 React Class Components earlier used OOP directly, now functional components + hooks dominate.

🔵 3. Give a Real-Life OOP Example in Your React App

❓ Asked to describe real-world use of OOP in production code.

🔹 In a React App for portfolio management:

• I had a base ChartWidget class, and different chart types (LineChart, BarChart, etc.) extended it using composition.
• Used encapsulation to manage state logic inside the widgets.
• Hooked into external chart libraries (like Chart.js) using OOP-inspired patterns for reusability.

🔵 4. What are Semantic HTML Elements?

Semantic HTML elements are tags that convey meaning about the structure of the webpage:

🧠 SEO & Accessibility Bonus – Using these elements improves:

• Google’s understanding of page layout
• Screen reader navigation

🔵 5. What is srcSet in HTML?

srcSet in <img> helps deliver responsive images:

<img 
  src="small.jpg"
  srcset="medium.jpg 768w, large.jpg 1200w"
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Responsive Image"
/>

✅ Browser chooses the best image based on screen size and resolution.
✅ Enhances performance on mobile or retina devices.

🔵 6. Difference Between display: none and visibility: hidden

🎯 Use Cases:

• Use display: none for full removal (like closing a modal).
• Use visibility: hidden when toggling without shifting the layout.

🧩 7. Hands-On Problem (CSS/DOM)

✅ Create two boxes using Vanilla JS, one inside the other. Then hide the middle box using CSS only.

💻 Code Implementation:

<!-- HTML structure -->
<div class="outer-box">
  Outer Box
  <div class="middle-box">
    Middle Box
    <div class="inner-box">Inner Box</div>
  </div>
</div>

/* Basic styling */
.outer-box {
  padding: 20px;
  border: 2px solid blue;
  margin: 10px;
}

.middle-box {
  padding: 20px;
  border: 2px solid green;
  margin: 10px;

  /* ✅ Hide the middle box only */
  display: none;
}

.inner-box {
  padding: 20px;
  border: 2px solid red;
  margin: 10px;
}

// ✅ DOM Creation via Vanilla JS
const outerBox = document.createElement("div");
outerBox.className = "outer-box";
outerBox.textContent = "Outer Box";

const middleBox = document.createElement("div");
middleBox.className = "middle-box";
middleBox.textContent = "Middle Box";

const innerBox = document.createElement("div");
innerBox.className = "inner-box";
innerBox.textContent = "Inner Box";

// Append DOM hierarchy
middleBox.appendChild(innerBox);
outerBox.appendChild(middleBox);
document.body.appendChild(outerBox);

✅ Summary & Takeaways:

• This round was deeply frontend-focused, testing practical knowledge of HTML/CSS, OOP patterns in JS, and coding confidence in DOM creation.
• Viacom18 seems to care about clean code, best practices, and real-life application of frontend principles.
• Expect questions where you explain and demonstrate what you've done in projects.

💡 Interview Tips:

✅ Brush up on:

• CSS layout behaviors
• OOP in JS and React design patterns
• DOM manipulation without libraries
• Use devtools to inspect layout changes (e.g., display vs visibility)

🔧 Round 2: System Design — Internal Carousel Configuration Tool

This round evaluated my ability to design and structure frontend systems, particularly for an internal CMS-type interface and its external consumption.

🛠️ Problem Statement:

Design a system to configure and manage carousel cards used across multiple frontend surfaces (e.g., web/mobile).
The focus was on both:

• Admin-side: Configuration and management
• User-side: Rendering and consuming it responsively and efficiently

✍️ Admin Panel Requirements:

I was expected to identify key fields required to manage carousels effectively. Here's what I proposed:

{
  "carouselId": "homepage_featured_1",
  "title": "Trending Stocks",
  "cards": [
    {
      "id": "card_001",
      "title": "Stock A",
      "description": "Hot pick of the day",
      "imageUrl": "https://...",
      "category": "Technology",
      "cta": {
        "text": "Buy Now",
        "link": "/buy/stock-a"
      },
      "order": 1
    }
  ],
  "deviceVisibility": ["desktop", "mobile"],
  "startDate": "2024-07-01",
  "endDate": "2024-07-31",
  "priority": 1
}

✅ Fields discussed:

• title, description, imageUrl, cta
• category, priority, and deviceVisibility
• startDate & endDate for scheduling
• order or sequence number to maintain the arrangement

🎯 Frontend Implementation Challenges (User-side)

I had to consume this configuration JSON and render an optimized carousel component that works well on:

• ✅ Desktop
• ✅ Mobile (touch/swipe)
• ✅ Tablets

We discussed:

• Component modularity: Making reusable card & carousel components
• Responsive UI: Using media queries, breakpoints, and conditional logic
• Touch support: Swiping with react-swipeable, react-slick, or a custom hook
• Lazy loading images and cards for performance
• Memoization using React.memo / useMemo to avoid re-renders

📈 Performance Optimizations

Key points I brought up:

• 🎯 Virtualization (e.g., react-window for large carousels)
• 🕵️‍♂️ Lazy loading & preloading important assets
• ⚙️ Debounced resize listeners and custom useWindowSize hooks
• 🧠 Data normalization for efficient rendering

🔐 Web Security Aspects

I discussed:

• Escaping HTML content from the backend
• Preventing XSS via sanitization
• Content-Security-Policy (CSP) headers
• Validating CTA links to prevent misuse

⚙️ System Design Considerations

✅ Suggested storing configurations in a CMS or JSON-driven backend, using:

• contentId keys for cache management
• REST or GraphQL APIs to serve frontend-specific data
• Versioning support for A/B testing carousels
• Feature toggles to roll out content gradually

💡 Bonus JavaScript Notes:

// Example: useMemo + useCallback for Carousel items
const memoizedCards = useMemo(() => {
  return data.cards.sort((a, b) => a.order - b.order);
}, [data]);

const handleClick = useCallback((card) => {
  trackClick(card.id); // analytics hook
  navigate(card.cta.link);
}, []);

✅ Interviewer Feedback:

They appreciated:

• 🎯 My structured breakdown of both admin vs. user concerns
• 🔍 Attention to performance + responsiveness
• 💬 Good handling of security and versioning

🔚 Final Round: Hiring Manager + System Design Discussion

In my final interview round at Upstox, I had an in-depth discussion with the Engineering Manager, focusing on my real-world project experience, system design thinking, and motivation for the role.

💼 1. Project Discussion — Jio OTT Platform Experience

The conversation began with my past work, especially my contribution to Jio’s OTT (Over-The-Top) platform, which involved:

• 🚀 Web Performance Optimization
  I discussed improving:
  • Core Web Vitals: LCP, FID, CLS
  • Lighthouse scores for performance, SEO, and accessibility
  • Lazy loading heavy assets like thumbnails and video previews
  • Efficient image serving via srcset and WebP
• 🔍 SEO Strategy for OTT
  • Dynamic vs static content and pre-rendering strategies
  • Managing sitemaps and canonical tags
  • Ensuring indexable routes for dynamic content (e.g., movie detail pages)

🎬 2. Custom Redux Implementation from Scratch

// 🔧 Custom Redux-like createStore implementation
function createStore(reducer, preloadedState) {
  // 🗂️ Initial state setup
  let state = preloadedState;

  // 📣 Listeners array to hold all subscribers
  let listeners = [];

  // 📦 Get the current state value
  function getState() {
    return state;
  }

  // 🚀 Dispatch an action to modify state using reducer
  function dispatch(action) {
    // 🔄 Compute new state from reducer
    state = reducer(state, action);
    
    // 📢 Notify all subscribed listeners
    listeners.forEach(listener => listener());
  }

  // 👂 Subscribe to state changes
  function subscribe(listener) {
    listeners.push(listener);

    // 🔙 Return an unsubscribe function
    return () => {
      listeners = listeners.filter(l => l !== listener);
    };
  }

  // 🆕 Initialize the store with a dummy action
  dispatch({ type: '@@redux/INIT' });

  // 📤 Return the store API
  return {
    getState,   // 🧐 Read state
    dispatch,   // 📝 Update state
    subscribe,  // 📞 Listen to changes
  };
}

🔍 Key Notes:

• This mimics Redux's core store behavior.
• dispatch triggers the reducer and notifies listeners (e.g., UI updates).
• subscribe is useful for UI libraries like React to re-render on state change.
• This pattern is a great test of understanding functional programming, closures, and immutability in JavaScript.

🧠 Reducer Example

// 🔄 A simple reducer function to manage counter state
function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      // ➕ Increase the count
      return { count: state.count + 1 };

    case 'DECREMENT':
      // ➖ Decrease the count
      return { count: state.count - 1 };

    default:
      // ⚠️ If unknown action, return the current state as-is
      return state;
  }
}

🧠 What’s Happening Here?

• state: Holds the current state (defaults to { count: 0 } on first run).
• action: An object with a type (e.g., 'INCREMENT' or 'DECREMENT').
• switch: Based on action.type, the state is updated immutably.
• If no case matches, we return the existing state (default block) to avoid breaking the app.

🚀 Usage Example

// 🏪 Create a Redux-like store with your counterReducer
const store = createStore(counterReducer);

// 👂 Subscribe to store updates
const unsubscribe = store.subscribe(() => {
  console.log('📢 State changed:', store.getState());
});

// 🟢 Dispatch some actions to update the state
store.dispatch({ type: 'INCREMENT' }); // ➕ count becomes 1
store.dispatch({ type: 'INCREMENT' }); // ➕ count becomes 2
store.dispatch({ type: 'DECREMENT' }); // ➖ count becomes 1

// ❌ Unsubscribe from further updates
unsubscribe();

🔍 Explanation:

• store.subscribe(...): Registers a listener that logs state updates to the console.
• store.dispatch(...): Triggers the reducer with the given action and updates the state.
• unsubscribe(): Stops listening to future state changes.

✅ Key Concepts Illustrated

• Store holds the state tree.
• Reducer is a pure function that takes state and action and returns the next state.
• Dispatch triggers the reducer with an action.
• Subscribe allows reacting to state changes (just like useSelector in React-Redux).

📚 Keywords for SEO

• Viacom18 Frontend Interview Experience
• Viacom18 SDE-2 Frontend Web Interview
• Viacom18 ReactJS Round
• JavaScript Deep Dive Viacom18
• Viacom18 Machine Coding Round
• JioCinema SDE-2 Web Interview
• JioCinema ReactJS Round
• Polyfill Questions Frontend Interview
• Frontend Interview at Viacom18

📌 Final Verdict

📨 Offer Received: Yes (within 7 business days after HR round)
❌ Did Not Join: Opted for a better offer from another organization.

📢 Hashtags for Visibility

#JavaScriptInterview #FrontendDeveloper #Viacom18Careers #LearnYard #WebDevelopment #FrontendInterviewExperience #DSAwithJavaScript #MachineCodingRound #InterviewTips #SoftwareEngineerLife #TechHiring #CodeNewbie #FrontendMasters #JSInterviewPrep #MachineCodingRound #Viacom18 #Viacom18Interview #JioCinema #JioCinemaInterview