{"id":28087701,"url":"https://github.com/dataideaorg/dataidea-logger-frontend","last_synced_at":"2025-05-13T11:42:30.817Z","repository":{"id":283014861,"uuid":"950156190","full_name":"dataideaorg/dataidea-logger-frontend","owner":"dataideaorg","description":null,"archived":false,"fork":false,"pushed_at":"2025-04-15T21:32:12.000Z","size":16178,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-15T22:27:52.160Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dataideaorg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-03-17T18:05:32.000Z","updated_at":"2025-04-15T21:28:28.000Z","dependencies_parsed_at":"2025-04-15T22:34:39.651Z","dependency_job_id":null,"html_url":"https://github.com/dataideaorg/dataidea-logger-frontend","commit_stats":null,"previous_names":["dataideaorg/dataidea-logger-frontend"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dataideaorg%2Fdataidea-logger-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dataideaorg%2Fdataidea-logger-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dataideaorg%2Fdataidea-logger-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dataideaorg%2Fdataidea-logger-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dataideaorg","download_url":"https://codeload.github.com/dataideaorg/dataidea-logger-frontend/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253936920,"owners_count":21987250,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-13T11:42:30.252Z","updated_at":"2025-05-13T11:42:30.793Z","avatar_url":"https://github.com/dataideaorg.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DataIdea Logger - Frontend\n\nA modern React-based dashboard for the DataIdea Logger service, allowing users to manage API keys and view both event logs and LLM (Large Language Model) interaction logs.\n\n## Features\n\n- **User Authentication**: Secure login and registration\n- **Dashboard**: Overview of available features, statistics, and quick-start guide\n- **API Key Management**: Create and manage API keys for authentication\n- **Dual Logging System**:\n  - **Event Logger**: Track application events with severity levels\n  - **LLM Logger**: Record AI model interactions with queries and responses\n- **User Profile**: Manage user account settings\n\n## Technologies Used\n\n- **React 18**: Modern UI library for building interactive interfaces\n- **TypeScript**: Type-safe JavaScript for better developer experience\n- **Vite**: Next-generation frontend tooling for fast development\n- **Material UI**: Component library for consistent and responsive design\n- **React Router**: Client-side routing for single-page application\n- **JWT Authentication**: Secure user authentication\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js (v16 or higher)\n- npm or yarn package manager\n\n### Installation\n\n1. Clone the repository\n   ```\n   git clone https://github.com/your-org/dataidea-logger.git\n   cd dataidea-logger/frontend\n   ```\n\n2. Install dependencies\n   ```\n   npm install\n   # or\n   yarn install\n   ```\n\n3. Configure environment variables\n   Create a `.env` file in the frontend directory with the following:\n   ```\n   VITE_API_URL=http://localhost:8000\n   ```\n\n4. Start the development server\n   ```\n   npm run dev\n   # or\n   yarn dev\n   ```\n\n5. Access the application at `http://localhost:5173`\n\n## Usage Examples\n\n### Client-Side Integration\n\nHere are examples of how you can integrate the logger into your client applications:\n\n#### Event Logging\n\n```typescript\n// utils/logger.ts\nimport axios from 'axios';\n\ninterface EventLogParams {\n  apiKey: string;\n  userId: string;\n  message: string;\n  level: 'info' | 'warning' | 'error' | 'debug';\n  metadata?: Record\u003cstring, any\u003e;\n}\n\nexport async function logEvent({\n  apiKey,\n  userId,\n  message,\n  level,\n  metadata = {}\n}: EventLogParams): Promise\u003cvoid\u003e {\n  try {\n    await axios.post('http://localhost:8000/api/event-log/', {\n      api_key: apiKey,\n      user_id: userId,\n      message,\n      level,\n      metadata\n    });\n  } catch (error) {\n    console.error('Failed to log event:', error);\n  }\n}\n\n// Usage example\nlogEvent({\n  apiKey: 'your-api-key',\n  userId: 'user-123',\n  message: 'User clicked checkout button',\n  level: 'info',\n  metadata: {\n    page: 'checkout',\n    productIds: ['prod-1', 'prod-2'],\n    totalAmount: 129.99\n  }\n});\n```\n\n#### LLM Logging\n\n```typescript\n// utils/llmLogger.ts\nimport axios from 'axios';\n\ninterface LlmLogParams {\n  apiKey: string;\n  userId: string;\n  source: string;\n  query: string;\n  response: string;\n  metadata?: Record\u003cstring, any\u003e;\n}\n\nexport async function logLlmInteraction({\n  apiKey,\n  userId,\n  source,\n  query,\n  response,\n  metadata = {}\n}: LlmLogParams): Promise\u003cvoid\u003e {\n  try {\n    await axios.post('http://localhost:8000/api/llm-log/', {\n      api_key: apiKey,\n      user_id: userId,\n      source,\n      query,\n      response,\n      metadata\n    });\n  } catch (error) {\n    console.error('Failed to log LLM interaction:', error);\n  }\n}\n\n// Usage example\nlogLlmInteraction({\n  apiKey: 'your-api-key',\n  userId: 'user-123',\n  source: 'ChatGPT-4',\n  query: 'How do I reset my password?',\n  response: 'You can reset your password by clicking the \"Forgot Password\" link on the login page...',\n  metadata: {\n    modelVersion: 'gpt-4-0613',\n    tokens: {\n      prompt: 9,\n      completion: 24,\n      total: 33\n    },\n    latencyMs: 450\n  }\n});\n```\n\n## Building for Production\n\nTo create a production build:\n\n```\nnpm run build\n# or\nyarn build\n```\n\nThe build files will be generated in the `dist` directory.\n\n## Connecting to the Backend\n\nThe frontend expects a DataIdea Logger backend service running at the URL specified in the `VITE_API_URL` environment variable. See the backend README for instructions on setting up the API service.\n\n## Project Structure\n\n```\nsrc/\n├── assets/         # Static assets like images and icons\n├── components/     # Reusable UI components\n├── context/        # React context for state management\n├── App.tsx         # Main application component\n├── App.css         # Application-specific styles\n├── index.css       # Global styles\n└── main.tsx        # Application entry point\n```\n\n## Contributing\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdataideaorg%2Fdataidea-logger-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdataideaorg%2Fdataidea-logger-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdataideaorg%2Fdataidea-logger-frontend/lists"}