DEV Community

loading...
Cover image for Building the “React Hover cards with a REST API” snippet on the JavaScript Full Stack Playground
ScaleDynamics

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

kirk profile image Kirk Updated on ・3 min read

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.

Alt Text
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
}
Enter fullscreen mode Exit fullscreen mode

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"
   }
}
Enter fullscreen mode Exit fullscreen mode

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" }
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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)
})
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)

pic
Editor guide