"Discover Fact" Button Fails Without Gemini API Key – Needs Graceful Fallback

[ragingtitan]

Description
Currently on the Giveaways page(https://techxninjas-client.vercel.app/giveaways), the "Discover Fact" button does not work as intended. It shows an error saying, "Error:
Gemini API Key is not configured. Please contact administrator."

This appears to be due to the Gemini API key not being set in the deployed environment, which is understandable for security reasons. However, the UI lacks graceful handling of this failure.

To Reproduce
Steps to reproduce the behavior:

1. Visit https://techxninjas-client.vercel.app/giveaways
2. Click on the orange button with white text as "Discover Fact".
3. The error is shown in a red banner saying: "Error: Gemini API Key is not configured. Please contact administrator."

Expected behavior
If the Gemini API key is present and valid:
-> Fetch and display the AI-generated tech fact using Gemini API.

If the Gemini API key is misconfigured or invalid:
-> Fetch some locally available tech facts as fallback.

Screenshots

Suggested Fix
Implement a fallback mechanism using a small local JSON/array of predefined tech facts.

When the Gemini API call fails, catch the error and randomly select a local fallback fact to display.

Optionally, add a console warning for developers if the API key is not present, but suppress the red banner on the UI for end users.

Additional context
This will ensure the user experience remains smooth even if the external AI service is down or unavailable.

Many platforms avoid blocking UI features due to external service configuration by including intelligent fallback logic.

[ragingtitan]

Hello @iaadillatif, I’d love to work on this issue. Could you please assign it to me?
Also, it would be great if you could add the gssoc and other relevant labels.
I’m confident I can fix this within a day.

[Abhishek-Verma0]

• I could fix this issue @iaadillatif could you please assign this issue to me
• By looking at file structure can say env file variable are not getting exposed to the client side if you have VITE_API_KEY variable in env.local file
• I saw code and we don't have this
• Also there is some missing configuration which is needed to expose the env var to client side I can do this

How I can fix this

• creating variable in env.local.file where you can put your own gemini api key
• Creating var in env.local for writing down the name of the ai model

@iaadillatif Please assign it to me
please add gssoc25 tag to it

[Abhishek-Verma0]

@iaadillatif I would like to work on this issue as a GSSoC 2025 participant. Please assign it to me I finished it

[jaya-jha12]

I have successfully solved the issue , when API doesn't work ,On clicking the discover facts button it fetches some locally stored tech facts ,
NOTE: The API key needs to be stored in .env file.
ETA - 1hour
Please assign this issue to me.

[Gaurav075]

start working on it

[ragingtitan]

Hi @Gaurav075,
I have opened PR #148 for this issue. Please take a look when possible.