# React Backend Dashboard

A modern Next.js dashboard application with rich UI components and powerful features.

## 🚀 Tech Stack

- **Framework**: Next.js 15.3.0 (App Router)
- **Language**: TypeScript
- **Styling**: Tailwind CSS with custom animations
- **UI Components**: Radix UI primitives with shadcn/ui style system
- **State Management**: Redux Toolkit
- **Forms**: React Hook Form with Zod validation
- **Tables**: TanStack Table
- **Editor**: CKEditor 5
- **Theming**: Next Themes for dark/light mode
- **File Handling**: Doc Viewer, Mammoth (DOCX), XLSX processing
- **Utilities**: Date-fns, Axios, Cookies management

## 📋 Prerequisites

- Node.js 18.17 or later
- npm, yarn, pnpm, or bun package manager

## 🛠️ Getting Started

### Installation

1. Clone the repository:

```bash
git clone <repository-url>
cd react-be

2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install
# or
bun install

Development:

Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 in your browser to see the application.
Build and Production

Build the application for production:

npm run build
# or
yarn build
# or
pnpm build
# or
bun build

Start the production server:

npm start
# or
yarn start
# or
pnpm start
# or
bun start


🧹 Code Quality
Linting

npm run lint
# or
yarn lint
# or
pnpm lint
# or
bun lint


Formatting

npm run format
# or
yarn format
# or
pnpm format
# or
bun format

📦 Key Dependencies
UI & Components

    @radix-ui/react-*: Accessible UI primitives

    lucide-react: Icon library

    @tanstack/react-table: Headless table utility

    react-day-picker: Date picker component

    react-dropzone: File upload with drag & drop

Forms & Validation

    react-hook-form: Form management

    zod: Schema validation

    @hookform/resolvers: Zod integration for forms

Editor & Documents

    @ckeditor/ckeditor5-build-classic: Rich text editor

    @cyntler/react-doc-viewer: Document preview

    mammoth: DOCX file processing

    xlsx: Excel file processing

    html2pdf.js: PDF generation

State & Data

    @reduxjs/toolkit: State management

    react-redux: React bindings for Redux

    axios: HTTP client

    cookies-next: Server/client cookie management

Utilities

    date-fns: Date manipulation

    date-fns-tz: Timezone support

    timezones-list: Timezone data

    clsx: Conditional className utility

    tailwind-merge: Tailwind class merging

    class-variance-authority: Type-safe class utilities

File & Image Processing

    react-image-crop: Image cropping tool

    react-sortablejs: Drag & drop sorting

    sortablejs: Sortable list functionality

🎨 Styling

This project uses:

    Tailwind CSS for utility-first styling

    tailwindcss-animate for animation utilities

    Sass/SCSS for additional styling needs

    Custom design system built with Radix UI and CVA

🌓 Themes

The application supports dark/light mode using next-themes. Theme preference is persisted across sessions.

📁 Project Structure

react-be/
├── app/              # Next.js app router pages
├── components/       # Reusable React components
├── lib/             # Utilities and configurations
├── hooks/           # Custom React hooks
├── store/           # Redux store and slices
├── styles/          # Global styles and SCSS
├── types/           # TypeScript type definitions
└── public/          # Static assets

🔧 Configuration
Environment Variables

Create a .env.example file in the root directory for environment variables:

NEXT_PUBLIC_HTTP_PROTOCOL=http://
NEXT_PUBLIC_WO_ADMIN_URL=${NEXT_PUBLIC_HTTP_PROTOCOL}localhost/aca-erp/adminController/
NEXT_PUBLIC_WO_BASE_URL=${NEXT_PUBLIC_HTTP_PROTOCOL}localhost/aca-erp/
NEXT_PUBLIC_VC_BE_URL=${NEXT_PUBLIC_HTTP_PROTOCOL}localhost:3001/
NEXT_PUBLIC_VC_FE_URL=${NEXT_PUBLIC_HTTP_PROTOCOL}localhost:3000/
NEXT_PUBLIC_API_BASE_URL=${NEXT_PUBLIC_HTTP_PROTOCOL}localhost:3001/api/backend/
NEXT_PUBLIC_IMAGE_DOMAIN=localhost


Tailwind CSS

Configuration file: tailwind.config.ts

    Custom color palette

    Extended animations

    Plugin configurations

TypeScript

Configuration file: tsconfig.json

    Strict type checking enabled

    Path aliases configured

📄 File Processing Features

The application supports:

    Document preview (PDF, DOCX, Excel, Images)

    Rich text editing with CKEditor

    Image cropping and manipulation

    Excel import/export functionality

    PDF generation from HTML

    Drag & drop file uploads

🚀 Deployment
Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out the Next.js deployment documentation for more details.
Other Platforms

This application can be deployed to any platform that supports Node.js applications, including:

    AWS Amplify

    Netlify

    Railway

    Docker containers

📚 Learn More

To learn more about the technologies used in this project:

    Next.js Documentation - learn about Next.js features and API

    Learn Next.js - interactive Next.js tutorial

    Radix UI Documentation - accessible UI components

    Tailwind CSS Documentation - utility-first CSS framework

    Redux Toolkit Documentation - state management

🤝 Contributing

    Ensure code passes linting: npm run lint

    Format code before committing: npm run format

    Follow TypeScript strict mode guidelines

    Maintain consistent styling with Tailwind CSS

📄 License

This project is private and proprietary.


The README.md file is ready. You can save this content to your README.md file in your project root directory.
```
