{"id":20200756,"url":"https://github.com/hackpoint/categories-widget","last_synced_at":"2025-03-03T08:43:47.474Z","repository":{"id":262577959,"uuid":"887689019","full_name":"HackPoint/categories-widget","owner":"HackPoint","description":null,"archived":false,"fork":false,"pushed_at":"2024-11-13T06:11:28.000Z","size":302,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-13T20:15:21.095Z","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/HackPoint.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}},"created_at":"2024-11-13T05:35:47.000Z","updated_at":"2024-11-13T06:11:31.000Z","dependencies_parsed_at":"2024-11-13T07:19:02.354Z","dependency_job_id":"c4be05a5-eb8e-4742-8427-54cc755562a1","html_url":"https://github.com/HackPoint/categories-widget","commit_stats":null,"previous_names":["hackpoint/categories-widget"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HackPoint%2Fcategories-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HackPoint%2Fcategories-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HackPoint%2Fcategories-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HackPoint%2Fcategories-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HackPoint","download_url":"https://codeload.github.com/HackPoint/categories-widget/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241637191,"owners_count":19994927,"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":"2024-11-14T04:45:33.524Z","updated_at":"2025-03-03T08:43:47.441Z","avatar_url":"https://github.com/HackPoint.png","language":"TypeScript","readme":"\n# CityShob\n\nCityShob is an interactive platform designed to facilitate and streamline geo-object searches, offering robust UI components, lazy-loaded categories, and a streamlined, user-friendly experience. Built with Angular 18, RxJS, and Tailwind, CityShob leverages an Angular signal-based state management approach to deliver an efficient, reactive, and highly responsive interface.\n\n---\n\n## Getting Started\n\nFollow these instructions to clone, install, build, and run CityShob locally:\n\n### Installation and Setup\n\n1. **Clone the repository**:\n   ```bash\n   git clone https://github.com/HackPoint/cityshob.git\n   ```\n2. **Navigate to the application directory and install dependencies**:\n   ```bash\n   cd \u003capplication-location\u003e\n   npm install\n   ```\n3. **Build the application**:\n   ```bash\n   nx run widget:build\n   ```\n4. **Run Docker Compose to start services**:\n   ```bash\n   docker-compose up --build\n   ```\n5. **Seed the database** (if required):\n   ```bash\n   npm run seed\n   ```\n6. **Seed the database** (if required):\n   ```bash\n   nx run widget-ui:serve\n   ```\n7. **Access the application**:\n   Open [http://localhost:4200](http://localhost:4200) in your browser.\n\n---\nScreenshot:\n![Application Screenshot](./assets/screenshot.png)\n\n\n---\n## Questions Answered\n\n### Plugins/Extensions\n\n1. **Tailwind CSS**: Enables rapid, utility-first CSS styling. Tailwind allows for efficient component styling without needing custom CSS, enabling developers to focus on building responsive and consistent UI elements.\n2. **RxJS**: Used extensively for state management and reactive programming within Angular components. By leveraging RxJS, CityShob provides a seamless, responsive UI experience.\n3. **Docker**: Used to containerize the application, ensuring a consistent environment for development, testing, and deployment. Docker enables simplified setup with `docker-compose` for a full-service local environment.\n\n### Multilingual Support\n\nTo implement multilingual support, we would leverage **Angular's i18n library** on the client side. For managing the translations of geo-object names and types, here’s the recommended approach:\n\n1. **Define Translation Keys**: Define translation keys for each category, type, and text item, allowing Angular’s `i18n` service to handle text translations efficiently across components.\n2. **Store Translations on Server**: Store translations in JSON or a database, accessible via an API endpoint. This enables language updates without needing client changes.\n3. **Dynamic Loading**: Allow the application to request translations based on the user’s language preference. With Angular’s `LOCALE_ID` and `translateService`, the UI would load the relevant language assets dynamically.\n4. **User Preferences**: Store the user’s language preference in local storage or as part of the user profile on the server. This allows persistence of language settings across sessions.\n\n### Handling Data Formats\n\nTo handle server-sent data in different formats (e.g., PascalCase while using camelCase internally), we would use a mapping solution to reformat the data upon retrieval. For instance, if the server returns `SubCategories` and `Children`, we would convert these to `subCategories` and `children` using an interceptor or a utility function.\n\n#### Example:\n\n```typescript\nfunction formatKeys(obj: any): any {\n  if (Array.isArray(obj)) {\n    return obj.map((item) =\u003e formatKeys(item));\n  } else if (obj !== null \u0026\u0026 typeof obj === 'object') {\n    return Object.keys(obj).reduce((acc, key) =\u003e {\n      const camelCaseKey = key.charAt(0).toLowerCase() + key.slice(1);\n      acc[camelCaseKey] = formatKeys(obj[key]);\n      return acc;\n    }, {} as any);\n  }\n  return obj;\n}\n```\n\n### Flowchart\n\nTBD\n\n#### Flowchart Overview\n\n1. **Page Load**: The user opens the page.\n2. **Initial Data Fetch**: Default categories are loaded and displayed.\n3. **Dropdown Selection**: The user selects a category from the dropdown.\n  - **Dropdown Update**: Updates the UI with the chosen category and triggers data filtering.\n4. **Search Interaction**: The user enters search terms.\n  - **Filtered Fetch**: Based on search terms, a filtered data request is sent.\n  - **Results Displayed**: Matching categories and subcategories are shown.\n5. **Lazy Loading in Accordion**: When expanding a category, lazy-loaded data retrieval occurs only for that section.\n\n---\n\n## Additional Information\n\nThis project utilizes Angular’s latest features, including signals and reactive state management, for optimal performance. Tailwind CSS provides the styling foundation, ensuring a visually consistent and responsive UI. Docker streamlines setup and ensures compatibility across development and production environments.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhackpoint%2Fcategories-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhackpoint%2Fcategories-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhackpoint%2Fcategories-widget/lists"}