Photo Gallery

This is a web application that allows users to upload and view photos in a gallery. It was built with React, Firebase and TailwindCSS.

Installation

1. Clone the repository to your local machine.
2. Navigate to the project directory and run npm install.
3. Create a Firebase project and enable Firebase Storage.
4. Create a config folder in the src directory.
5. Create a firebase.js file in the config folder and add the following code:

<script type="text/javascript">
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getStorage } from 'firebase/storage';
const firebaseConfig = {
// Your Firebase config goes here
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const storage = getStorage(app);
export { auth, storage };
</script>

Replace firebaseConfig with your Firebase project's configuration object.

Run npm start to start the application.

Usage

Login

To access the photo gallery, you must first login. Click the "Login" button in the header, and then choose the Google account you want to use to login.

Upload Photos

After logging in, you can upload photos to the gallery by clicking the "Upload Photos" button in the header. Select one or more image files and click "Open" to upload them.

View Photos

The photo gallery displays all of the photos that have been uploaded to Firebase Storage. Click on a photo to view it in a larger size.

Delete Photos

To delete a photo, click the "Delete" button that appears when you hover over a photo. Confirm that you want to delete the photo when prompted.

Screenshot: