Skip to content

Open nowPosted 392 days ago

Frontend Developer (Founding Team)

gradientflo19 open roles

Pay
$32,000 – $40,000 a yearly
Where
Hyderābād, India
Work mode
On site
Get the CV for this job

From $25 per CV, paid once. No subscription.

Your applicationOpen nowFrontend Developer (Founding Team)gradientflo · Hyderābād, India
  1. YouYes, apply to this one.

  2. CV RocketCV written for this posting.

  3. 25 readersRecruiter, hiring manager, skeptic. Round after round.

  4. CV RocketApplied on gradientflo's own form.

The reply lands in your private mailbox

3×more interviews than doing it yourself with ChatGPT.

The clock on this job

Early applications get read.

12.1% of postings close within 7 days. Measured by our own scanner across the market.

Share of postings closed within
  1. 2.1%1 day
  2. 4.5%3 days
  3. 12.1%7 days
  4. 19.1%14 days
  5. 35.6%30 days
  6. 52.7%60 days
This job: posted 392 days ago

The posting

You will own the front-end architecture for Gradientflo’s core web applications. This is not a role for someone who just "makes things look good." We need an engineer who understands the React reconciliation process, cares deeply about Core Web Vitals, and writes self-documenting code.

You have roughly 3 years of experience. You have moved past "making it work" and now focus on "making it scale." You will be working with server-side rendering, complex global state, and SEO critical implementations. We value clear writing, clean architecture, and strong debugging skills above all else.

Core Responsibilities

  • Architect high-performance pages using Next.js (App Router).
  • Manage complex application state using Redux Toolkit (RTK).
  • Audit and optimize application performance (LCP, CLS, FID) using React Profiler and Lighthouse.
  • Refactor legacy components into reusable, strict SOLID compliant UI patterns.
  • Design custom hooks that abstract logic cleanly without causing "dependency hell."
  • Implement SEO best practices (Structured Data, Dynamic Metadata, sitemaps).
  • Debug complex race conditions and rendering issues using Chrome DevTools.
  • Write strict TypeScript to eliminate runtime errors.
  • Conduct code reviews focusing on performance impacts and maintainability.

Technical Requirements

Must-Have Skills

  • React.js & Next.js (3+ years experience)
  • Redux Toolkit (Slices, Thunks, Selectors)
  • Performance Optimization (Memoization, Lazy Loading, Code Splitting)
  • TypeScript (Generics, Utility Types)
  • Deep understanding of React Hooks (useCallback, useMemo, useReducer)
  • Strong Debugging skills (knowing why a component re-rendered)
  • SEO Expertise (Next-SEO, JSON-LD, Open Graph tags)

Strong Pluses

  • Experience with Headless CMS integration
  • Experience writing unit tests (Jest / React Testing Library)
  • Knowledge of Web Accessibility (WCAG)

Technical Task (Mandatory Assessment)

Project: Real-Time Asset Tracker (Simulated) Objective: Build a widget that tracks asset prices via simulated polling. This task is designed to expose how you handle complex effect dependencies, stale closures, and memory leaks when a component unmounts.

Data Source Note: Do not use a real external API. You must use Static JSON Data stored locally (e.g., data.json) and simulate network latency/random price fluctuations using setTimeout.

Functional Requirements

1. The "High-Dependency" Hook (useAssetTracker) You must implement a custom hook that manages data polling. It must accept all of the following dependencies in its arguments:

  1. assetID (string, e.g., "BTC")
  2. currency (string, e.g., "USD")
  3. pollInterval (number, e.g., 3000ms)
  4. alertThreshold (number, user-defined price alert)
  5. isAutoRefreshEnabled (boolean)
  6. userTier (string, affects polling speed)
  7. onAlertTriggered (function, callback to parent)

The Logic Challenge:

  • Simulation: The hook should "fetch" data from your static JSON, adding a random delay (500ms to 1500ms) to simulate a network request.
  • Polling: When isAutoRefreshEnabled is true, fetch new data every pollInterval.
  • The Trap: If the user types in the alertThreshold input (updating the dependency), it must not reset the polling timer.
  • The Constraint: You are forbidden from using eslint-disable-next-line react-hooks/exhaustive-deps. You must solve the dependency array stability using useRef or split effects.

2. Mandatory Lifecycle Cleanup

Your implementation must handle the "Unmount" event gracefully:

  • Async Cancellation: Since you are using setTimeout to simulate an API, you must ensure that if the component unmounts while the timeout is pending, the state update is cancelled.
  • Timer Cleanup: clearInterval must be called immediately if assetID changes or the component unmounts.
  • Proof: Add a console.log('Cleaning up resource for:', assetID) in the return statement of your effect.

3. Redux Toolkit & State

  • Store the fetched price history in a Redux Slice.
  • Use a Memoized Selector to calculate the "High/Low" of the session.
  • Performance: Ensure that updating the price history only re-renders the Chart/Price component, not the entire Page Layout.

4. SEO Implementation

  • Create a dynamic route: /market/[assetID].
  • Inject dynamic Metadata (Title/Description) based on the assetID.
  • The page must be indexable by bots (Use Server Components for the shell, Client Components for the tracker).

5. Clean Code Requirements Mandatory rules:

  • No useEffect for derived state (use useMemo).
  • Strict SOLID alignment (Single Responsibility components).
  • No any types in TypeScript.
  • Proper separation of container logic vs. presentational components.

Submission Requirements

1. GitHub Public Repository

Your repo must include:

  • README explaining how you solved the "Timer Reset" issue when the alertThreshold changed.
  • Architecture Diagram: A simple diagram showing how data flows from your Static JSON -> Hook -> Redux -> UI.
  • Local run instructions.

2. Pull Requests to Raise (The "3-PR Rule")

You must create 3 distinct PRs to simulate a real workflow:

  • PR 1: Project Setup Next.js scaffold, TypeScript config, Redux Store setup, Static JSON file creation.
  • PR 2: The Core Logic The useAssetTracker hook with all 7 dependencies. The "Simulated API" service layer. Redux Slices.
  • PR 3: Performance UI Polish. React.memo optimizations.

3. Loom Video (Mandatory)

Record a 5 to 10 minute Loom video covering:

  • The Cleanup Demo: Open Chrome DevTools Console. Start the tracker. Navigate away from the page while it is waiting for the "simulated" data. Show that your cleanup log appeared and no React warnings (e.g., "update on unmounted component") occurred.
  • Code Walkthrough: Explain how you used useRef (or your chosen method) to handle the alertThreshold dependency without breaking the linter rules.
  • SEO Check: Inspect the page source to show the generated Metadata tags.

Evaluation Criteria

  • The Dependency Array: Did you list all 7 dependencies? (Omitting one is a fail).
  • Stability: Does changing the Alert Threshold cause the timer to jitter/reset? (It shouldn't).
  • Cleanup: Is the setTimeout or setInterval actually cleared on unmount?
  • Code Clarity: Is the code clean, readable, and formatted?
  • SEO: Is the metadata correctly generated server-side?
  • Process: Did you follow the 3-PR structure?
From $25, paid onceGet the CV for this job

What happens when you press

One press. We do the rest.

  1. A CV for this posting

    Written against gradientflo's own wording, from every piece of relevant proof in your profile.

  2. 25 readers review it

    Recruiter, hiring manager, skeptic and more read every draft, round after round. You get the best round.

    The review screen in CV Rocket: how each CV was read, round by round.
  3. We apply on gradientflo's form

    Our application engine gets through the hardest forms there are. Where a question needs you, AI suggests the best answer. Don't want us applying from our IP addresses? Use our Chrome extension: we apply straight from your own browser.

    An application in CV Rocket: every answer filled in on the employer's form.
  4. Every reply, sorted

    gradientflo's answer lands in your private mailbox, and we classify it on arrival: interview, question, rejection.

    The CV Rocket inbox: each employer reply classified as an interview, an action or a rejection.
  5. Reply with AI

    AI helps you write the email, checks it and sends it. We show you whether the recruiter read it.

  6. The interview in your calendar

    Full integration with your calendar. The invitation goes straight in.

    An interview invitation in the CV Rocket inbox, added to the candidate's calendar.
Get the CV for this job

From $25 per CV, paid once. No subscription.

Why it works

3×

more interviews than doing it yourself with ChatGPT.

ChatGPT writes a CV and never learns what happened to it. We see every reply. For each CV we know:

  • How it was written, and how the review scored it
  • When we applied, and how long after the posting went up
  • Which posting, which company, which city
  • Who got the interview, and who heard nothing

That is how we know which CVs get called.

Get the CV for this job

From $25 per CV, paid once. No subscription.

The numbers game

More applications. More interviews.

Every application goes out with its own CV, written for that posting and paid once. Send enough of them and the law of large numbers finds you the job.

By hand5–10
With CV Rocket100
applications a day

Nearby

Live postings like this one

Same employer first, then the same role elsewhere.

Before you press

Straight answers

Get the CV for this job

From $25 per CV, paid once. No subscription.

What if my background isn't good enough?

We make the most of the background you have. The CV uses every piece of relevant proof your profile holds, and one of the 25 readers reads your whole profile and flags what the CV left out.

Do you really apply for me?

Yes, on the employer's own form, the hardest ones included. Where a question needs you, you answer it right there and AI suggests the best answer. Don't want us applying from our IP addresses? Use our Chrome extension: we apply straight from your own browser.

Is it a subscription?

No. You pay once per CV, from $25. Every application goes out with its own CV, written for that posting.

One job. One CV.
Paid once.

Pick the posting you want. We write for it, apply for you and catch the reply.

Get the CV for this job

From $25 per CV, paid once. No subscription.