Getting Started

 After unzipping Template Files, you will find our product DreamsRent ->Reactjs(Source code)

Mandatory are npm and node are needed to run the reactjs project

Once unzipped the files,run the command:

npm install --save typescript (or) npm install

For running a project , run the command:

npm run dev

If you want to run the project and make the build in the production mode then run the following command in the root directory, otherwise the project will continue to run in the development mode.

npm run build

To install any plugins in your application, you have to run the following command

npm install plugin_name --save

This project uses **Tailwind CSS v4.1.13** with extensive customization 

Tailwind is configured to scan the following paths for class usage:
```javascript
content: [
  "./src/**/*.{js,jsx,ts,tsx}",
  "node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}",
  "node_modules/flowbite/**/*.js"
]

Plugins:

The following Tailwind plugins are integrated:
- **@tailwindcss/forms** - Better default styles for form elements
- **@tailwindcss/typography** - Beautiful typographic defaults
- **flowbite/plugin** - Flowbite component styles and utilities

Overview

Flowbite v3.1.2** and **Flowbite React v0.12.9** are integrated to provide pre-built, accessible UI components.

Configuration

1. Tailwind Config
Flowbite content paths and plugin are included in `tailwind.config.js`:
```javascript
content: [
  "node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}",
  "node_modules/flowbite/**/*.js"
],
plugins: [
  require('flowbite/plugin')
]
```

 2. Vite Config
Flowbite is optimized for Vite bundling in `vite.config.ts`:
```javascript
optimizeDeps: {
  include: ['flowbite']
}
```

3. CSS Imports
Flowbite styles are imported in `src/main.tsx`:
```javascript
import 'flowbite';
import "flowbite/dist/flowbite.css";
```

Flowbite Initialization System

FlowbiteProvider
A custom provider (`src/providers/flowbiteProvider.tsx`) ensures Flowbite components are initialized:
- Initializes on component mount
- Re-initializes on route changes
- Handles dynamic content rendering

```typescript
import FlowbiteProvider from './providers/flowbiteProvider'

```
#### FlowbiteInitializer
Global initializer in `src/main.tsx` that:
- Runs on app startup
- Performs multiple initialization passes to ensure all components are ready
- Handles timing issues with dynamic content

#### useDynamicFlowbite Hook
Custom hook (`src/hooks/useDynamicFlowbite.ts`) for dynamic content:
```typescript
import { useDynamicFlowbite } from './hooks/useDynamicFlowbite';

const { initializeFlowbite, reinitializeFlowbite } = useDynamicFlowbite();
```

**Features**:
- `initializeFlowbite()`: Initialize Flowbite components
- `reinitializeFlowbite()`: Reinitialize with delay for DOM updates
- `useDataTableFlowbite()`: Specialized hook for data tables with dynamic content

### Flowbite Components Used
The project extensively uses Flowbite components including:
- **Modals**: Dynamic modals in data tables and forms
- **Dropdowns**: Navigation and action menus
- **Tooltips**: Contextual help
- **Offcanvas**: Side panels and drawers
- **Tabs**: Content organization
- **Accordions**: Collapsible content sections

### Usage Example
```typescript
// Using Flowbite modal with dynamic initialization
import { useDynamicFlowbite } from '@/hooks/useDynamicFlowbite';

const MyComponent = () => {
  const { reinitializeFlowbite } = useDynamicFlowbite();
  
  useEffect(() => {
    // Reinitialize after dynamic content loads
    reinitializeFlowbite();
  }, [data]);
  
  return (
    
      Open Modal
    
  );
};
```