A real-time chat application with Arabic sentiment analysis, built with React, TypeScript, and Node.js. The application provides a platform for customer service interactions with automatic sentiment analysis of Arabic messages.
- Real-time chat functionality using Socket.IO
- Arabic sentiment analysis for customer messages
- Admin dashboard with sentiment analytics
- Responsive design with RTL support
- Beautiful UI using Tailwind CSS and shadcn/ui
- Real-time sentiment visualization with charts
- Node.js (v16 or higher)
- npm (v7 or higher)
- Git
- Clone the repository:
git clone <your-repository-url>
cd design-to-site-buddy- Install frontend dependencies:
npm install- Install server dependencies:
cd server
npm install- Start the backend server:
cd server
node index.jsThe server will start on http://localhost:3000
- In a new terminal, start the frontend development server:
npm run devThe application will be available at http://localhost:8082
- Access the admin dashboard at http://localhost:8082/admin
- Access the admin chat interface at http://localhost:8082/admin/chat
- View sentiment analysis and chat statistics
- Monitor customer conversations in real-time
- Access the client chat interface at http://localhost:8082/client
- Send messages to customer service
- Receive real-time responses
design-to-site-buddy/
├── src/ # React frontend source code
│ ├── components/ # Reusable React components
│ ├── pages/ # Page components
│ └── App.tsx # Main application component
├── server/ # Node.js backend server
│ └── index.js # Server implementation
├── public/ # Static files
└── package.json # Project dependencies
AdminDashboard.tsx: Main dashboard with analyticsAdminChatInterface.tsx: Admin chat interfaceClientChat.tsx: Client chat interfaceSentimentAnalysis.tsx: Sentiment analysis visualization
- Real-time message handling with Socket.IO
- Arabic sentiment analysis
- Message storage and retrieval
The application analyzes Arabic text using a predefined list of positive and negative words. The sentiment analysis:
- Identifies positive, negative, and neutral messages
- Calculates sentiment scores
- Provides real-time sentiment visualization
- Updates the dashboard with sentiment trends
- Create new components in
src/components/ - Add new pages in
src/pages/ - Update routing in
App.tsx - Add new server endpoints in
server/index.js
- The project uses Tailwind CSS for styling
- Custom components are built using shadcn/ui
- RTL support is implemented for Arabic text
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.