{"id":30570502,"url":"https://github.com/rohitshelhalkar/jk-tech-frontend-angular-poc","last_synced_at":"2026-04-18T15:38:59.969Z","repository":{"id":309599574,"uuid":"1036170463","full_name":"rohitshelhalkar/jk-tech-frontend-angular-poc","owner":"rohitshelhalkar","description":null,"archived":false,"fork":false,"pushed_at":"2025-08-12T18:33:48.000Z","size":3827,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"develop","last_synced_at":"2025-08-29T00:38:46.985Z","etag":null,"topics":["angular","angular-cli","angular-material"],"latest_commit_sha":null,"homepage":"","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/rohitshelhalkar.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-08-11T16:57:57.000Z","updated_at":"2025-08-12T18:33:52.000Z","dependencies_parsed_at":"2025-08-12T20:41:29.499Z","dependency_job_id":null,"html_url":"https://github.com/rohitshelhalkar/jk-tech-frontend-angular-poc","commit_stats":null,"previous_names":["rohitshelhalkar/jk-tech-frontend-angular-poc"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rohitshelhalkar/jk-tech-frontend-angular-poc","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rohitshelhalkar%2Fjk-tech-frontend-angular-poc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rohitshelhalkar%2Fjk-tech-frontend-angular-poc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rohitshelhalkar%2Fjk-tech-frontend-angular-poc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rohitshelhalkar%2Fjk-tech-frontend-angular-poc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rohitshelhalkar","download_url":"https://codeload.github.com/rohitshelhalkar/jk-tech-frontend-angular-poc/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rohitshelhalkar%2Fjk-tech-frontend-angular-poc/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31974951,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T00:39:45.007Z","status":"online","status_checked_at":"2026-04-18T02:00:07.018Z","response_time":103,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["angular","angular-cli","angular-material"],"created_at":"2025-08-28T20:04:31.682Z","updated_at":"2026-04-18T15:38:54.955Z","avatar_url":"https://github.com/rohitshelhalkar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# User Document Management System - Frontend\n\nA modern Angular frontend application for document management with AI-powered Q\u0026A capabilities, built with Angular 17+ and Angular Material.\n\n## 🚀 Features\n\n### Core Functionality\n- **User Authentication** - JWT-based authentication with role-based access control\n- **Document Management** - Upload, view, download, and delete documents (PDF, DOCX, TXT)\n- **User Management** - Admin-only user CRUD operations with role management\n- **Document Processing** - Trigger and monitor document ingestion jobs\n- **AI Q\u0026A Interface** - Query documents using RAG (Retrieval-Augmented Generation)\n- **Real-time Updates** - Live status updates for document processing\n\n### User Roles\n- **Admin** - Full system access, user management, all document operations\n- **Editor** - Document management, ingestion triggers, Q\u0026A access\n- **Viewer** - View own documents, download files, Q\u0026A interface\n\n### Technical Features\n- **Responsive Design** - Mobile-first approach with Angular Material\n- **Modern Angular** - Built with Angular 17+ and standalone components\n- **TypeScript** - Strict type checking and modern JavaScript features\n- **HTTP Interceptors** - JWT token injection and global error handling\n- **Route Guards** - Authentication and role-based access protection\n- **File Upload** - Drag \u0026 drop interface with progress tracking\n- **Data Export** - CSV export functionality for users and documents\n\n## 📋 Prerequisites\n\n- Node.js 18+ and npm\n- Angular CLI 17+\n- Backend API running (NestJS Document Management System)\n\n## 🛠️ Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone \u003crepository-url\u003e\n   cd jk_tech_frontend\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm install\n   ```\n\n3. **Configure environment**\n   \n   Update `src/environments/environment.ts` with your backend API URL:\n   ```typescript\n   export const environment = {\n     production: false,\n     apiUrl: 'http://localhost:3000/api',\n     tokenKey: 'jk_tech_token',\n     refreshTokenKey: 'jk_tech_refresh_token'\n   };\n   ```\n\n4. **Start development server**\n   ```bash\n   ng serve\n   ```\n\n5. **Open browser**\n   Navigate to `http://localhost:4200`\n\n## 🏗️ Project Structure\n\n```\nsrc/\n├── app/\n│   ├── core/                     # Core functionality\n│   │   ├── guards/              # Route guards\n│   │   ├── interceptors/        # HTTP interceptors\n│   │   ├── models/              # TypeScript interfaces\n│   │   └── services/            # Business logic services\n│   ├── features/                # Feature modules\n│   │   ├── auth/               # Authentication (login/register)\n│   │   ├── dashboard/          # Main dashboard\n│   │   ├── documents/          # Document management\n│   │   ├── users/              # User management (Admin only)\n│   │   ├── ingestion/          # Processing jobs monitoring\n│   │   └── qa/                 # Q\u0026A interface\n│   ├── shared/                 # Shared components\n│   │   └── components/         # Reusable UI components\n│   ├── app.component.*         # Root component\n│   ├── app.config.ts           # App configuration\n│   └── app.routes.ts           # Route definitions\n├── environments/               # Environment configurations\n└── assets/                    # Static assets\n```\n\n## 🎯 Available Scripts\n\n- `ng serve` - Start development server\n- `ng build` - Build for production\n- `ng test` - Run unit tests\n- `ng e2e` - Run end-to-end tests\n- `ng lint` - Run linting\n- `ng generate` - Generate new components/services\n\n## 🔐 Authentication\n\n### Demo Credentials\nFor testing purposes, use these demo credentials:\n\n- **Admin**: `admin@example.com` / `Admin@1234$`\n- **Editor**: `editor@example.com` / `Editor@1234$`  \n- **Viewer**: `viewer@example.com` / `Viewer@1234$`\n\n### JWT Token Management\n- Tokens are stored in localStorage\n- Automatic token refresh on API calls\n- Secure logout with token cleanup\n- Route protection based on authentication status\n\n## 📱 User Interface\n\n### Components Overview\n- **Responsive Design** - Works on desktop, tablet, and mobile\n- **Angular Material** - Consistent Material Design components\n- **Dark/Light Theme** - Follows system preferences\n- **Accessibility** - WCAG compliant with proper ARIA labels\n\n### Key Pages\n1. **Login/Register** - User authentication with form validation\n2. **Dashboard** - Role-based overview with quick actions and statistics\n3. **Documents** - File management with upload, download, and filtering\n4. **Users** - Admin-only user management with CRUD operations\n5. **Ingestion Jobs** - Monitor document processing status\n6. **Q\u0026A Interface** - Query documents using AI\n\n## 🔄 API Integration\n\n### Backend Requirements\nThe frontend expects a REST API with the following endpoints:\n\n```typescript\n// Authentication\nPOST /auth/login          # User login\nPOST /auth/register       # User registration\nPOST /auth/refresh        # Token refresh\n\n// Users (Admin only)\nGET    /users             # List users\nPOST   /users             # Create user\nPUT    /users/:id         # Update user\nDELETE /users/:id         # Delete user\n\n// Documents\nGET    /documents         # List user documents\nPOST   /documents/upload  # Upload document\nGET    /documents/:id/download # Download document\nDELETE /documents/:id     # Delete document\nPOST   /documents/:id/ingest   # Trigger processing\n\n// Ingestion Jobs\nGET    /ingestion/jobs    # List processing jobs\nGET    /ingestion/jobs/:id # Get job details\n\n// Q\u0026A\nPOST   /qa/query          # Submit question\nGET    /qa/history        # Get query history\n```\n\n### Error Handling\n- Global HTTP error interceptor\n- User-friendly error messages\n- Automatic retry for failed requests\n- Network connectivity handling\n\n## 🧪 Testing\n\n### Unit Tests (Jasmine/Karma)\n```bash\nng test\n```\n\n### End-to-End Tests (Cypress)\n```bash\nng e2e\n```\n\n### Test Coverage\n- Services: Business logic and API interactions\n- Components: User interactions and rendering\n- Guards: Route protection logic\n- Interceptors: HTTP request/response handling\n\n## 📦 Build \u0026 Deployment\n\n### Development Build\n```bash\nng build\n```\n\n### Production Build\n```bash\nng build --configuration production\n```\n\n### Build Optimization\n- Tree shaking for smaller bundle size\n- Lazy loading for feature modules\n- Service workers for caching (optional)\n- AOT compilation for better performance\n\n## 🔧 Configuration\n\n### Environment Variables\n- `apiUrl` - Backend API base URL\n- `tokenKey` - localStorage key for JWT token\n- `refreshTokenKey` - localStorage key for refresh token\n- `production` - Production mode flag\n\n### Angular Material Theme\nCustomize the theme in `src/styles.scss`:\n```scss\n@import '~@angular/material/prebuilt-themes/purple-green.css';\n```\n\n## 🐛 Troubleshooting\n\n### Common Issues\n\n1. **CORS Errors**\n   - Ensure backend allows frontend origin\n   - Check API URL in environment configuration\n\n2. **Authentication Issues**\n   - Clear localStorage tokens\n   - Verify backend JWT configuration\n   - Check token expiration times\n\n3. **File Upload Failures**\n   - Verify file size limits (max 10MB)\n   - Check supported file types (PDF, DOCX, TXT)\n   - Ensure backend upload endpoint is working\n\n4. **Build Errors**\n   - Clear node_modules and reinstall\n   - Update Angular CLI to latest version\n   - Check TypeScript compatibility\n\n## 📈 Performance Optimization\n\n- **Lazy Loading** - Feature modules loaded on demand\n- **OnPush Strategy** - Optimized change detection\n- **TrackBy Functions** - Efficient list rendering\n- **HTTP Caching** - Cached API responses\n- **Bundle Analysis** - Use `ng build --stats-json` and webpack-bundle-analyzer\n\n## 🔒 Security Considerations\n\n- **JWT Storage** - Tokens stored in localStorage (consider httpOnly cookies for production)\n- **Route Guards** - Prevent unauthorized access\n- **Input Validation** - Client and server-side validation\n- **XSS Protection** - Angular's built-in sanitization\n- **CSRF Protection** - Implement CSRF tokens if needed\n\n\n**Built with ❤️ using Angular 17+ and Angular Material**","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frohitshelhalkar%2Fjk-tech-frontend-angular-poc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frohitshelhalkar%2Fjk-tech-frontend-angular-poc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frohitshelhalkar%2Fjk-tech-frontend-angular-poc/lists"}