Frontend Developer (Founding Team)

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.

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.

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.

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).

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.

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.

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.

The useAssetTracker hook with all 7 dependencies.

The "Simulated API" service layer.

Redux Slices.

PR 3: Performance UI Polish. React.memo optimizations.

UI Polish.

React.memo optimizations.

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.

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.

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?