{"id":20178764,"url":"https://github.com/chanda-abdul/angular-galleria-slideshow","last_synced_at":"2026-05-12T00:40:01.241Z","repository":{"id":108539183,"uuid":"545236042","full_name":"Chanda-Abdul/Angular-Galleria-Slideshow","owner":"Chanda-Abdul","description":"This is a solution to the Galleria Slideshow Challenge on Frontend Mentor using Angular.","archived":false,"fork":false,"pushed_at":"2023-01-24T22:46:54.000Z","size":45260,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-13T16:49:29.388Z","etag":null,"topics":["angular","dynamic-components","observables","rxjs"],"latest_commit_sha":null,"homepage":"https://legendary-maamoul-0b4a74.netlify.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/Chanda-Abdul.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":"2022-10-04T02:30:48.000Z","updated_at":"2023-12-12T19:26:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"e52f1b0c-9061-42cf-af49-4d4ad56b06cf","html_url":"https://github.com/Chanda-Abdul/Angular-Galleria-Slideshow","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chanda-Abdul%2FAngular-Galleria-Slideshow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chanda-Abdul%2FAngular-Galleria-Slideshow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chanda-Abdul%2FAngular-Galleria-Slideshow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chanda-Abdul%2FAngular-Galleria-Slideshow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Chanda-Abdul","download_url":"https://codeload.github.com/Chanda-Abdul/Angular-Galleria-Slideshow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241616683,"owners_count":19991542,"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","dynamic-components","observables","rxjs"],"created_at":"2024-11-14T02:23:20.834Z","updated_at":"2025-11-29T03:04:07.929Z","avatar_url":"https://github.com/Chanda-Abdul.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Mentor - Galleria slideshow site solution\n![Design preview for the Galleria slideshow site coding challenge](/src/assets/images/preview.jpg)\n\n\nThis is a solution to the [Galleria slideshow site challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/galleria-slideshow-site-tEA4pwsa6). Frontend Mentor challenges help you improve your coding skills by building realistic projects.\n\n\n## Table of contents\n\n- [Overview](#overview)\n  - [The challenge](#the-challenge)\n  - [Screenshots](#screenshots)\n  - [Links](#links)\n- [My process](#my-process)\n  - [Built with](#built-with)\n  - [What I learned](#what-i-learned)\n  - [Continued development](#continued-development)\n  - [Useful resources](#useful-resources)\n- [Author](#author)\n# Overview\n\n## The challenge\n\nUsers should be able to:\n- [x] View the optimal layout for the app depending on their device's screen size\n  - [x] Mobile @ \u003cb\u003e375px\u003c/b\u003e\n  - [x] Tablet @  \u003cb\u003e768px\u003c/b\u003e\n  - [x] Desktop @ \u003cb\u003e1440px\u003c/b\u003e\n- [x] See hover states for all interactive elements on the page\n- [x] Navigate the slideshow and view each painting in a lightbox\n\n\u003c!-- \n- [ ]  router by slide/:id/thumbnail\n- *Service\n  - pause show\n --\u003e\n\u003c!-- - [ ] TO-DO =\u003e Bugs\n- Why does slide one take so long?\n- start show from any slide besides index 0\n- fix loader\n --\u003e\n\n## Screenshots\n\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003e Mobile Screenshots @ 375px\u003c/b\u003e\u003c/summary\u003e\n\n-  \u003cb\u003eHome - Main Gallery\u003c/b\u003e\n\u003cimg src=\"src/assets/screens/home-gallery-mobile.png\" width=\"375px\"/\u003e\n\u003chr\u003e\n\n-  \u003cb\u003eIndividual Slide during slideshow\u003c/b\u003e\n\u003cimg src=\"src/assets/screens/home-slide-mobile.png\" width=\"375px\"/\u003e\n\u003chr\u003e\n\n-  \u003cb\u003eIndividual Slide expanded into Lightbox\u003c/b\u003e\n\u003cimg src=\"src/assets/screens/home-lightbox-mobile.png\"  width=\"375px\"/\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eTablet View @ 768px \u003c/b\u003e\u003c/summary\u003e\n\n-  \u003cb\u003eHome - Main Gallery\u003c/b\u003e\n\u003cimg src=\"src/assets/screens/home-gallery-tablet.png\" width=\"375px\"/\u003e\n\u003chr\u003e\n\n-  \u003cb\u003eIndividual Slide during slideshow\u003c/b\u003e\n\u003cimg src=\"src/assets/screens/home-slide-tablet.png\" width=\"375px\"/\u003e\n\u003chr\u003e\n\n-  \u003cb\u003eIndividual Slide expanded into Lightbox\u003c/b\u003e\n\u003cimg src=\"src/assets/screens/home-lightbox-tablet.png\"  width=\"375px\"/\u003e\n\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eDesktop View @ 1440px\u003c/b\u003e\u003c/summary\u003e\n\n-  \u003cb\u003eHome - Main Gallery\u003c/b\u003e\n\u003cimg src=\"src/assets/screens/home-gallery-desktop.png\" width=\"375px\"/\u003e\n\u003chr\u003e\n\n-  \u003cb\u003eIndividual Slide during slideshow\u003c/b\u003e\n\u003cimg src=\"src/assets/screens/home-slide-desktop.png\" width=\"375px\"/\u003e\n\u003chr\u003e\n\n-  \u003cb\u003eIndividual Slide expanded into Lightbox\u003c/b\u003e\n\u003cimg src=\"src/assets/screens/home-lightbox-desktop.png\"  width=\"375px\"/\u003e\n\n\n\u003c/details\u003e\n\n## Links\n- Solution URL: [Click for Solution](https://github.com/Chanda-Abdul/Angular-Galleria-Slideshow)\n- Live Site URL:[Click for Live Site](https://legendary-maamoul-0b4a74.netlify.app/)\n\n## My process\n- basic structure, components\n- basic css\n- functionality\n- polish css\n- fix bugs\n- deploy\n### Project Structure\n\n- `/` `Home` Component\n  - masonry gallery view of all available images for slideshow\n- `/slide/:id` `SlideDetails` Component\n  - select one image from gallery view to see slide details, but slideshow does not start\n- `/slideshow` `Slideshow` Component\n  - `SlideDetails` Component, starting with first slide\n- `/slideshow/:id` || `/lightbox`Slideshow Component\n  - `SlideDetails` Component, starting with slide `:id`\n\n# Approach\n## Built with\n\n\n\n[\u003cimg src=\"https://img.shields.io/badge/Angular-DD0031?style=for-the-badge\u0026logo=angular\u0026logoColor=white\" alt=\"Angular icon\" height=\"30\" /\u003e](https://angular.io/) \n  - [RxJs(Reactive Extensions for JavaScript)](https://rxjs.dev/guide/overview) -  a library for composing async and event-based programs by using observable sequences(think of \u003cb\u003eRxJS\u003c/b\u003e as \u003cb\u003e[Lodash](https://lodash.com/)\u003c/b\u003e for events.) \n    - [Observables\n]() \n  - [Routing]() \n  - [Dynamic Components](https://angular.io/guide/dynamic-component-loader) \n  - [Services](https://angular.io/guide/creating-injectable-service) \n\n[\u003cimg src=\"https://img.shields.io/badge/Material--UI-0081CB?style=for-the-badge\u0026logo=material-ui\u0026logoColor=white\" alt=\"Material UI icon\" height=\"30\" /\u003e](https://material.angular.io/) \n  - [Image lists\n](https://m2.material.io/components/image-lists#types) - display a collection of images in an organized grid. Image list was used to create the Masonry layout\n  - [Progress bar](https://material.angular.io/components/progress-bar/overview) - a horizontal progress-bar for indicating progress and activity.\n\n\n[\u003cimg src=\"https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white\" alt=\"TypeScript icon\" height=\"30\" /\u003e](https://www.typescriptlang.org/)[\u003cimg src=\"https://img.shields.io/badge/JavaScript-323330?style=for-the-badge\u0026logo=javascript\u0026logoColor=F7DF1E\" alt=\"JavaScript icon\" height=\"30\" /\u003e](https://www.javascript.com/)\n \u003cbr\u003e\n[\u003cimg src=\"https://img.shields.io/badge/Sass-CC6699?style=for-the-badge\u0026logo=sass\u0026logoColor=white\" alt=\"Sass icon\" height=\"30\" /\u003e](https://sass-lang.com/)\u003cimg src=\"https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge\u0026logo=css3\u0026logoColor=white\" alt=\"CSS icon\" height=\"30\" /\u003e \n- Mobile-first workflow\n- Flexbox\n- CSS Grid\n\n[\u003cimg src=\"https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge\u0026logo=html5\u0026logoColor=white\" alt=\"HTML icon\" height=\"30\" /\u003e ]()\n\u003cbr\u003e\n[\u003cimg src=\"https://img.shields.io/badge/Figma-F24E1E?style=for-the-badge\u0026logo=figma\u0026logoColor=white\" alt=\"Figma icon\" height=\"30\" /\u003e](https://www.figma.com/)\n\u003cbr\u003e\n[\u003cimg src=\"https://img.shields.io/badge/Netlify-00C7B7?style=for-the-badge\u0026logo=netlify\u0026logoColor=white\" alt=\"Netlify icon\" height=\"30\" /\u003e]()\n\n## What I learned\n\u003c!-- Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge.\n\n --\u003e\n - Observables❗️\n    - Observable Life Cycle🤔\n    - Subject\n    - Subscriptions\n    - `.pipe()`\n    - `.take()`\n    - `.takeUntil()`\n    - `.interval()`\n\u003c!-- ```js\nconst proudOfThisFunc = () =\u003e {\n  console.log(\"🎉\");\n};\n``` --\u003e\n- Masonry Layouts 🤦🏽‍♀️\n  - [Angular Material Image lists\n](https://m2.material.io/components/image-lists#types) - Image lists display a collection of images in an organized grid. Image list was used to create Masonry layout\n- using `get()`ers\n\u003c!-- ```html\n\u003ch1\u003eSome HTML code I'm proud of\u003c/h1\u003e\n``` --\u003e\n- [Dynamic Components]() \n\u003c!-- ```css\n.proud-of-this-css {\n  color: papayawhip;\n}\n``` --\u003e\n- [Services]() - for cross component communication\n- Routing\n  - child routes\n  - wildcard routes\n\n## Continued development\n### Features to Add\n\n➕ \u003cb\u003e Update masonry layout\u003c/b\u003e\n- [ ] change from vertical to horizontal masonry layout, using a different library?\n\n➕ \u003cb\u003e ⏸ button to pause slideshow\u003c/b\u003e\n\n➕ \u003cb\u003e Animations\u003c/b\u003e\n\u003c!-- - [ ] Add Cool Animations --\u003e\n\u003c!-- https://www.sliderrevolution.com/resources/css-slideshow/ --\u003e\n\u003c!-- // On click\n// Navigate to: \"Desktop - Gallery 1\";\n// Animate: Dissolve;\nanimation-timing-function: linear;\nanimation-duration: 150ms; --\u003e\n\n➕ \u003cb\u003e Option to view/add more artwork\u003c/b\u003e\n- [ ] allow user to view more artwork by incorprating an API like [Artsy](https://developers.artsy.net/) and categories/collections selection?\n\u003c!-- fake backend?\nservice, get more art?\n --\u003e\n➕ \u003cb\u003e Infinite Scroll\u003c/b\u003e\n- [ ] after adding [Artsy (/genes)](https://developers.artsy.net/v2/docs/genes) API, add infinite scroll?  \n(✨[Implementing Infinite Scrolling Using Angular](https://levelup.gitconnected.com/implementing-infinite-scrolling-using-angular-82c66f27e817))\n\n\n➕ \u003cb\u003e Add landing page?\u003c/b\u003e\n- [ ] maybe combine this project with [Frontend Mentor - Modern Art Gallery Website Solution](https://github.com/Chanda-Abdul/Modern-Art-Gallery-Website). Create some kind of \"view virtual gallery\" option\n\n\n\n## Useful resources\n- [\u003cimg src=\"https://img.shields.io/badge/YouTube-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"Youtube icon\" /\u003e What is Observable | Observables | Angular 12+](https://youtu.be/V4iMyVnQPqM) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.\n- [\u003cimg src=\"https://img.shields.io/badge/YouTube-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"Youtube icon\" /\u003e Unsubscribe to an Observable | Observables | Angular 12+](https://youtu.be/8j5kvLddNwM) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.\n- [\u003cimg src=\"https://img.shields.io/badge/YouTube-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"Youtube icon\" /\u003e Flexbox or grid - How to decide?](https://youtu.be/3elGSZSWTbM)  - This helped me for XYZ reason. I really liked this pattern and will use it going forward.\n- [\u003cimg src=\"https://img.shields.io/badge/Material--UI-0081CB?style=for-the-badge\u0026logo=material-ui\u0026logoColor=white\" alt=\"Material UI icon\"/\u003e Material Design Image Lists for Masonry Layout](https://material.io/components/image-lists) 💁🏽‍♀️ 🧱 - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.\n- [\u003cimg src=\"https://img.shields.io/badge/Pluralsight-F15B2A?style=for-the-badge\u0026logo=Pluralsight\u0026logoColor=white\" alt=\"pluralsight icon\"/\u003e RxJS in Angular: Reactive Development\nby Deborah Kurata ](https://www.pluralsight.com/courses/rxjs-angular-reactive-development) - This helped me for XYZ reason. I really liked this pattern and will use it going forward.\n- [Learn RxJs](https://www.learnrxjs.io/) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.\n- [\u003cimg src=\"https://img.shields.io/badge/Udemy-EC5252?style=for-the-badge\u0026logo=Udemy\u0026logoColor=white\" alt=\"Udemy icon\" height=\"30\" /\u003e Angular - The Complete Guide (2023 Edition) by Maximilian Schwarzmüller  =\u003e Dynamic Components\n](https://www.udemy.com/course/the-complete-guide-to-angular-2/) - This helped me for XYZ reason. I really liked this pattern and will use it going forward.\n- [Example resource 2](https://www.example.com) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.\n\n\n\n## Author\n- Frontend Mentor - [@Chanda-Abdul](https://www.frontendmentor.io/profile/Chanda-Abdul)\n- Website - [Chanda Codes](https://chandacodes.com/)\n- GitHub - [github.com/Chanda-Abdul](https://github.com/Chanda-Abdul)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanda-abdul%2Fangular-galleria-slideshow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchanda-abdul%2Fangular-galleria-slideshow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanda-abdul%2Fangular-galleria-slideshow/lists"}