README.md

Frontend Live Coding Task

This repository contains the starter code for a React live coding exercise focused on data analysis and performance optimization.

Setup Instructions

1. Clone the repository

   git clone https://github.com/Metasiteorg/frontend-live-task.git
   cd frontend-live-task

2. Install dependencies

   pnpm install

3. Start the development server

   pnpm dev

4. Open your browser

   Navigate to http://localhost:5173 (or the port shown in your terminal)

Task Overview

You will build a Sales Analysis Dashboard that processes and displays 100,000 sales records. The starter code includes:

• Data generator function (src/lib/generateSalesData.ts) - Generates 100K sales records
• Basic component structure (src/App.tsx) - Starter layout with shadcn components
• UI components - Table, Input, and Card components from shadcn/ui

What You Need to Implement

Refer to the task document (PDF) provided separately for detailed requirements.

Available Scripts

• pnpm dev - Start development server
• pnpm build - Build for production
• pnpm preview - Preview production build
• pnpm lint - Run ESLint

Tech Stack

• React 19 with TypeScript
• Vite for build tooling
• Tailwind CSS for styling
• shadcn/ui for UI components

Notes

• You are free to install additional libraries if needed (e.g., for virtualization, data handling)
• Focus on performance, code quality, and React best practices
• The task is designed to be completed in approximately 60 minutes

Good luck!