refactor: Implement Environment Variables to Secure Giphy API Key

[lcrojano]

Description: The Giphy API key is currently exposed in the codebase. To enhance security and prevent unauthorized access, we need to implement environment variables to store sensitive information like the API key. This should rely on a .env file for local development and secrets management in GitHub for production.

Expected Behavior: The application should access the Giphy API key from an environment variable instead of being hardcoded in the source code. This will help prevent the key from being exposed in the repository and ensure better security practices.

For deployment, set the Giphy API key as a secret in GitHub by navigating to your repository settings and adding it under "Secrets."
Ensure the deployment process reads from these secrets.

Ensure that the .env file is not committed to the repository.
Document the setup process in the project's README to guide other contributors on how to configure the environment variables locally.

[lonewolf9277]

I can work on this. Please assign this to me.

[PrityanshuSingh]

I am interested in working on it. Please assign this issue to me under gssoc-ext level2 and hactoberfest-accepted. @lcrojano

[lonewolf9277]

Hi .env works for server side js. process.env is not available in client side js. So how would this work?

[lcrojano]

Here is the official response to this question from GIPHY:

GIPHY APIs are designed to be used on the client side (and hence the API key too). You should go ahead and use it that way. Once development is complete - please apply for Production access for the key through the Developer Dashboard, this removes Rate limits associated with a beta key, so you don't have to worry about high traffic. Lastly, and most importantly - GIPHY has monitors setup for API key abuse and we'll reach out to you if anything happens. We definitely don't want you to worry about it.

Giphy/giphy-js#120

Do you have any other ideas in mind?