Onaim Implementation

Modern React + TypeScript application scaffolded with Vite and styled with Tailwind CSS. It includes a simple page builder/viewer split under src/builder and src/viewer, shared UI components, and a lightweight component registry.

Tech stack

• Build tool: Vite 5
• Language: TypeScript 5
• UI: React 18, Tailwind CSS
• Drag & drop: @dnd-kit
• Icons: lucide-react
• Linting: ESLint (+ TypeScript ESLint)

Prerequisites

• Node.js >= 18 (LTS recommended)
• npm >= 9 (bundled with Node LTS)

Verify versions:

node -v
npm -v

Getting started

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

The app will start on http://localhost:5173 (Vite default). The dev server supports hot module replacement (HMR).

3. Build for production:

npm run build

This runs tsc for type-checking and outputs the production build to dist/.

4. Preview the production build locally:

npm run preview

This serves the dist/ build on a local static server (defaults to http://localhost:4173).

5. Lint the codebase:

npm run lint

Common scripts

• dev: Start Vite dev server
• build: Type-check and build production assets
• preview: Serve built app locally for QA
• lint: Run ESLint across .ts/.tsx files

Project structure

c:\Users\user\Desktop\Onaim_Implementation\

  index.html
  public\
    placeholder-*.{png,svg,jpg}
  src\
    App.tsx
    builder\
      BuilderApp.tsx
      components\
        ComponentList.tsx
        ConfigList.tsx
        SettingsPanel.tsx
        TemplateSelector.tsx
    components\
      registry\
        ButtonComponent.tsx
        CardComponent.tsx
        FormComponent.tsx
        GalleryComponent.tsx
        HeroComponent.tsx
        ImageComponent.tsx
        index.ts
        NavigationComponent.tsx
      ui\
        badge.tsx
        button.tsx
        card.tsx
        input.tsx
        label.tsx
        select.tsx
    hooks\
      useHistory.ts
    index.css
    main.tsx
    templates\
      index.ts
    types\
      index.ts
    utils\
      cn.ts
    viewer\
      ViewerApp.tsx
  tailwind.config.js
  tsconfig.json
  vite.config.ts

Key directories:

• src/builder: Components and UI for the builder mode.
• src/viewer: Read-only viewer application.
• src/components/registry: Registered, composable building-block components.
• src/components/ui: Reusable UI primitives (buttons, inputs, etc.).

Running on Windows (PowerShell)

Commands are the same; from the project root run:

npm install
npm run dev

If PowerShell execution policy blocks scripts, start a new terminal as Administrator and run:

Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

Environment variables

No environment configuration is required by default. If you later add any, create a .env (and optionally .env.local) at the project root and reference them via import.meta.env (Vite convention). Never commit secrets.

Tailwind CSS

Tailwind is configured via tailwind.config.js and postcss.config.js. Global styles live in src/index.css and are included by src/main.tsx.

Troubleshooting

• Port already in use (5173/4173):
  • Close the other process or specify a different port: npm run dev -- --port 5174
• Type errors during build:
  • Run npm run lint and fix reported issues; ensure Node 18+.
• Styles not applying:
  • Confirm Tailwind classes exist in content array of tailwind.config.js and that src/index.css is imported.

Conventions

• TypeScript-first, strict typing where appropriate.
• Keep UI primitives in src/components/ui and domain components in src/components/registry.
• Prefer small, focused components; avoid deep nesting and side-effects in render.