My Loch Frontend Interview Experience | 80 LPA | Mumbai

Overview

Loch is a blockchain services company that describes itself as focused on "Truth Seeking Markets." The candidate applied for a frontend role through LinkedIn and was informed of a potential compensation package that included a 40-60% increase over their current salary, along with equity, totaling approximately 80 LPA (72 lakhs fixed).

Interview Rounds

The interview process at Loch consisted of three distinct, eliminatory rounds:

• Round 1: Screening Round
• Round 2: Home Take Assignment
• Round 3: Machine Coding + Technical Q&A

Round 2: Home Take Assignment

Following successful completion of the initial screening, the candidate received a take-home assignment. The task involved converting Figma designs into a fully functional and responsive frontend landing page for Loch. The landing page was intended to be displayed to users after clicking on a social media advertisement.

The assignment required the candidate to implement a landing page featuring a sign-up section and a carousel displaying details on the left side. The following steps outline the approach the candidate took:

Step 1: Basic Project Setup

The candidate initiated the project by creating a Vite.js project, although a ReactJS project would also have been acceptable. The candidate chose ViteJS because it was a specific requirement for this particular company.

npm install

Step 2: Writing Code

The candidate updated App.jsx, App.scss, and index.css with the following code:

Filename: src\App.jsx

// Styles
import './App.scss'

// Component
import Home from "./components/home";

function App() {
  return (
      <Home />
  );
}

export default App;

Filename: src\App.scss

// Variables
@use "./styles/variables" as *;

#root {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
body {
  margin: 0;
  background: white;
  color: $white;
  font-family: "Inter", sans-serif;
  overflow: hidden;

  @media only screen and (max-width: 600px) {
    overflow: unset;
  }
}
p,
figure,
article {
  margin: 0;
}

Filename: src\index.css

:root {
  line-height: 1.2;
  font-weight: 400;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
}