Frontend Coding Test

Product object checker with Monaco editor

A polished single-page coding interface for validating whether a solution includes the required fields and renders withmap(using client-side checks only.

FrameworkNext.js 14

EditorMonaco

RenderingStatic

BackendNone

Task

Create a product object with name, price, and description and render it using map

Test Rules

Requiredname

Requiredprice

Requireddescription

Requiredmap(

Solution Editor

Write or paste the candidate solution below.

Loading editor...

Result

Run the test to validate the required fields and map usage.

Pending

The checker scans the editor content for the required keywords.

Reference Example

A sample solution that satisfies the checker.

const products = [
  {
    name: "Studio Headphones",
    price: 249,
    description: "Closed-back design for focused listening",
  },
];

export default function ProductList() {
  return (
    <section>
      {products.map((product) => (
        <article key={product.name}>
          <h2>{product.name}</h2>
          <p>${product.price}</p>
          <p>{product.description}</p>
        </article>
      ))}
    </section>
  );
}

Deployment Ready

Client-side only with no API routes or backend services.
Works with `npm install` and `npm run build` for Vercel.
Responsive layout with Monaco editor and premium styling.