📝 Pre-Interview Task (Optional)

Before the interview, we’d like to offer a quick hands-on task that can help make our discussion more productive and focused. This task is completely optional but encouraged if you have the time. It gives us a chance to dive deeper into your problem-solving, code understanding, and ability to work with modern tools.

📌 What This Task Is About

The goal is to create a simple Next.js application that:

Streams markdown content from a file, line by line, through an API endpoint.
Renders the streamed content using react-markdown.

This exercise is intentionally scoped to be lightweight and should take no more than 60–90 minutes.

✅ What We’re Evaluating

During the interview, we’ll discuss:

Your understanding of the code you’ve written (even if generated via AI tools).
How you reason about and debug the logic.
How you adapt or modify code when asked.
How effectively you use AI-assisted tools like Cursor, Windsurf, Claude, or v0.dev — we’re very open to modern workflows.

You’re encouraged to use any of these tools. The interview will focus more on how you work and communicate about your solutions rather than writing everything from scratch.

📘 Task (Optional): Build a Markdown Streaming Viewer with Next.js

🎯 Objective

Create a Next.js application (using the App Router) that reads a Markdown file and streams its content line by line to the frontend via an API using Server-Sent Events (SSE).

🛠 Requirements

⚙ Framework Setup

Use Next.js with the App Router architecture.
Use TypeScript & Tailwind CSS.
Use Shadcn or Radix UI components (optional).

🖋 Markdown Rendering

Install and integrate react-markdown to display markdown content on the frontend.
Add necessary plugins for table rendering and other rich content support.

📡 API Endpoint (`/api/event-stream`)

Create a mock API route using Server-Sent Events (SSE).
Read the contents of a local .md or .txt file (use the content from this [Markdown Gist] or any sample of your choice).
Stream the file line by line with a setTimeout delay of 100ms per line.

💻 Frontend Behavior

On visiting a page (e.g., /stream), connect to the /api/event-stream endpoint.
Show loading states as needed.
Once the stream is complete, remove the loader.
Continuously update and render the incoming markdown content using react-markdown as it’s streamed in.

🌟 Bonus (Nice-to-Have)

Ensure the stream works on page refresh or reconnects if disconnected.
Add minimal styling for readability using Tailwind CSS.
Handle edge cases like empty lines or SSE errors gracefully.

rafialikhan/gist:4a49e2f4200dad341d1cf2f8f8a7b2b2