Masava - Cool Speed Velociraptor

Using HelloCSV

This application uses HelloCSV, a powerful React library for importing and validating CSV data.

Key Features

Multi-sheet support: Define multiple import templates with different column configurations
Type validation: Support for string, number, and other data types
Custom validators: Regex validation, unique constraints, and custom error messages
Persistence: Built-in state persistence to resume interrupted imports
User-friendly UI: Clean interface for mapping columns and reviewing errors

Basic Setup

import Importer, { ImporterState } from 'hello-csv/react';
import 'hello-csv/react/index.css';

<Importer
  sheets={[
    {
      id: 'sheet-id',
      label: 'Sheet Label',
      columns: [
        {
          label: 'Column Name',
          id: 'fieldId',
          type: 'string',
          validators: [
            {
              validate: 'regex_matches',
              regex: /^.{0,100}$/,
              error: 'Must be 100 characters or less'
            }
          ]
        }
      ]
    }
  ]}
  onComplete={(data: ImporterState) => {
    console.log(data);
    return Promise.resolve();
  }}
  persistenceConfig={{ enabled: true }}
/>

Customer Routing

This application uses Next.js App Router with file-based routing. Customer-specific importers are organized under the /customers directory.

How It Works

Each customer gets their own subdirectory under src/app/customers/
Customer directories are automatically discovered and listed on the customers page
Each customer directory contains a page.tsx with their specific import configuration
Directory names are kebab-case (e.g., city-moonlight) and displayed as Title Case

Adding a New Customer

1.Create a new directory under src/app/customers/your-customer-name/
2.Add a page.tsx file with the customer's import configuration
3.The customer will automatically appear in the customers list