Build a Product Manager feature within the existing Next.js dashboard application. The feature should provide a complete interface for creating, viewing, and managing products.

Basic UI components are already included which you can use, extend or modify if required, as well as utilities for managing file uploads and product data storage.

Below is a sample solution UI you could follow for guidance.

• Node.js (v20 or higher)
• npm

npm install
npm run dev

Open http://localhost:3000 in your browser.

venn-interview-react/
├── app/                    # Next.js app directory
├── src/
│   ├── components/        # React components (ProductManager to be built)
│   ├── ui/                # Reusable UI components
│   ├── utils/             # Utility functions (productStorage, fileUpload)
│   ├── styleVariables/    # Design system
│   └── types/             # TypeScript types
└── public/
    ├── data/products.json # Sample product data (1 product included)
    └── images/            # Sample product images

Build a Product Manager feature that allows users to create, view, and manage products. This is an open ended task. You are welcome to install and use any packages required that will help you produce a solution.

1. Product Creation Form with Title, Description, Price, and Image upload inputs
2. Product List displaying all products (clickable items)
3. Product Preview Card showing image, title, description, and price
4. Data Management - Load from products.json, manage in React state, with new production creation capabilities stored locally in state.

• Use only client-side components ("use client" directive)
• Use provided UI components from src/ui/
• Use utilities from src/utils/ for file uploads and product management
• Maintain TypeScript type safety
• Use Emotion for styling if possible
• Implement form validation

• src/utils/productStorage.ts - loadProducts() to load from JSON, generateProductId() for unique IDs
• src/utils/fileUpload.ts - convertFileToBase64() and validateImageFile() helpers
• src/ui/FileUpload/ - Complete file upload component that handles base64 conversion

The products.json file contains 1 sample product to help you get started. Products are managed entirely in React state (no persistence needed).

Click a product to populate the form for editing. Show a preview while editing with a cancel button.

Add delete button when viewing a product preview. Handle deletion of the currently edited product.

Implement two-column layout (form left, list/preview right) with responsive design for smaller screens.

• Core functionality completeness
• Code quality and organisation
• React best practices and state management
• TypeScript usage and type safety
• User experience and error handling
• Component structure and reusability

Good luck with the task.