{"id":26149032,"url":"https://github.com/aanggaadc/dev-different-client","last_synced_at":"2026-05-05T02:36:04.036Z","repository":{"id":281713211,"uuid":"946167364","full_name":"aanggaadc/dev-different-client","owner":"aanggaadc","description":null,"archived":false,"fork":false,"pushed_at":"2025-03-10T18:46:29.000Z","size":134,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-10T19:38:03.586Z","etag":null,"topics":["angular","typescript"],"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/aanggaadc.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":"2025-03-10T18:04:00.000Z","updated_at":"2025-03-10T18:46:32.000Z","dependencies_parsed_at":"2025-03-10T19:48:08.163Z","dependency_job_id":null,"html_url":"https://github.com/aanggaadc/dev-different-client","commit_stats":null,"previous_names":["aanggaadc/dev-different-client"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aanggaadc%2Fdev-different-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aanggaadc%2Fdev-different-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aanggaadc%2Fdev-different-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aanggaadc%2Fdev-different-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aanggaadc","download_url":"https://codeload.github.com/aanggaadc/dev-different-client/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242975484,"owners_count":20215461,"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":["angular","typescript"],"created_at":"2025-03-11T05:22:38.492Z","updated_at":"2026-05-05T02:36:03.988Z","avatar_url":"https://github.com/aanggaadc.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Image Upload (Frontend) Documentation\n\n## Overview\nThis is an Angular 19 frontend application that allows users to upload images and retrieve them from a backend server. The application consists of a simple form for uploading images and a gallery to display uploaded images.\n\n## Prerequisites\nBefore running the application, ensure you have the following installed:\n- [Node.js](https://nodejs.org/) (LTS version recommended)\n- [Angular CLI](https://angular.io/cli)\n- A running backend server (configured separately)\n\n## Installation\n1. Clone the repository:\n   ```sh\n   git clone https://github.com/aanggaadc/dev-different-client.git\n   cd dev-different-client\n   ```\n2. Install dependencies:\n   ```sh\n   npm install\n   ```\n\n## Configuration\nThe API URL is managed using Angular environments. Update `src/environments/environment.ts` with the correct backend URL:\n```ts\nexport const environment = {\n  production: false,\n  apiUrl: 'http://localhost:5000',\n};\n```\n\n## Project Structure\n```\nfrontend/\n│── src/\n│   ├── app/\n│   │   ├── components/\n│   │   │   ├── image-upload/\n│   │   ├── services/\n│   │   │   ├── image.service.ts\n│   │   ├── app.component.ts\n│   │   ├── app.module.ts\n│── environments/\n│── assets/\n```\n\n## Usage\n### Running the Application\nStart the development server:\n```sh\nng serve\n```\nThe application will be accessible at `http://localhost:4200/`.\n\n### Uploading an Image\n1. Click the **Choose File** button.\n2. Select an image file from your computer.\n3. Click the **Upload** button to send the image to the backend.\n\n### Viewing Uploaded Images\n- The uploaded images will be displayed after upload process success.\n- Each image is fetched from the backend dynamically.\n\n## Components\n### Image Upload Component (`image-upload`)\nHandles image selection and upload functionality.\n#### Methods:\n- `onFileSelected(event: Event)`: Handles file selection.\n- `uploadImage()`: Sends the image to the backend.\n\n### Image Gallery Component (`image-gallery`)\nDisplays uploaded images.\n#### Methods:\n- `fetchImages()`: Retrieves images from the backend and displays them.\n\n## Service\n### ImageService (`image.service.ts`)\nHandles HTTP requests to interact with the backend.\n#### Methods:\n- `uploadImage(image: File)`: Uploads an image.\n- `getImages()`: Retrieves all images.\n\n## Deployment\n1. Build the project:\n   ```sh\n   ng build --configuration=production\n   ```\n2. The build output will be in `dist/`. Deploy it to a web server.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faanggaadc%2Fdev-different-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faanggaadc%2Fdev-different-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faanggaadc%2Fdev-different-client/lists"}