Unable to access API from React and Node through proxy

I'm having a problem with React and Node that I am unable to debug. I have an API connection to coinmarketcap on my node server, which returns a list of coins and individual coins. I am getting the correct data returned for all the coins endpoint and the individual coin endpoint on postman but I am only getting all the coins on react, while the single coins return a 404 error.Link to screenshot for API return of single coin on postman

Here is my server side code for returning a single coin:

module.exports = app => {
app.get(“/api/coin/:id”, async(req, res) => {

const symbolID = req.params.id;

const requestOptions = {

method: “GET”,

uri: “https://sandbox-api.coinmarketcap.com/v1/cryptocurrency/info”,

qs: {

symbol: symbolID.toUpperCase()

},

headers: {

“X-CMC_PRO_API_KEY”: keys.testCoinAPI

},

json: true,

gzip: true

};
try {
  await rp(requestOptions).then(response => {
    res.send(response.data);
  });
} catch (err) {
  res.send("Sorry the currency you are looking for is not available");
  console.log(err);
}

});
};

Here is my React code to consume the API

import React, {

Component

} from “react”;

import axios from “axios”;

class ViewCoin extends Component {

componentDidMount() {

const {

match: {

params

}

} = this.props;
axios.get(`/api/coin/${params.symbol}`).then(({
  data: coin
}) => {
  console.log(coin);
  this.setState({
    coin
  });
});

}
render() {

return <h1 > This is the view coin component < /h1>;

}

}
export default ViewCoin;

Here is my renderCoins function to get the data into a table. With a link to individual ones.

  renderCoins() {

return this.props.coins.map(coin => {

return (

<tr key={coin.id}>

<td>

<Link to={/coin/view/${coin.symbol}}>{coin.name}</Link>

</td>

<td>{coin.symbol}</td>

<td>${coin.quote.USD.price}</td>

<td>${coin.quote.USD.market_cap}</td>

<td>{coin.circulating_supply}</td>

<td>${coin.quote.USD.volume_24h}</td>

<td>{coin.quote.USD.percent_change_24h}%</td>

</tr>

);

});

}

I’m also using a proxy to route the backend and frontend ports:

 app.use(proxy(“/api/*”, { target: “http://localhost:5000” }));

I am able to access endpoints such as /api/coin/btc with no problem using the browser and postman. However, when using React I am getting a 404 error: GET http://localhost:3000/api/coin/BTC 404 (Not Found)

Am I missing something with the proxy or did I mess up my route? Any help is appreciated, not sure what am missing/not seeing.

#javascript #node-js #reactjs #cryptocurrency #blockchain #bitcoin