My-Unsplash is a modern image gallery where anyone can upload photos. The app displays them in a modern masonry layout. The app is built using Next.js with a backend hosted at firebase storage. The state is stored in the redux toolkit store. With dark mode, TailwindCSS, and responsive layout.

Table of contents

• Table of contents
• Overview
• The challenge
• Built with
• What I learned
• Author
• Acknowledgments

Overview

The project was a challenge from devchallenges.io. It incorporates the Image Uploader component from Image-Uploader

The challenge

Create my Unsplash app. Use Front-end libraries like React or Vue. Create your API. Don’t look at the existing solution. Fulfill user stories below:

• I can see a list of photos in the masonry layout that I have added
• I can add a new photo to the list - the new photo should be on top of the list
• I can search for photos by label
• When I hover a photo, I can see a label and a delete button
• I can delete images

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• Mobile-first workflow
• Next.js
• React
• Redux
• Firebase
• Tailwind CSS

What I learned

This was my second project using Firebase and Redux with Next.js and masonry layout it proved to be a good challenge and experience.

Author

• Website - Chris Pantak

Acknowledgments

• Again used beautiful CSS spinner from Loading.io