
![App Screenshot](/images/projects/myUnsplash/my-unsplash.webp#postMiniImage 'Screenshot of app')

## Table of contents

- [Introduction](#introduction)
- [Project description](#project-description)
  - [What features does My Unsplash have](#what-features-does-my-unsplash-have)
  - [What features does My Unsplash not have](#what-features-does-my-unsplash-not-have)
- [Created with](#created-with)
- [How it's working](#how-it-s-working)
  - [Design](#design)
  - [Performance](#performance)
  - [Firebase](#firebase)
  - [Adding photos](#adding-photos)
  - [Redux Toolkit](#redux-toolkit)
- [Conclusions](#conclusions)

## Introduction

After creating a few projects using external APIs, I wanted to go a step further and gain experience with Firebase and Next.js. I had previously used Firebase when I was creating [Image Uploader](https://github.com/Kielx/image-uploader) - which I also used in this project, but it was a good way to rehearse and practice using Firebase Storage again. In addition, I could limit myself to only using Firebase Storage to make it easier to digest the topic in smaller portions. Additionally, it was a good opportunity to learn how to use Next.js. Previously, I created projects in Gatsby, but seeing the popularity of Next.js, I decided that it is high time to use this framework as well. The whole thing was completed by Redux Toolkit, which I used to handle the global state of the application.

## Project description

My Unsplash is my solution to [challenge](https://devchallenges.io/challenges/rYyhwJAxMfES5jNQ9YsP). This is my version of the application based on the popular Unsplash website. The application is a digital gallery that allows you to add and remove photos and display them in a Masonry layout.

Does that mean all I had to do was copy the finished design and called it my project? Not at all. For this project, I had design files at my disposal, but I had to translate their implementation into TailwindCSS. In addition, I had to choose a solution responsible for Masonry Layout and create all facilities responsible for adding and storing photos.

### What features does My Unsplash have

- The application presents the added photos in the Masonry layout - It is a system in which one axis uses a strict grid system - most often in the case of columns, while the other axis (rows) are matched to the gaps formed by shorter elements. The items in the following lines float up to fill the gaps completely.
- Users can add photos to the gallery using a dedicated drag'n'drop component
- New photos are displayed immediately after being added at the very top of the gallery
- A progress bar is displayed while adding images
- Users can delete photos from the gallery
- Users can search photos by name
- Photos are dynamically loaded using the infinite scroll
- Dark and light mode, the photos adjust the contrast accordingly for easier viewing against a dark background
- The website works as an SPA (Single Page Application)
- The application is responsive and should look correct on all types of devices that support modern browsers
- IP Tracker can be operated with just the keyboard

### What features does My Unsplash not have

- The site does not have login and user accounts, so each user can add photos with a maximum size of 5MB
- Due to the above, in theory, anyone can remove all photos from the gallery (the question remains, what for?). I do not aspire to compete with professional websites such as Unsplash or Pexels, and the project is only a hobby solution, so I did not implement login and user accounts.
- Due to the fact that the page loads only a certain number of photos when searching, it is limited to searching only among those that have already been downloaded. Due to time constraints, I did not create another option, although in the future I may solve it by creating a separate search window and displaying results based on the searched phrase.

![App in action](/images/projects/myUnsplash/myUnsplash.mp4#postVideo)

## Created with

- [Next.js](https://nextjs.org/)
- [Firebase](https://firebase.google.com/)
- [Redux Toolkit](https://redux-toolkit.js.org/)
- [Tailwind CSS](https://tailwindcss.com/)

## How it's working

For the application to work as intended, it was necessary to create the following functionalities:

### Design

The idea was to recreate the existing Masonry-style interface. The website had to be fully responsive and display a button that allows you to delete the photo after hovering over it with the mouse cursor. The masonry layout is provided by the [React Masonry CSS](https://www.npmjs.com/package/react-masonry-css). The website has also been equipped with the Dark Mode.

### Performance

Downloading and uploading all photos from the gallery is a huge challenge even for the best internet connection. Users using mobile devices would have to wait a long time before the page loads. One of my top priorities when creating any website is speed. It is no different with My-Unsplash. I have decided all photos must be in webp format for best performance. In addition, they are loaded as part of the infinite scroll, and only such a number is displayed to keep the page loading time to a minimum. Consecutive photos are loaded as you scroll the page. Thanks to this, I was able to achieve high lighthouse results, despite the fact that the website consists of only photos.

![Lighthouse scores](/images/projects/myUnsplash/my-unsplash-scores.webp#postMiniImage)

### Firebase

Photos need to be stored somewhere. I considered creating my own backend for this purpose, but the simplicity of implementation, the possibility of theoretically infinite scaling, and a generous free tier made me use Firebase Storage.

### Adding photos

The component I created earlier - [Image Uploader](https://github.com/Kielx/image-uploader) is responsible for adding photos. It allows you to add photos via drag'n'drop, and also displays a notification in the event of incorrect file size or format. Additionally, the progress bar displays information about the file upload progress.

### Redux Toolkit

The application logic required me to use an additional solution to store the application state. I decided to use Redux Toolkit because the application had a large number of variables stored in the state of individual components, which had to cooperate with each other. In addition, I wanted to use Redux Toolkit due to its popularity and usefulness in other projects.

## Conclusions

I created My Unsplash with the intention of deepening my knowledge of Next.js, Firebase, Redux Toolkit, and Tailwind CSS. After some time, I can say that I achieved this goal, and the project turned out to be an important milestone on my development path.

If you haven't done it yet, check out [My Unsplash live](https://my-unsplash-mu.vercel.app/) and take a look at [GitHub code](https://github.com/Kielx/my-unsplash).

![App Mockup](/images/projects/myUnsplash/my-unsplash2.webp#postMiniImage 'App Mockup')
