React App with Final Space API — Tinder Style

Photo by Windows on Unsplash

In this app we are going to get data from the awesome Final Space API and display them in the famous swipe style of tinder. We are also going to deploy this app in firebase and will use it as our hosting platform.

You can also find this post in video format on my YouTube channel.

We will also be using Material UI for the icons in the project. So, use the create-react-app to create a new app called final-space-tinder.

npx create-react-app final-space-tinder

Since, our frontend site will also be hosted through firebase we will create the basic setting while this create-react-app creates our react app. So, go to firebase site and click on the Add project link in the page.

Firebase

Now, in this page give the project a name like final-space-tinder and click on Continue button. In the next page click on the Create project button.

final-space

In the next page click on the Create project button after disabling Analytics.

Disable Analytics

After, sometime we will get this screen. Here, we need to click on the Continue button.

Continue

Now, click on the Settings icon on the top right corner of the screen. After that click on the Project settings button.

Settings

In the next page click on the web-icon on the bottom of the page.

Settings

In the next page give the name same as the name of the app, which is final-space-tinder in my case. Also, click on the checkbox for firebase hosting

Final space

In the next page, just click the Next button.

Next

In the next page, it will give the command to install firebase-tools globally from the terminal. Since, i have already done it, i am not doing it again.

firebase-tools

Ignore the next set of commands as of now and click on Continue to console button.

Firebase

Now, in terminal type npm start to start our react project and if , it’s successful you will see below in terminal and our app will start on http://localhost:3000/.

localhost

Next, we will delete some of the files because we don’t need them and our app is also showing perfectly on localhost.

localhost

We will remove all the unnecessary boiler-plate code and our index.js will look like below.

index.js

And the App.js contains only Final Space Tinder text. We have also removed all content from App.css file. Also, changed the className to app.

App.js

In the index.css update the css to have margin: 0 for all.

index.css

We will be using Material UI for the icons, which we will use next. So, we will install it through the below commands.

npm i @material-ui/core @material-ui/icons

Next, create a components folder inside the src folder. Create two file Header.js and Header.css inside it.

Put the below content in Header.js file. Here, we are showing a PersonIcon, logo of Final Space and Forum icon.

Header.js

In Header.css file put the below styles to style our header.

Header.css

Also, include the Header component in App.js file.

App.js

Now, our Header looks awesome in localhost.

Header

Before moving forward, we need to install a package react-tinder-card to have the famous swipe feature of tinder.

npm i react-tinder-card

Now, create a file FinalSpaceCards.js in the components folder and put the below content in it.

Here, we are first importing the required things and using importing TinderCard from ‘react-tinder-card’.

After that we are doing the API call using useEffect to final space character endpoint and setting the Characters.

Now, inside the return, we are looping through the characters and showing each character.

import React, { useEffect, useState } from 'react';
import './FinalSpaceCards.css';
import TinderCard from 'react-tinder-card'
const FinalSpaceCards = () => {
const [characters, setCharacters] = useState([])
useEffect(() => {
fetch('https://finalspaceapi.com/api/v0/character/')
.then(res => res.json())
.then(data => setCharacters(data))
.catch(err => console.log(err))
}, [])
const swiped = (direction, nameToDelete) => {
console.log("receiving " + nameToDelete)
}
const outOfFrame = (name) => {
console.log(name + " left the screen!!")
}
return (
<div className="finalSpaceCards">
<div className="finalSpaceCards__container">
{characters.map((character) => (
<TinderCard
className="swipe"
key={character.id}
preventSwipe={['up', 'down']}
onSwipe={(dir) => swiped(dir, character.name)}
onCardLeftScreen={() => outOfFrame(character.name)}
>
<div style={{ backgroundImage: `url(${character.img_url})`}} className="card">
<h3>Name - {character.name}</h3>
<h4>Species - {character.species}</h4>
</div>
</TinderCard>
))}
</div>
</div>
)
};
export default FinalSpaceCards;

Lastly, we will add the style for the same in FinalSpaceCards.css file.

.finalSpaceCards__container{
display: flex;
justify-content: center;
margin-top: 10vh;
}
.card{
position: relative;
background-color: white;
width: 400px;
padding: 20px;
max-width: 85vw;
height: 50vh;
box-shadow: 0px 18px 53px 0px rgba(0, 0, 0, 0.3);
border-radius: 20px;
background-size: cover;
background-position: center;
}
.swipe{
position: absolute;
}
.cardContent{
width: 100%;
height: 100%;
}
.card h3{
position: absolute;
bottom: 0;
margin: 10px;
color: white;
}
.card h4{
position: absolute;
top: 0;
margin: 10px;
color: white;
}

Lastly, add the FinalSpaceCards component in the App.js file.

App.js

Now, our app is complete and we are able to see the different characters in Tinder Style, with swipe been enabled.

Swipe

It’s time to deploy our app. So, go to the terminal and run firebase login and then firebase init command. Type Y to proceed. Then go down to Hosting using arrow keys and press the spacebar to select it and after that press enter.

Firebase hosting

Then select Use an existing project and press enter.

Existing

Now, you need to select the correct project, which we have created earlier.

final-space-tinder

Next, we choose the public directory and it is build. The next option is Yes for single-page app and github deploys No.

Build

Now, we need to run npm run build in the terminal for a production optimal build.

npm run build

Now, the final command is firebase deploy to deploy the frontend to firebase.

Firebase deploy

Now, our app is successfully deployed and the functionalities are working perfectly. You can find code for the same here.

Done

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Converting my canvas game to React Native (part 1)

Stop sharing company personal data with Nextjs?

telemetry in nextjs

What the hell is a Snippet?

Quick Flow of Redux

next-export-i18n v1.3.0: respecing the user’s default language

Avoid These Two Types of Frameworks

Frontend-Design Knowledge Sharing #30

More Advanced Destructuring featute

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

Learning React with TypeScript by Building an API app

How To Set Up React With Tailwind CSS

Adding Video Chat or Live Streaming to Your Website in 5 lines of Code Using the Agora Web UIKit

Bankist App: Banking made minimalist.