🛠️ Development

Building React UI

If you want to modify React UI:

cd src/web
npm install
npm run dev      # Development server
npm run build    # Production build
npm run lint     # ESLint check

Project Structure (Frontend)

src/web/src/
├── components/
│   ├── chat/           # Chat components
│   ├── admin/          # Admin editor components
│   └── ui/             # UI components
├── pages/
│   └── AdminEditor.tsx  # Admin editor page
├── hooks/
│   └── useNuiEvent.ts   # NUI event hook
├── lib/
│   ├── chat-utils.ts
│   ├── command-handler.ts
│   ├── discord-utils.ts
│   ├── icon-utils.tsx
│   └── utils.ts
├── types/
│   └── chat.types.ts
├── utils/
│   └── fetchNui.ts
├── config/
│   └── chat.config.ts
├── App.tsx
├── main.tsx
└── index.css

Adding New Components

1. Create component in src/web/src/components/

2. Use TypeScript for type safety

3. Follow existing patterns

4. Use Tailwind CSS for styling

5. Test with npm run dev

Modifying Lua Backend

Client-side:

• src/client/main.lua - Main client logic

• src/client/utils.lua - Client utilities

Server-side:

• src/server/main.lua - Main server logic

• src/server/config-manager.lua - Config management

Framework:

• src/framework/init.lua - Framework initialization

• src/framework/detector.lua - Framework detection

• src/framework/*.lua - Framework implementations

Testing

Test Discord Integration:

-- Check server console for:
[daphne_chat] Discord integration enabled. Fetching roles...
[daphne_chat] Loaded X Discord roles
[daphne_chat] Discord role cache initialized successfully

-- Join server and check your roles appear

Test Admin Editor:

-- Type /chatconfig
-- Verify editor opens
-- Make a change and save
-- Verify change applies instantly

Test Chat Modes:

/local Hello everyone!
/me waves at crowd
/shout Anyone need help?
/ad Selling car at Legion Square!

Code Style

• Lua: Follow FiveM Lua style guide

• TypeScript: Follow Airbnb style guide

• Comments: Use clear, concise comments

• Commit Messages: Use conventional commits

External Links

• FiveM Documentation

• Discord API Documentation

• React Documentation

• TypeScript Documentation

• Tailwind CSS Documentation

• Vite Documentation

Community

• Discord: https://discord.gg/daphne

• Tebex: https://daphnestudio.net/