TAS Multi-Dim Spec

A modern React 19 + TypeScript single-page application scaffold for a multi-dimensional specification tool, built with Vite 7 and shadcn/ui components.

Overview

TAS Multi-Dim Spec is a front-end application designed for creating, viewing, and managing multi-dimensional specifications. The project provides a rich UI foundation with a comprehensive component library, ready for building specification management interfaces.

Tech Stack

Technology	Purpose
React 19	UI framework
TypeScript	Type-safe development
Vite 7	Build tool and dev server
shadcn/ui	UI component library (based on Radix UI primitives)
Tailwind CSS 3	Utility-first styling
React Router 7	Client-side routing
React Hook Form + Zod	Form validation
Recharts	Data visualization
Sonner	Toast notifications

Getting Started

Prerequisites

• Node.js 20+
• pnpm (recommended) or npm

Installation

# Install dependencies
npm install

# Start the development server
npm run dev

The app will be available at http://localhost:3000.

Build for Production

npm run build

Output will be in the dist/ directory.

Preview Production Build

npm run preview

Available Scripts

Script	Description
npm run dev	Start Vite development server with HMR
npm run build	Type-check with tsc -b then build with Vite
npm run lint	Run ESLint across the project
npm run preview	Preview the production build locally

Project Structure

src/
├── components/
│   └── ui/          # shadcn/ui components (button, card, dialog, etc.)
├── hooks/
│   └── use-mobile.ts # Mobile detection hook
├── lib/
│   └── utils.ts     # Tailwind CSS utility (cn function)
├── pages/
│   └── Home.tsx     # Home page component
├── App.tsx          # Root component with routing
├── App.css          # Global styles
├── main.tsx         # Application entry point
└── index.css        # Tailwind directives and base styles

Key Features

• React 19 with the latest React features and improvements
• Vite 7 for fast HMR and optimized builds
• TypeScript throughout for type safety
• shadcn/ui component library with extensive Radix UI primitives
• Tailwind CSS for utility-first styling with tailwindcss-animate for animations
• React Router for client-side routing
• Form handling with React Hook Form and Zod validation schemas
• Charts and data visualization via Recharts
• Responsive design with mobile-aware hooks and resizable panels
• Toast notifications via Sonner

Dependencies

The project includes a comprehensive set of shadcn/ui components out of the box, including: accordion, alert-dialog, avatar, badge, button, calendar, card, carousel, chart, checkbox, collapsible, command, context-menu, dialog, drawer, dropdown-menu, form, hover-card, input-otp, menubar, navigation-menu, pagination, popover, progress, radio-group, resizable, scroll-area, select, separator, sheet, sidebar, skeleton, slider, switch, table, tabs, textarea, toggle, toggle-group, tooltip, and more.