Used Advice Slip API to generate advice

What are you most proud of, and what would you do differently next time?

During a hackathon I came across a resource 11ElevenLabs that enabled one to clone one's voice and use that voice to convert text to speech. I used 11ElevenLabs's API to use my voice on the speech generated by the advice slip API. Though there were some bugs but I was able to achieve my personal goal of this project: reading out the advice in my voice.

The drawback is that it may not be ideal for accessibility especially when screen reader is used since screen reader will read the text as well. Therefore, those who rely on screen readers will hear my voice as well as the screen reader's voice.

I reverted my change on this aspect.

What challenges did you encounter, and how did you overcome them?

In Firefox, I noticed that on clicking the icon button, it returns the same response, which indicates a caching issue. Inspite of including Cache-Control: no-cache to the header of the fetch request, it produce runtime fetch error - failed to fetch. The browser prevented cross-origin requests. I used a simple proxy http-proxy-middleware and provided a setupProxy.js file with the following content:

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    "/api",
    createProxyMiddleware({
      target: "https://api.adviceslip.com",
      changeOrigin: true,
      pathRewrite: {
        "^/api": "", // remove /api prefix
      },
    })
  );
};

and in my AdviceCard.jsx I had to change the fetch request to const response = await fetch("/api/advice"); Though it solved the Firefox issue in my localhost, it did not work when I published my solution to Netlify. This could be due to the way Netlify handles proxying or routing requests. It will be a good opportunity to delve deeper into this.

So far, I have not been able to fix it.

What specific areas of your project would you like help with?

How to effectively solve the caching issue in Firefox? (Kindly refer to my answer to "What challenges did you encounter, and how did you overcome them?")