CreatorCenter_OOIN/DEVELOPMENT.md

# OOIN Creator Center - Development Documentation

## Project Overview
OOIN Creator Center is a React application built with Vite that allows users to discover, analyze, and manage content creators for marketing campaigns. The application provides tools for browsing creators from different social media platforms, managing brands, and facilitating creator communication.

## Tech Stack

### Core Technologies
- **React 19**: UI library
- **Vite 6**: Development and build tool
- **Redux Toolkit**: State management
- **React Router v7**: Routing
- **Bootstrap 5 + React Bootstrap**: UI components
- **SASS**: Advanced styling

### Key Dependencies
- **Redux Persist**: Persists state to sessionStorage
- **Font Awesome**: Icon library
- **Lucide React**: Additional icon components
- **Date-fns**: Date utilities

## Project Structure

```
/
├── public/              # Static assets
├── src/                 # Source code
│   ├── assets/          # Assets (images, etc.)
│   ├── components/      # Reusable components
│   │   └── Layouts/     # Layout components
│   ├── lib/             # Utility functions
│   ├── pages/           # Page components
│   ├── router/          # Routing configuration
│   ├── store/           # Redux store configuration
│   │   └── slices/      # Redux slices
│   ├── styles/          # Global styles
│   ├── App.jsx          # Main application component
│   ├── index.css        # Global CSS
│   └── main.jsx         # Entry point
├── index.html           # HTML template
└── vite.config.js       # Vite configuration
```

## Application Architecture

### State Management
- **Redux Toolkit** is used for global state management
- State is divided into several slices:
  - `creators`: Manages creator data and selection state
  - `filters`: Manages filter options for creator discovery
  - `brands`: Manages brand information
  - `inbox`: Manages creator communication
- Redux Persist stores state in sessionStorage for persistence across page reloads

### Routing
- The application uses React Router v7 with a nested route structure
- Main routes are wrapped in `MainLayout` which includes the sidebar navigation
- The Creator Inbox uses a dedicated `DividLayout` for its specialized interface

## Feature Modules

### Creator Database
- Displays creator information from different social media platforms (TikTok, Instagram, YouTube)
- Supports filtering by various attributes like category, followers, etc.
- Creators can be selected and added to campaigns

### Brands Management
- Allows viewing and management of brand partnerships
- Displays brand information and status

### Creator Inbox
- Communication interface for interacting with creators
- Includes chat functionality and message templates

## Data Model

### Creator
```javascript
{
  id: number,
  name: string,
  avatar: string,
  category: string,
  e_commerce_level: string,
  exposure_level: string,
  followers: string,
  gmv: string,
  soldPercentage: string,
  avg_video_views: string,
  hasEcommerce: boolean,
  hasTiktok: boolean,
  hasInstagram: boolean, // optional
  hasYoutube: boolean, // optional
  verified: boolean
}
```

### Brand
```javascript
{
  id: number,
  name: string,
  logo: string,
  status: string,
  category: string,
  lastUpdated: string,
  lastAction: string
}
```

### Message
```javascript
{
  id: number,
  text: string,
  timestamp: string,
  sender: 'user' | 'creator'
}
```

## Development Workflow

### Setup
1. Clone the repository
2. Install dependencies: `npm install`
3. Start development server: `npm run dev`

### Build
- Create production build: `npm run build`
- Preview production build: `npm run preview`

### Code Linting
- Run ESLint: `npm run lint`

## Component Guidelines

### Layout Components
- `MainLayout`: Provides the main application layout with sidebar navigation
- `DividLayout`: Used for the Creator Inbox with its specialized layout needs

### UI Components
- `SearchBar`: Reusable search component used across different pages
- `DatabaseFilter`: Complex filter component for creator discovery
- `CreatorList`: Displays creator data in a tabular format
- `ChatWindow` and `ChatInput`: Used for creator communications
- `RangeSlider`: Custom slider component for range-based filtering

## Mock Data
Currently, the application uses mock data defined in the Redux slices. In a production environment, these would be replaced with API calls to a backend service.

## Future Development Areas

### API Integration
- Replace mock data with actual API calls
- Implement authentication and user management

### Feature Enhancements
- Complete the unfinished pages (Creator Discovery, Deep Analysis, Settings)
- Enhance filtering capabilities
- Add data visualization for creator analytics

### Technical Improvements
- Implement unit and integration testing
- Add TypeScript for improved type safety
- Optimize performance for large datasets

## UI/UX Guidelines
- The application uses Bootstrap 5 for consistent styling
- Follow the existing component patterns for new UI elements
- Use Font Awesome icons from the available library

## Redux Store

### Store Configuration
The Redux store is configured in `src/store/index.js` with Redux Persist for state persistence.

### Key Slices
1. **creatorsSlice**
   - Manages creator data and selection state
   - Handles filtering logic based on selected filters
   - Provides actions for selecting/deselecting creators

2. **filtersSlice**
   - Manages the filter criteria for creator discovery
   - Includes category filters, rating filters, and range filters

3. **brandsSlice**
   - Manages brand data
   - Includes mock brand information for display

4. **inboxSlice**
   - Manages creator communication
   - Handles message history and conversation state

## Adding New Features

### New Page
1. Create a new component in the `src/pages` directory
2. Add the route to `src/router/index.jsx`
3. Update the sidebar navigation in `src/components/Layouts/Sidebar.jsx` if needed

### New Component
1. Create the component in the `src/components` directory
2. Follow existing naming conventions and styling approaches
3. Reuse existing components where possible

### New Redux Slice
1. Create a new slice file in `src/store/slices`
2. Define initial state, reducers, and any async thunks needed
3. Add the reducer to the root reducer in `src/store/index.js`

## Performance Considerations
- Use memoization for expensive computations
- Implement virtualized lists for large data sets
- Optimize Redux selectors for efficient state access