Frontend Mentor - Galleria slideshow site solution

This is a solution to the Galleria slideshow site challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
  • Mobile @ 375px
  • Tablet @ 768px
  • Desktop @ 1440px
• See hover states for all interactive elements on the page
• 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
• Live Site URL:Click for Live Site

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 || /lightboxSlideshow Component
  • SlideDetails Component, starting with slide :id

Approach

Built with

• RxJs(Reactive Extensions for JavaScript) - a library for composing async and event-based programs by using observable sequences(think of RxJS as Lodash for events.)
  • Observables
• Routing
• Dynamic Components
• Services

• Image lists - display a collection of images in an organized grid. Image list was used to create the Masonry layout
• Progress bar - a horizontal progress-bar for indicating progress and activity.

• Mobile-first workflow
• Flexbox
• CSS Grid

What I learned

• Observables❗️
  • Observable Life Cycle🤔
  • Subject
  • Subscriptions
  • .pipe()
  • .take()
  • .takeUntil()
  • .interval()

• Masonry Layouts 🤦🏽‍♀️
  • Angular Material Image lists - 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 and categories/collections selection?

➕ Infinite Scroll

• after adding Artsy (/genes) API, add infinite scroll?
  (✨Implementing Infinite Scrolling Using Angular)

➕ Add landing page?

• maybe combine this project with Frontend Mentor - Modern Art Gallery Website Solution. Create some kind of "view virtual gallery" option

Useful resources

• What is Observable | Observables | Angular 12+ - 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+ - 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? - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
• Material Design Image Lists for Masonry Layout 💁🏽‍♀️ 🧱 - 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 - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
• Learn RxJs - 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 - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
• Example resource 2 - 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
• Website - Chanda Codes
• GitHub - github.com/Chanda-Abdul