{My Unsplash}

Solution for a challenge from Devchallenges.io.

Demo | Solution | Challenge

Overview

• My Unsplash is a website that allows users to sign in and upload, view and delete Images
• Built with ReactJS on the frontend, Firebase as backend and TailwindCSS for styling
• This application/site was created as a submission to a DevChallenges challenge.

Built With

• ReactJS
• Tailwind

Features

This application/site was created as a submission to a DevChallenges challenge.
The challenge was to build an application to complete the following tasks.

• User can see a list of photos in the masonry layout shown In design
• User can add a new photo to the list - the new photo should be on top of the list
• User can search for photos by label
• User can hover a photo, and see a label and a delete button
• User can delete images
• [Optional] User Authentication

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
$ git clone https://github.com/AlbertSigsbert/My-Unsplash.git

# Install dependencies
$ npm install

# Register for Firebase (Auth, Firestore & Storage Web SDK)

# Create a local .env file and add your credentials with keys as found in firebase/config.js
NB: Remember to prefix them with REACT_APP_

# Run the app
$ npm start

Acknowledgements

Articles or add-ons/plugins that helped me to complete the project

• Firebase Authentication
• Firebase Firestore
• Firebase Storage
• Firebase Hosting
• Framer Motion

Contact Me

• Portfolio website
• Github
• Twitter