REACTRTC

A Common React Project Template for SDCPLs with integrated support for REST API, gRPC, and WebSocket communication. This project provides a clean, well-structured foundation that can be easily understood and extended by any developer.

🚀 Using as a Template

Create a New Project

To create a new project using this template:

npx reactrtc-template my-project-name
cd my-project-name
npm install
npm start

This will:

• ✅ Create a new project directory
• ✅ Copy all template files
• ✅ Set up the project structure
• ✅ Configure package.json with your project name

Note: If the template is not yet published to npm, see TEMPLATE_SETUP.md for publishing instructions.

Using This Project Directly

If you're working with this project directly (not as a template), follow the Quick Start guide below.

Features

• ✅ Unified API Client - Single file (ApiClient.js) for all API calls (REST, gRPC, WebSocket)
• ✅ Redux State Management - Proper Redux setup with slices for authentication and API responses
• ✅ Routing - React Router with protected routes
• ✅ Authentication - Login page with gRPC authentication
• ✅ Dashboard - Home page showing all three API methods with live responses
• ✅ API Testing - Dedicated page for testing all API methods with custom parameters
• ✅ WebSocket Status - Real-time WebSocket connection status monitoring
• ✅ Layout Components - Navbar, Sidebar, and Footer
• ✅ Configuration - Centralized config in public/config.json
• ✅ Proto Support - gRPC proto files included and configured

Project Structure

REACTRTC/
├── public/
│   ├── config.json          # Application configuration
│   └── index.html
├── src/
│   ├── components/
│   │   ├── Layout/          # Navbar, Sidebar, Footer, MainLayout
│   │   ├── Login/           # Login component
│   │   ├── Home/            # Dashboard with API examples
│   │   ├── ApiTest/         # API testing component
│   │   └── ProtectedRoute.js
│   ├── services/
│   │   ├── ApiClient.js     # ⭐ SINGLE FILE FOR ALL API CALLS
│   │   └── WebSocketService.js
│   ├── store/
│   │   ├── authSlice.js     # Authentication state
│   │   ├── apiSlice.js      # API responses state
│   │   └── store.js         # Redux store configuration
│   ├── proto_generated/     # gRPC proto files
│   ├── config.js            # Config loader
│   ├── App.js               # Main app component with routing
│   └── index.js             # Entry point
└── package.json

Quick Start

1. Install Dependencies

cd REACTRTC
npm install

2. Configure Application

Edit public/config.json with your server URLs:

{
  "apiBaseUrl": "https://your-api-server.com",
  "grpc": {
    "serverUrl": "https://your-grpc-server.com"
  },
  "wsBaseUrl": "wss://your-websocket-server.com/ws",
  "proxyServer": "your-proxy-server:port"
}

3. Start Development Server

npm start

The application will open at http://localhost:3000

Usage Guide

Making API Calls

All API calls should be made through the unified ApiClient:

import ApiClient from './services/ApiClient';

// REST API
const data = await ApiClient.rest.get('/api/users');
const result = await ApiClient.rest.post('/api/users', { name: 'John' });

// gRPC API
const authResult = await ApiClient.grpc.authenticate(username, password);
const dataResult = await ApiClient.grpc.sendData(eventId, data);

// WebSocket
ApiClient.ws.connect(connectionDetails, messageHandler);
ApiClient.ws.sendMessage({ eventId: 'test', addInfo: { message: 'Hello' } });
const status = ApiClient.ws.getStatus();
ApiClient.ws.disconnect();

Adding New Routes

1. Create component in src/components/
2. Add route in src/App.js:

<Route path="new-route" element={<NewComponent />} />

3. Add navigation link in src/components/Layout/Sidebar.js

Adding New API Endpoints

All API calls go through ApiClient.js. To add new methods:

1. REST API: Add methods to restClient object
2. gRPC API: Add methods to grpcClient object
3. WebSocket: Use existing wsClient methods

See API_USAGE.md for detailed examples.

Configuration

Configuration is stored in public/config.json and loaded at runtime. This allows changing server URLs without rebuilding the application.

Configuration Structure

{
  "apiBaseUrl": "REST API base URL",
  "grpc": {
    "serverUrl": "gRPC server URL"
  },
  "wsBaseUrl": "WebSocket server URL",
  "proxyServer": "Proxy server for gRPC routing",
  "iceServers": [...],
  "defaultHeartbeatInterval": 5000,
  "reconnectInterval": 3000,
  "maxReconnectAttempts": 5
}

Redux State

Auth Slice

• user: Current user object
• token: Authentication token
• isAuthenticated: Boolean authentication status
• loginResponse: Full login response data

API Slice

• restResponses: Array of REST API responses
• grpcResponses: Array of gRPC API responses
• wsResponses: Array of WebSocket messages
• wsStatus: WebSocket connection status
• wsConnectionDetails: WebSocket connection details

Pages

Login Page (/login)

• Username/password authentication via gRPC
• Displays login response
• Redirects to home on success

Home Page (/home)

• User information display
• Quick API test buttons for all three methods
• WebSocket connection status
• Live dashboard showing all API responses

API Test Page (/api-test)

• Custom REST API testing with method selection
• Custom gRPC API testing with event ID and data
• Custom WebSocket message sending

Development Guidelines

1. Always use ApiClient - Never make direct API calls, always use ApiClient.js
2. Update Redux - Store API responses in Redux for dashboard display
3. Error Handling - Use try-catch blocks and handle errors gracefully
4. Component Structure - Keep components in their own folders with CSS files
5. Configuration - Use getConfig() from config.js for configuration values

Building for Production

npm run build

This creates an optimized production build in the build/ folder.

Troubleshooting

gRPC Connection Issues

• Check public/config.json for correct server URL
• Verify SSL certificate if using HTTPS
• Check CORS settings on server

WebSocket Connection Issues

• Ensure WebSocket URL is correct in config
• Check that token is set before connecting
• Verify server WebSocket endpoint is accessible

Authentication Issues

• Verify username/password are correct
• Check gRPC server is running and accessible
• Review browser console for detailed error messages

Support

For questions or issues, please refer to:

• API_USAGE.md - Detailed API usage examples
• PROJECT_STRUCTURE.md - Detailed project structure explanation

License

This is a common project template for organizational use.