Razorpay Interview Experience — Frontend Engineer - 2025

Hello Guys,

I had the opportunity to interview recently at Razorpay for the Software Development Engineer 1 — Frontend Developer role. This role is more inclined toward the frontend domain & I will share my interview experience in this post.

Company Overview:
Razorpay, a leading fintech company, is known for its innovative payment solutions and a culture that fosters continuous learning.

Application Process

I applied through careers page and did some cold emailing to HR’s.
Don’t know from where exactly they picked my resume
Each round was an elimination round.

Interview Rounds

  • Round 1- React Machine Coding

  • Round 2- Javascript Problem Solving & Web Fundamentals

  • Round 3- Hiring Manager

Round 1 :- Machine Coding

  • Round Duration: 90 mins
    📌 Difficulty Level: Medium

This was the React Machine Coding round, which focused entirely on your skills in modern JavaScript frameworks like React, Angular, or Vue. We were free to choose any framework, but since Razorpay uses React, I chose React as it was my main tech stack.

1️⃣ Problem Statement: Implement a Config-Driven Tabs Component, with some follow-up questions on the same.
Follow-Up Questions:

  1. Option to show a default tab based on the configuration

  2. Multiple variations

    My Output :-

They focused on architecture, modularity, scalability, and code quality. I tried to keep everything configurable and passed these as props.

They primarily evaluated JavaScript skills, and CSS is an additional factor for evaluation.

Round 2 :- Web Fundamentals

Round Duration: 60 mins
📌 Difficulty Level: Medium

This round is one of the most Interview I had ever , It was revolving around JavaScript fundamentals
and with real world scenarios, where the interviewer tested my core web development knowledge across multiple domains. The questions covered essential concepts like Web Accessibility, Microfrontends, Webpack, CI/CD, and Web Security.
Here’s a breakdown of my experience and how I tackled each question.

1️⃣ Web Accessibility: Making the Web Inclusive

The first topic was Web Accessibility (a11y)—a crucial aspect of frontend development.

❓ Questions I was asked:

  • Why is accessibility important, and how does it improve UX?

  • How do ARIA roles work, and when should they be used?

  • How would you make a dynamic component (like a modal or dropdown) accessible?

💡 My Approach:

  • Explained how semantic HTML (<button>, <nav>, <main>) improves screen reader navigation.

  • Discussed ARIA attributes (aria-hidden, aria-live) for dynamic content updates.

  • Demonstrated how to ensure keyboard navigation (tabindex, keydown events`) for interactive components.

  • Mentioned WCAG guidelines and tools like Lighthouse & axe DevTools for auditing accessibility.

📝 Key takeaway: Accessibility should be proactive, not an afterthought. A well-structured DOM can reduce reliance on ARIA.


2️⃣ Microfrontend Architecture: Scaling Frontend at Enterprise Level

❓ Questions I was asked:

  • What are microfrontends, and why use them?

  • How do microfrontends communicate with each other?

  • What are the pros & cons compared to monolithic frontends?

💡 My Approach:

  • Explained microfrontend architecture as a way to split frontend apps into independent, loosely coupled modules.

  • Discussed Module Federation (Webpack 5) and Single SPA for dynamic microfrontend loading.

  • Covered event-driven communication (e.g., custom events, shared state, or WebSockets).

  • Highlighted trade-offs like increased complexity & dependency management.

📝 Key takeaway: Microfrontends work best in large-scale applications but require strict governance to avoid fragmentation.


3️⃣ Webpack: Optimizing Bundling & Performance

❓ Questions I was asked:

  • What is Webpack, and how does it work?

  • What are loaders, plugins, and tree shaking?

  • How do you optimize Webpack for production?

💡 My Approach:

  • Explained Webpack’s role as a module bundler, handling JS, CSS, and assets.

  • Described key concepts:

    • Loaders: Transform assets (e.g., Babel for JSX, SASS for CSS).

    • Plugins: Extend functionality (e.g., HTMLWebpackPlugin, MiniCssExtractPlugin).

    • Tree shaking: Eliminates dead code to reduce bundle size.

  • Suggested performance optimizations:

    • Code Splitting (import() lazy loading)

    • Compression (TerserPlugin, Gzip, Brotli)

    • Caching (contenthash naming)

📝 Key takeaway: Webpack offers fine-grained control over bundling, but tools like Vite & ESBuild are gaining popularity for their faster builds.


4️⃣ Deployment & CI/CD: Automating Deployments

❓ Questions I was asked:

  • What is CI/CD, and why is it important?

  • How do you set up a CI/CD pipeline for a React/Next.js project?

  • What are zero downtime deployment strategies?

💡 My Approach:

  • Described Continuous Integration (CI) for automated testing & builds and Continuous Deployment (CD) for automatic releases.

  • Explained GitHub Actions & Jenkins pipelines for running tests, building, and deploying.

  • Discussed Docker & Kubernetes for containerized deployments.

  • Shared strategies like:

    • Blue-Green Deployment: Two environments; switch traffic to the updated one.

    • Canary Releases: Roll out updates to a small % of users before full deployment.

📝 Key takeaway: A well-defined CI/CD pipeline reduces manual intervention, ensuring faster & reliable releases.


5️⃣ Web Security: OWASP Top 10 Explained with Examples

Security is non-negotiable in web development, and this round focused on OWASP Top 10 vulnerabilities.

❓ Questions I was asked:

  • What are common web security risks?

  • How do you prevent XSS, CSRF, and SQL Injection?

  • Explain CORS and SameSite cookies.

💡 My Approach:

🔴 Vulnerability🔍 Example✅ Prevention
SQL Injection' OR 1=1 -- bypasses authenticationUse parameterized queries & ORM
Cross-Site Scripting (XSS)<script>alert('Hacked')</script> injects JSSanitize input & use CSP
Cross-Site Request Forgery (CSRF)Fake requests using cookiesCSRF tokens, SameSite=strict
ClickjackingEmbedding site in an <iframe>Use X-Frame-Options header
Security MisconfigurationsDefault admin password exposedFollow secure defaults & least privilege access

📝 Key takeaway: Security must be built into the development process, not just left for DevOps teams to handle.

Round 3 :- Hiring Manager

Round Duration: 60 mins
📌 Difficulty Level: Medium

The Hiring Manager round is not just about technical skills but involves a deep dive into real-world problem-solving, decision-making, and business impact. This round aims to evaluate your ability to deliver scalable, maintainable, and business-focused solutions while working effectively with different teams. It also covers logging, monitoring, and debugging strategies, and how you implement them.
in some cases they might ask typical Scenario Based Questions as well