My Loch Frontend Interview Experience | 80 LPA | Mumbai
Gourav Hammad
January 8, 2026
medium
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;
Next, the utilities folder was created. This folder contains utilities needed in the application.
Filename: src\utils\constants.js
export const ICON_LINKS = {
bellFilledIcon: "/assets/icons/bell-fill.svg",
cohortsImage: "/assets/cohorts.png",
eyeIcon: "/assets/icons/eye.svg",
starIcon: "/assets/icons/star.svg",
caretDownIcon: "/assets/icons/triangle-down.svg",
bellOutlineIcon: "/assets/icons/bell.svg",
barChartIcon: "/assets/icons/bar-chart.svg",
clockIcon: "/assets/icons/clock.svg"
};
export const INPUT_TYPE = {
EMAIL: 'email',
TEXT: 'text',
CHECKBOX: 'checkbox',
SUBMIT: 'submit'
}
export const NOTIFICATIONS = [
{
label: "We'll be sending notifications to you here",
placeholder: "hello@gmail.com",
type: "email",
icon: ICON_LINKS.bellOutlineIcon,
cta: true
},
{
label: "Notify me when any whale moves more than",
placeholder: "$1,000.00",
type: INPUT_TYPE.TEXT,
icon: ICON_LINKS.barChartIcon,
cta: false
},
{
label: "Notify me when any wallet dormant for",
placeholder: "> 30 days",
type: INPUT_TYPE.TEXT,
icon: ICON_LINKS.clockIcon,
footerText: "becomes active",
cta: false
},
];
export const TESTIMONIALS = [
{
quote:
"Love how Loch integrates portfolio analytics \n and whale watching into one unified app.",
author: "Jack F",
designation:"Ex Blackrock PM"
},
{
quote:
"I use Loch everyday now. I don't think I could \n analyze crypto whale trends or markets without it. \n I'm addicted!",
author: "Yash P",
designation:"Research, 3poch Crypto Hedge"
},
{
quote:
"Managing my own portfolio is helpful and \n well designed. What's really interesting is watching \n the whales though. No one else has made whale tracking \n so simple.",
author: "Shiv S",
designation:"Co-Founder Magik Labs"
},
];
export const LOCH_LANDING_PAGE_LINK = 'https://app.loch.one/welcome'
Filename: src\utils\helpers.js
// Function to check weather given email is correct or not
export const isValidEmail = (email = '') => {
return email.includes('@') && email.includes('.');
};
// Constants
import { ICON_LINKS } from "../../utils/constants";
export const LEFT_SECTION_CONTENT = {
header: {
icon: ICON_LINKS.bellFilledIcon,
title: "Get notified when a highly correlated whale makes a move",
description:
"Find out when a certain whale moves more \n than any preset amount on-chain or when a \n dormant whale you care about becomes active.",
},
watchSection: {
image: ICON_LINKS.cohortsImage,
icon: ICON_LINKS.eyeIcon,
title: "Watch what the whales are doing",
description:
"All whales are not equal. Know exactly what \n the whales impacting YOUR portfolio are doing.",
},
testimonials: {
title: "Testimonials",
icon: ICON_LINKS.starIcon,
},
};