{"id":22211838,"url":"https://github.com/manthanank/image-gallery-app","last_synced_at":"2026-04-29T08:07:05.773Z","repository":{"id":264512720,"uuid":"832754412","full_name":"manthanank/image-gallery-app","owner":"manthanank","description":"Angular Image Gallery with Tailwind CSS and Unsplash API","archived":false,"fork":false,"pushed_at":"2024-07-23T16:51:36.000Z","size":132,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-16T14:59:36.300Z","etag":null,"topics":["angular","gallery"],"latest_commit_sha":null,"homepage":"https://image-gallery-app-bay.vercel.app","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/manthanank.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},"funding":{"github":["manthanank"],"open_collective":"manthanank","buy_me_a_coffee":"manthanank","patreon":"manthanank"}},"created_at":"2024-07-23T16:51:33.000Z","updated_at":"2024-08-05T05:09:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"b0e7092b-985e-4a95-b232-5629558d7823","html_url":"https://github.com/manthanank/image-gallery-app","commit_stats":null,"previous_names":["manthanank/image-gallery-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Fimage-gallery-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Fimage-gallery-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Fimage-gallery-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Fimage-gallery-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/manthanank","download_url":"https://codeload.github.com/manthanank/image-gallery-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245407763,"owners_count":20610232,"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","gallery"],"created_at":"2024-12-02T20:39:03.313Z","updated_at":"2026-04-29T08:07:05.686Z","avatar_url":"https://github.com/manthanank.png","language":"TypeScript","funding_links":["https://github.com/sponsors/manthanank","https://opencollective.com/manthanank","https://buymeacoffee.com/manthanank","https://patreon.com/manthanank"],"categories":[],"sub_categories":[],"readme":"# Angular Image Gallery with Tailwind CSS and Unsplash API\n\nThis project is an image gallery built with Angular and styled with Tailwind CSS. It fetches images from the Unsplash API and allows users to filter images based on their orientation (horizontal or vertical).\n\n## Table of Contents\n\n- [Features](#features)\n- [Prerequisites](#prerequisites)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Project Structure](#project-structure)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Features\n\n- Fetch images from the Unsplash API\n- Display images in a responsive grid\n- Filter images based on orientation (all, horizontal, vertical)\n- Styled with Tailwind CSS\n\n## Prerequisites\n\n- Node.js (v12 or higher)\n- Angular CLI (v11 or higher)\n- Unsplash API Access Key\n\n## Installation\n\n1. **Clone the repository:**\n\n   ```bash\n   git clone https://github.com/your-username/image-gallery.git\n   cd image-gallery\n   ```\n\n2. **Install dependencies:**\n\n   ```bash\n   npm install\n   ```\n\n3. **Set up Tailwind CSS:**\n   - Install Tailwind CSS and its peer dependencies:\n\n     ```bash\n     npm install -D tailwindcss postcss autoprefixer\n     ```\n\n   - Generate the Tailwind CSS configuration files:\n\n     ```bash\n     npx tailwindcss init\n     ```\n\n   - Configure Tailwind to remove unused styles in production by updating `tailwind.config.js`:\n\n     ```javascript\n     module.exports = {\n       content: [\n         \"./src/**/*.{html,ts}\",\n       ],\n       theme: {\n         extend: {},\n       },\n       plugins: [],\n     }\n     ```\n\n   - Create a `postcss.config.js` file at the root of your project:\n\n     ```javascript\n     module.exports = {\n       plugins: {\n         tailwindcss: {},\n         autoprefixer: {},\n       },\n     }\n     ```\n\n   - Include Tailwind in your CSS by updating `src/styles.css`:\n\n     ```css\n     @tailwind base;\n     @tailwind components;\n     @tailwind utilities;\n     ```\n\n4. **Set up Unsplash API:**\n   - Create an Unsplash Developer Account at [Unsplash Developer](https://unsplash.com/developers).\n   - Create a new application to get your Access Key.\n   - Update `unsplash.service.ts` with your Unsplash Access Key:\n\n     ```typescript\n     private accessKey = 'YOUR_UNSPLASH_ACCESS_KEY';\n     ```\n\n## Usage\n\n1. **Run the project:**\n\n   ```bash\n   ng serve\n   ```\n\n   The app will be served at `http://localhost:4200`.\n\n2. **Filter images:**\n   - Use the dropdown to filter images by orientation (all, horizontal, vertical).\n\n## Project Structure\n\n```plaintext\nimage-gallery/\n├── src/\n│   ├── app/\n│   │   ├── image-gallery/\n│   │   │   ├── image-gallery.component.css\n│   │   │   ├── image-gallery.component.html\n│   │   │   ├── image-gallery.component.ts\n│   │   │   ├── image-gallery.component.spec.ts\n|   |   |   services/\n│   │   │   ├── unsplash.service.ts\n│   │   |   ├── models/\n│   │   │   ├── image.model.ts\n│   │   |   ├── unsplash.model.ts\n│   │   ├── app.component.scss\n│   │   ├── app.component.html\n│   │   ├── app.component.ts\n│   │   ├── app.module.ts\n│   ├── assets/\n│   ├── styles.scss\n├── tailwind.config.js\n├── postcss.config.js\n├── package.json\n├── angular.json\n├── README.md\n```\n\n## Contributing\n\nContributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n---\n\nFeel free to modify the content to better fit your project's specifics, such as repository URL, contribution guidelines, and any additional features.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanthanank%2Fimage-gallery-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanthanank%2Fimage-gallery-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanthanank%2Fimage-gallery-app/lists"}