gsm005 / digital-asset-manager

This is a digital asset manager which is an all in one solution for Digital Assets.

Digital-Asset-Manager

Take a look at live working website right here - https://dam-pix.web.app/

This is a Digital Asset Manager which is a one stop solution for digital assets. It automatically generate tags for the images you upload, provides an in-browser image transformation and enables you to download the image in webp,jpeg and png format.

It uses React as frontend, Firebase as backend and uses Imagga API to automatically assign tags to your images. An easy way to manange digital assests!

Clone the project

git clone https://github.com/gsm005/Digital-Asset-Manager.git

Open the Project directory in the terminal

npm install

After installation is complete, Create a new firebase project and create a Web app, copy the const firebaseConfig from firebase,and paste it in place of const firebaseConfig your folder directory.

src/firebase/config.js

After creating webapp enable firestore database, firebase storage and firebase Authentication.

Update the rules of firestore database

rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write,delete,update: if request.time<timestamp.date(2025,1,25); } } }

Update the rules of firebase storage

rules_version = '2'; service firebase.storage { match /b/{bucket}/o { match /{allPaths=**} { allow read, write,delete: if request.time<timestamp.date(2025,1,25); } } }

In Firebase Authentication Enable Email/Password and Google.

Now, Open Google Cloud Console select the project that you are working on. Click open Cloud Shell and write these commands.

nano cors.json

{[ "origin":["*"], "method":["GET"], "maxAgeSeconds":3600 ]}

Save this and then write in shell

gsutil cors set cors.json <link_of_firebase_storage>

After setting up firebase you need to set up Imagga API, for this go to imagga.com and create an account. After creating an account copy API key and API secret and paste it in place of API key and API secret in your folder directory.

src/components/upload/progressList.js

Start the server

npm start

Inorder to increase or decrease the no. of tags you can change the number from 10 in src/components/upload/progressList.js

const detectedTags = response.data.result.tags.slice(0, 10);