Building the “React Hover cards with a REST API” snippet on the JavaScript Full Stack Playground

Update 22th of January 2021:
The Full Stack Playground is now available in early access!
You can read the detailed features on my last article

TL;DR

For those that are following me, they already know that I built the 1st JavaScript Full Stack Playground.
In this new post, I wanted to share some details on how I built the snippet named “React Hover cards with a REST API” that you can access on the playground here.
I will show you how to fetch some data using a REST API, with a “proxy” that sends back to the front end only data required to render the page.
Tag along if you’re interested!

About the snippet

The snippet named React Hover cards with a REST API shows user cards with a hover effect. It is based on a user database coming from a REST API used on the backend, in this case jsonplaceholder.typicode.com/users.

This API returns a lot of data about every user, but obviously we don’t need them all, and we want to filter the results to send only the data required to render the page. This is generally called a proxy.

Let’s start coding!

Our proxy back end defines a fetchData function that will fetch the REST API call (I’m using Axios in this case). It will then filter the data using a filter function, to send the selected information to the front end.
So here’s the back end code:

const axios = require("axios")

exports.fetchData = async () => {
   const { data } = await axios.get("https://jsonplaceholder.typicode.com/users")
   filter(data)
   return data
}

Let’s dig in the filter function. The API returns these data for each user (you can use a console.log right after the axios call on the backend side to dump them if you want).

{
   "id": 1,
   "name": "Leanne Graham",
   "username": "Bret",
   "email": "Sincere@april.biz",
   "address": {
       "street": "Kulas Light",
       "suite": "Apt. 556",
       "city": "Gwenborough",
       "zipcode": "92998-3874",
       "geo": {
           "lat": "-37.3159",
           "lng": "81.1496"
       }
   },
   "phone": "1-770-736-8031 x56442",
   "website": "hildegard.org",
   "company": {
       "name": "Romaguera-Crona",
       "catchPhrase": "Multi-layered client-server neural-net",
       "bs": "harness real-time e-markets"
   }
}

On the front end side, only these ones are required:

{
     "id": 1,
     "name": "Leanne Graham",
     "username": "Bret",
     "email": "Sincere@april.biz",
     "phone": "1-770-736-8031 x56442",
     "website": "hildegard.org",
     "company": {
       "name": "Romaguera-Crona" }
}

So, let’s do a filter function to remove unused fields!

function filter(data) {
   data.forEach(element => {
       delete element.address
       delete element.company.catchPhrase
       delete element.company.bs
   })
}
exports.fetchData = async () => {
   const { data } = await axios.get("https://jsonplaceholder.typicode.com/users")
   filter(data)
   return data
}

And here you go, you just created a first proxy back end 👏!
At last, we’re now ready to call the back end from the front end. To get the back end, call it and enter react to render the user cards:

// Get the backend
const { fetchData } = new Warp()
// Call it then render hover cards
fetchData().then((data) => {
   mockData = data
   render(React.createElement(App, null), appNode)
})

Feel free to adapt the code to your needs. Thanks! 🤗