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

{
  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

{
  id: number,
  name: string,
  logo: string,
  status: string,
  category: string,
  lastUpdated: string,
  lastAction: string
}

Message

{
  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