Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/chanda-abdul/angular-galleria-slideshow

This is a solution to the Galleria Slideshow Challenge on Frontend Mentor using Angular.
https://github.com/chanda-abdul/angular-galleria-slideshow

angular dynamic-components observables rxjs

Last synced: about 1 month ago
JSON representation

This is a solution to the Galleria Slideshow Challenge on Frontend Mentor using Angular.

Host: GitHub
URL: https://github.com/chanda-abdul/angular-galleria-slideshow
Owner: Chanda-Abdul
Created: 2022-10-04T02:30:48.000Z (over 2 years ago)
Default Branch: master
Last Pushed: 2023-01-24T22:46:54.000Z (about 2 years ago)
Last Synced: 2024-11-14T02:23:50.307Z (3 months ago)
Topics: angular, dynamic-components, observables, rxjs
Language: TypeScript
Homepage: https://legendary-maamoul-0b4a74.netlify.app/
Size: 43.2 MB
Stars: 1
Watchers: 2
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # Frontend Mentor - Galleria slideshow site solution

![Design preview for the Galleria slideshow site coding challenge](/src/assets/images/preview.jpg)

This 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.

## Table of contents

- [Overview](#overview)

  - [The challenge](#the-challenge)

  - [Screenshots](#screenshots)

  - [Links](#links)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

  - [Continued development](#continued-development)

  - [Useful resources](#useful-resources)

- [Author](#author)

# Overview

## The challenge

Users should be able to:

- [x] View the optimal layout for the app depending on their device's screen size

  - [x] Mobile @ 375px

  - [x] Tablet @  768px

  - [x] Desktop @ 1440px

- [x] See hover states for all interactive elements on the page

- [x] Navigate the slideshow and view each painting in a lightbox

## Screenshots

 Mobile Screenshots @ 375px

-  Home - Main Gallery





-  Individual Slide during slideshow





-  Individual Slide expanded into Lightbox



Tablet View @ 768px 

-  Home - Main Gallery





-  Individual Slide during slideshow





-  Individual Slide expanded into Lightbox



Desktop View @ 1440px

-  Home - Main Gallery





-  Individual Slide during slideshow





-  Individual Slide expanded into Lightbox



## Links

- Solution URL: [Click for Solution](https://github.com/Chanda-Abdul/Angular-Galleria-Slideshow)

- Live Site URL:[Click for Live Site](https://legendary-maamoul-0b4a74.netlify.app/)

## My process

- basic structure, components

- basic css

- functionality

- polish css

- fix bugs

- deploy

### Project Structure

- `/` `Home` Component

  - masonry gallery view of all available images for slideshow

- `/slide/:id` `SlideDetails` Component

  - select one image from gallery view to see slide details, but slideshow does not start

- `/slideshow` `Slideshow` Component

  - `SlideDetails` Component, starting with first slide

- `/slideshow/:id` || `/lightbox`Slideshow Component

  - `SlideDetails` Component, starting with slide `:id`

# Approach

## Built with

[](https://angular.io/) 

  - [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 RxJS as [Lodash](https://lodash.com/) for events.) 

    - [Observables

]() 

  - [Routing]() 

  - [Dynamic Components](https://angular.io/guide/dynamic-component-loader) 

  - [Services](https://angular.io/guide/creating-injectable-service) 

[](https://material.angular.io/) 

  - [Image lists

](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

  - [Progress bar](https://material.angular.io/components/progress-bar/overview) - a horizontal progress-bar for indicating progress and activity.

[](https://www.typescriptlang.org/)[](https://www.javascript.com/)

 


[](https://sass-lang.com/) 

- Mobile-first workflow

- Flexbox

- CSS Grid

[ ]()




[](https://www.figma.com/)




[]()

## What I learned

 - Observables❗️

    - Observable Life Cycle🤔

    - Subject

    - Subscriptions

    - `.pipe()`

    - `.take()`

    - `.takeUntil()`

    - `.interval()`

- Masonry Layouts 🤦🏽‍♀️

  - [Angular Material Image lists

](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

- using `get()`ers

- [Dynamic Components]() 

- [Services]() - for cross component communication

- Routing

  - child routes

  - wildcard routes

## Continued development

### Features to Add

➕  Update masonry layout

- [ ] change from vertical to horizontal masonry layout, using a different library?

➕  ⏸ button to pause slideshow

➕  Animations

➕  Option to view/add more artwork

- [ ] allow user to view more artwork by incorprating an API like [Artsy](https://developers.artsy.net/) and categories/collections selection?

➕  Infinite Scroll

- [ ] after adding [Artsy (/genes)](https://developers.artsy.net/v2/docs/genes) API, add infinite scroll?  

(✨[Implementing Infinite Scrolling Using Angular](https://levelup.gitconnected.com/implementing-infinite-scrolling-using-angular-82c66f27e817))

➕  Add landing page?

- [ ] 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

## Useful resources

- [ 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.

- [ 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.

- [ 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.

- [ 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.

- [ RxJS in Angular: Reactive Development

by 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.

- [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.

- [ Angular - The Complete Guide (2023 Edition) by Maximilian Schwarzmüller  => Dynamic Components

](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.

- [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.

## Author

- Frontend Mentor - [@Chanda-Abdul](https://www.frontendmentor.io/profile/Chanda-Abdul)

- Website - [Chanda Codes](https://chandacodes.com/)

- GitHub - [github.com/Chanda-Abdul](https://github.com/Chanda-Abdul)