Dnext Data Catalog Application

A modern React TypeScript application built with enterprise-grade architecture and best practices for data catalog management.

🏗️ Project Architecture

This project follows a Domain-Driven Design (DDD) approach with a clean, scalable architecture:

src/
├── app/                    # Application entry point and global setup
├── assets/                 # Static assets (images, icons, styles)
│   └── styles/            # SCSS abstracts (variables, mixins, functions)
├── components/            # Reusable UI components
│   ├── forms/            # Form-specific components
│   ├── layout/           # Layout components
│   └── ui/               # General UI components (Button, Input, Modal)
├── config/               # Application configuration
├── contexts/             # React Context providers
├── data/                 # Data layer (queries, mutations, services)
│   └── dataset/         # Dataset-specific data operations
├── hooks/                # Custom React hooks
├── models/               # TypeScript interfaces and types
├── pages/                # Page components
├── store/                # State management (Zustand stores)
├── test/                 # Testing utilities and setup
├── types/                # Global TypeScript types
└── utils/                # Utility functions and helpers

🚀 Tech Stack

Core Framework

• React 19.1.0 - Latest React with modern features
• TypeScript 5.8.3 - Strong typing and developer experience
• Vite 7.0.4 - Lightning-fast build tool and dev server

State Management

• Zustand 5.0.7 - Lightweight state management
• React Query 5.84.1 - Server state management and caching

HTTP Client

• Axios 1.11.0 - Promise-based HTTP client with interceptors

UI Libraries

• Ant Design 5.26.7 - Enterprise UI components
• Bootstrap 5.3.7 - CSS framework for responsive design
• Sass 1.89.2 - CSS preprocessing with modern features

Development Tools

• ESLint 9.30.1 - Code linting with comprehensive rules
• Prettier 3.6.2 - Code formatting

🚦 Getting Started

Prerequisites

• Node.js 20.x or higher
• Yarn package manager

Installation

1. Clone the repository

   git clone https://github.com/Dnext-Intelligence/Dnext-App-DataCatalog
   cd Dnext-App-DataCatalog

2. Install dependencies

   yarn install

3. Start development server

   yarn dev

4. Open your browser Navigate to http://localhost:3000

📜 Available Scripts

| Script | Description | | -------------------- | ------------------------- | | yarn dev | Start development server | | yarn build | Build for production | | yarn preview | Preview production build | | yarn lint | Run ESLint | | yarn lint:fix | Fix ESLint issues | | yarn format | Format code with Prettier | | yarn format:check | Check code formatting | | yarn test | Run tests in watch mode | | yarn test:run | Run tests once | | yarn test:ui | Run tests with UI | | yarn test:coverage | Run tests with coverage |

🏢 Project Structure Explained

State Management Pattern

// Zustand store example
export const useCounterStore = create<CounterState>()(
  devtools(
    persist(
      (set) => ({
        count: 0,
        increment: () => set((state) => ({ count: state.count + 1 })),
        // ... other actions
      }),
      { name: 'counter-store' }
    )
  )
);



### API Integration
```typescript
// React Query hook example
export const useLoadDatasets = (params: QueryParams) => {
  return useQuery({
    queryKey: ['datasets', params],
    queryFn: () => datasetService.getDatasets(params),
    staleTime: 5 * 60 * 1000, // 5 minutes
  });
};

🚀 CI/CD Pipeline

GitHub Actions workflow includes:

1. Code Formatting Check - Ensures consistent code style
2. Linting - Catches potential issues and enforces standards
3. Build - Verifies production build works

GitHub Actions Workflow

Note: Due to current repository access restrictions, this workflow will be added later. The configuration is ready for implementation.

name: Node.js CI

on: [push]

jobs:
    test-and-lint:
        runs-on: ubuntu-latest
        strategy:
            matrix:
                node-version: ['20.x']

        steps:
            - uses: actions/checkout@v4

            - name: Use Node.js ${{ matrix.node-version }}
              uses: actions/setup-node@v4
              with:
                  node-version: ${{ matrix.node-version }}
                  cache: 'yarn'

            - name: Install dependencies
              run: yarn install --frozen-lockfile

            - name: Check formatting
              run: yarn format:check

            - name: Run linter
              run: yarn lint

            - name: Build project
              run: yarn build

This workflow will be saved as .github/workflows/ci.yml when repository access is available.

🔧 Configuration Files

| File | Purpose | | ------------------ | ------------------------- | | vite.config.ts | Vite build configuration | | tsconfig.json | TypeScript configuration | | eslint.config.js | ESLint rules and settings | | .prettierrc | Code formatting rules |