Setting Up a Resume Download Button Using Firebase!

I’m continuing to build my website and recently added an "About Me" section. This section includes a simple card component featuring my photo and a brief paragraph introducing myself. I also plan to include a "Download Resume" button that triggers the download of my resume when clicked.

Here are the steps I followed to set this up:

1.Install the Firebase module:

npm install firebase

2. Add TypeScript definitions for Firebase:

npm install --save-dev @types/firebase

3.Create a Firebase app:

Even if you only need storage, you must create a Firebase app. (Note that depending on how many apps you have in Firebase, you may need to add a payment method.)

4. Add Environment Variables to Your .env File

Make sure to include your Firebase configuration keys (e.g., apiKey, authDomain, projectId, storageBucket, etc.) in a .env file. For example:

5. Connect the Firebase App

Create a configuration file (e.g., firebase.js or firebase.ts) and initialize Firebase using the environment variables:

6.Upload the PDF to Firebase Storage

7. Configure Firebase Security Rules

In the Firebase Console, under Build > Storage > Rules, update rules to allow public read access to your file:

8. Create an API Route to Download the File

Generate a download URL in your server or serverless function. This URL contains a token that authorizes access. For instance, in Next.js:

9. Fetch the File from the API Route

When the user clicks the "Download Resume" button, fetch the download URL from your API and initiate the download:

10. Update Environment Variables in Production

If you deploy your app (e.g., on Netlify, Vercel, etc.), make sure you add the same environment variables there so the app can access Firebase in your production environment.