DEV Community: Dom the dev

Build a responsive three columns chat layout with HTML/CSS/JS

Dom the dev — Thu, 02 Feb 2023 05:47:27 +0000

In this short tutorial, I show you how to create a fully responsive three columns chat layout.

Demo: click

If you have any questions hit me up von Twitter

GitHub Files: https://github.com/dom-the-dev/three-columns-chat-layout
CodePen: https://codepen.io/dom-the-dev/pen/RwBqbWr

I'm happy about any feedback! :)

Build an automatically updating Twitter Header with NodeJS and Twitter API

Dom the dev — Wed, 09 Mar 2022 09:38:57 +0000

This tutorial shows you how to build an application which automatically updates your Twitter Header with your latest
followers.

GitHub Files: https://github.com/dom-the-dev/twitter-banner

I also made Step-by-Step Video

List of contents

Twitter Elevated Access
Setup application
Twitter client
Get Followers
Save Follower Images
Create Banner
Update Banner
Cron Job

Twitter Elevated Access

Before we can start, we have to create an application on
the Twitter Developer's Platform (twitter account required). On
your Dashboard you should now see a small teaser asking you "Want more API access?". Click on "View products".
Alternatively, in the left panel click on "Products" and from the dropdown select Twitter API v2. You will then
automatically get to the Tab where you can apply for the elevated access. If not, in the top center of the page, choose
the elevated tab to see the button which says "Apply for Elevated".

Then you have to go through some steps where you need to fill out some information about you and your application. After
confirming the terms on the last page, you either get elevated access granted or not. So make sure to fill out the
information wisely.

Setup application

Now, we are ready to set up our node application. Make sure that node is installed.

Run node --version in your terminal. If you get a node version number printed, node is installed. If not, you need to
go to the node homepage and download the installer.

Once node is installed, we can create a new node application. In your terminal, create a new directory and switch into
it.

mkdir twitter-banner && cd twitter-banner

Then run the following command to initialize a new npm project. This will create a package.json inside the project
directory.

npm init -y

Now you can open the project in your text-editor/IDEA.

In the root of the directory create a new file called index.js and add a simple console.log("hello world") in order
to test if node is running correctly.

Then in your terminal run the following command

node index.js

Your terminal should now prompt "Hello world".

Twitter Client

Let's now create a Twitter Client, so we can simply communicate with the Twitter API. For that install a npm module
called twitter-api-v2.

npm i twitter-api-v2

After the installation we can create our client. Create a file called twitterClient.js
and open it. Now we need to require the module and instantiate a new object with our twitter keys, which we get in a
second.

The code should look like this, where the current keys will be replaced by the actual keys.

const {TwitterApi} = require("twitter-api-v2")

module.exports = new TwitterApi({
    appKey: "<your-api-key>",
    appSecret: "<your-api-secret>",
    accessToken: "<your-access-token>",
    accessSecret: "<your-access-secret>"
})

To get the keys we need to switch back to the developers platform of twitter. On the Dashboard you can click on "+
Create Project" and walk through the steps. On the last step you get the first keys displayed.

Copy and replace them with the keys in your client.

API Key = appKey

API Key Secret = appSecret.

In order to get the access token and the access secret we have to adjust some settings. On the overview page where your
project are listed click on the gear icon to get to the settings page of your app and click on Edit in the "User
authentication settings"-Section.

To be on the safe side, activate OAuth 2.0 and OAuth 1.0 and fill out the rest of the form. App permissions need to be
set at least to "Read AND Write permissions".

Important: You can't set the Website URL to localhost, instead you need to set your local ip address. You can find it
with your terminal with the following command:

Windows

ipconfig

Linux/Mac

ifconfig

At the end of the page click on save. You won't need the client ID and Secret which will be shown now. Instead go back
to the settings page of your app and choose the "Keys and Tokens" tab. In the section "Autentication Tokens" you now can
generate the Access Token and Secret with Read/Write persmissions. Click on generate and copy/paste the keys to your
client.

To test if the twitter client is working, let's create a test-tweet. Go to index.js and require the twitter client at
the top of the file.

(Remove the console.log() if you want)

const client = require("./twitterClient");

And create a asynchronous function which calls the tweet method of our client where we paste the message to tweet. This
could look like this

async function testTweet() {
    await client.v2.tweet("Hi, I am building a twitter bot!")
}

testTweet()

Now run node index.js again in your terminal. If everything works fine you can check your twitter account for this
tweet. You can now delete or comment this function out.

Get Followers

Now, let's create a new file twitterController.js where we gonna collect the methods, talking with the Twitter API. In
this file again require our twitter client:

const client = require("./twitterClient");

So, the first step of creating our banner will be to get our latest followers. Let's create an async function called
getFollowers() where we call the followers method of our client and return the latest 5 followers:

async function getFollowers() {
    const followers = await client.v2.followers("<YOU-TWITTER-ID>")
    return followers.data.slice(0, 5)
}

As you see here we need to paste the twitter-ID from our account. To find this, we can go
to tweeterid.com. Paste your twitter @ in the input field and click on convert. Then
copy/paste the ID to the followers function.

At the end of the file need to export this method:

module.exports = {getFollowers}

Switch to index.js and require this method:

const {getFollowers} = require("./twitterController")

Let's already create the wrapper function for the banner-process where we are going to save the followers in a variable:

async function generateBanner() {
    const followers = await getFollowers()
}

Save Follower Images

The next step is to get the avatars of your followers, and save them to the filesystem. Let's do so by create a new
async function so called getProfileImageUrl in the twitterController.js

This function accepts one parameter, the user ID of a follower, and returns the profile image URL.

async function getProfileImageUrl(user_id) {
    const {profile_image_url} = await client.v1.user({user_id})
    return profile_image_url
}

Add this function to the exports:

module.exports = {getFollowers, getProfileImageUrl}

Now create a new file called imageController.js, here we are going to collect all methods which manipulate images.

For this steü, we need to install two more packages, axios
and sharp

npm i axios sharp

Require them at the top of imageController.js

const axios = require("axios")
const sharp = require("sharp")

Now the next function is going to fetch the images with axios as an arrayBuffer and paste this to the sharp
method, which helps us to the images to our file system with the resolution 100x100.
The function gets two params, a url and a name. The url will be the profile-image-url we get from the previous function. The name is used to save the image.
Don't forget to export this function.

async function saveImage(name, url) {
    const {data} = await axios.get(url, {
        responseType: "arraybuffer"
    })

    await sharp(data).resize(100, 100).toFile(`./images/${name}.png`)
}

module.exports = {saveImage}

Let's combine the two methods in index.js to finally save the follower avatars.

In the generateBanner() method, we are going to iterate over the followers array which we already have with a for/of loop.
We use the for/of since we can you async inside of it. For each follower we gonna get the profile-image-url and paste it to the saveImage() method in order to save the images.

async function generateBanner() {
    const followers = await getFollowers()

    for(const follower of followers) {
        const url = await getProfileImageUrl(follower.id)
        await saveImage(follower.id, url)
    }
}

Before you run this, you need to create an images directory. Otherwise sharp doesn't know where to save the images.
If you run generateBanner() now you should see the images saved to your file system.

Create Banner

For this step, you are going to need a twitter template. It needs to have the resolutions 1500x500.
You can find mine example here. Save it to the root of your directy.
In my example i am going to name it banner.jpg.

On this template we are now going to place the follower images at. To do so we need to install another npm package
so called Jimp.

npm i jimp

Besides this module we need to add promise based version of fs from node in order to perform async operations on.
Add them at the top of imageController.js like this:


const axios = require("axios")
const sharp = require("sharp")
const Jimp = require("jimp")
const fs = require("fs")
const fsPromises = fs.promises

The createBanner() function which we now create, uses Jimp to create a new image from our templatebanner.jpg.
Then it iterates over all saved avatars and places them on the new created banner-image.
An index variable will be used to move each picture a bit so they won't be places on top of each other. At the end the new file will be saved.

This function should look like this:

async function createBanner() {
    const banner = await Jimp.read("./banner.jpg")
    const files = await fsPromises.readdir("./images")

    let index = 0;
    for (const avatar of files) {
        const imgPath = `./images/${avatar}`
        const image = await Jimp.read(imgPath)

        const position = 475 + index * (100 + 10);
        banner.composite(image, position, 380);

        index++
    }

    await banner.writeAsync("./final.png");

}

module.exports = {saveImage, createBanner}

Add this it to index.js which now should look like this:


const {getFollowers, getProfileImageUrl} = require("./twitterController")
const {saveImage, createBanner} = require("./imageController");

async function generateBanner() {
    const followers = await getFollowers()

    for(const follower of followers) {
        const url = await getProfileImageUrl(follower.id)
        await saveImage(follower.id, url)
    }

    await createBanner()
} 

generateBanner()

You can again test-run this method to check if the new banner will be created correctly. Look for final.png

Update Banner

Let's upload this cool header to our twitter profile now!

In twitterController.js create the updateBanner() method. Here we are calling the update profile banner method, paste the path to our image and the resolutions:

async function updateBanner() {
    await client.v1.updateAccountProfileBanner("./final.png", {
        width: 1500,
        height: 500
    })
}

module.exports = {getFollowers, getProfileImageUrl, updateBanner}

Require this method and call it in generateBanner() in index.js

const {getFollowers, getProfileImageUrl, updateBanner} = require("./twitterController")
const {saveImage, createBanner} = require("./imageController");

async function generateBanner() {
    const followers = await getFollowers()

    for(const follower of followers) {
        const url = await getProfileImageUrl(follower.id)
        await saveImage(follower.id, url)
    }

    await createBanner()
    await updateBanner()
}

generateBanner()

Again, you can test run this with node index.js in your terminal. When you now switch to your browser and reload your twitter profile,
you should be able to see the new banner.

Cron Job

The last step will be, to create a so called CronJob which performs given actions at a given time. In our example we are going
to check for the latest followers every minute.

Install the npm package cron:

npm i cron

And require it at the top of index.js like that:

const CronJob = require("cron").CronJob

Now we create a new object from the CronJob class, where we pass two params.
The first one is a string and declares, when the job has to run.
A great tool to set up the time is CronTab Guru.
The second parameter is the callback function which we want to be called.
In our case the generateBanner() method. Start the job by calling the start() method of our job object

console.log('starting node app')
const job = new CronJob('* * * * *', async function() {
console.log('start generating banner')
generateBanner()
})

job.start()

And that's it! If you are facing any issues, leave some feedback in the comments or hit me up on twitter @Dom_TheDEv

How to use the Twitter API to create a Twitter Bot

Dom the dev — Tue, 08 Feb 2022 16:34:08 +0000

In this tutorial, I will show how to create a Twitter Bot with NodeJS using the Twitter API.

GitHub Files: https://github.com/dom-the-dev/doms-bot-youtube

I also made a step by step video

List of contents

Create Twitter App
Setup Project
Twitter Client
First tweet
The Cron

Create Twitter App

At First, we need to create a Twitter Application at the Twitter developer portal.
For that, you need to log in at https://developer.twitter.com/en/portal/dashboard.

In the left panel under Projects & Apps, click on Overview. Here, you can click on "Create App" to create a new application.

You have to give your application a name and confirm by clicking on next. On the next screen, you get the application's key and secrets displayed, which we won't be needing now.

We first have to make some other changes before we can use them properly. On the bottom right of your screen, click on app settings.

Here, we can change the authentication settings of our app.
Under "User authentication settings" click on "set up".

Turn on both OAuth 1.0 & 2.0.
As "Type of App" choose Automated App or Bot from the dropdown.
App permissions set to "read and write"

The "Callback URI / Redirect URL" can't be set to localhost, so we need to paste in our local IP address. You can get it from your terminal

Windows

ipconfig

Linux/Mac

ifconfig

As Website URL, you can paste your personal website.
Hit save and we are ready to continue.
The Client ID and Client Secret which are displayed now are not needed in our case. Click on done to return to the dashboard.

Now we are ready to start coding.

Setup Project
Before we can start to create a node application, we have to make sure that node is installed.

Run node --version in your terminal. If you get a node version number printed, node is installed. If not, you need to go to the homepage and download the installer.

Once node is installed, we can create a new node application.
Create a new directory and switch into it.

mkdir twitter-bot && cd twitter-bot

Then run the following command to initialize a new npm project.
This will create a package.json inside the project directory.

npm init -y

In the next step we are going to add a npm module to our app which will help us to communicate with the Twitter API. This module is called twitter-api-v2 and can be found here

To install it run the following command in your terminal

npm i twitter-api-v2

Once the installation is done, we can open up the project in our text-editor/IDEA.

Twitter Client

Now we are going to create a twitter client. This client allows us to perform actions like tweets in our node application.
Create a new file, twitterClient.js.

Inside it, we need to require that Twitter API module and create our client by instantiate a new object of it. There we need to pass our keys, which we get from the Twitter Developer Portal.

On the overview page of your created application, select the "keys and tokens" tab.
Important: There you need to regenerate all tokens which we are going to use to make the auth settings take effect.
Copy and paste them into the twitter client, and export the client with readWrite permission.

You file should then look similar to this:

const {TwitterApi} = require("twitter-api-v2");

const client = new TwitterApi({
    appKey: "<your-appKey>",
    appSecret: "<your-appSecret>",
    accessToken: "<your-accessToken>",
    accessSecret: "<your-accessSecret>"
})

const rwClient = client.readWrite

module.exports = rwClient

First tweet

Now create a new file and name it index.js, here is where everything comes together.

At the top of the file, require the twitter client

const rwClient = require("./twitterClient.js");

Now we can create the function which will create a tweet from our Twitter profile. Notice: The function needs to be asynchronous. Then we can call and await the tweet method of our client. To the method pass any string which will then be our tweet.

The function could look like this:

const tweet = async () => {
    try {
        await rwClient.v1.tweet("Good Morning Friends!")
        console.log("tweet successfully created")
    } catch (e) {
        console.error(e)
    }
}

Then we need to call our function and test it.

tweet()

In your terminal run node index.js. If everything works properly, you should get the successfully created tweet message in your terminal prompted.

Check your Twitter profile!

The Cron

In order to make this tweet to be created again after a certain time, we need to create a cronjob.

For that we are going to install another package called cron which you can find here.

Run npm i cron in your terminal to install it.

Require that module in your index.js

const CronJob = require("cron").CronJob;

The last step: Create a new job from your CronJob class and let it run every certain time.

const job = new CronJob("0 5 * * *", () => {
    console.log('cron job starting!')
    tweet()
})

job.start();

Explanation: We create a new object from the CronJob class, we pass two params. The first one is a string and declares, when the job has to run.
A great tool to set up the time is CronTab Guru.
The second parameter is the callback function which we want to be called. In our case, we log when the job starts and our tweet function.

And that's it. When you run node index.js the cron will start.

Thanks for reading! I hope you liked this article. Please leave me some feedback! :)

Step-by-Step Video

JavaScript Console more than just a log

Dom the dev — Mon, 24 Jan 2022 19:57:38 +0000

If you have any questions hit me up von Twitter

If you are a visualer learner you might prefer my YouTube Short i made about this Topic.

console.log("Hello World")

If you are reading this i asume that you are a developer and that you probably already heared about the JavaScript console.log().
The console.log function is an easy way for frontend developers working with JS to check their code. You can log almost everything from your code.

But did you know that there are way more functions which may fit better for your purpose? Let me show you some of them!

console.error(error)

You probably already run over the console.error method, and you probably didn't even notice.

Example output

Error: Not variable found. 
at script.js:1

This methods prints an error to the console. Telling you the file and the line in your code where the error occurs.

console.table(data)

This methods allows you to log data in tables. This works for arrays and object.

The first column will be either the index for arrays, or the property name for objects.
The second colum is going to contain the value of the element.

const fruits = ["apples", "bananas", "oranges"];
console.table(fruits)

Example output:

(index)	values
0	apples
1	bananas
2	oranges

console.time() and console.timeEnd()

This two methods in combination can print the duration of the operation between them two.

The method console.time() starts the timer while the console.timeEnd() function stops the timer and prints the duration to the console.

console.time()

alert("Hello World")

console.timeEnd("duration:")

Example output

duration: 131.60205078125 ms

That's it from me. There are some more console methods to explore.

Thanks for reading! <3

How to create and deploy a dummy API with ExpressJS and Heroku

Dom the dev — Sat, 08 Jan 2022 08:45:06 +0000

In this tutorial you will learn how to create and deploy an API with dummy data.

For that we are going to create an ExpressJS Server, and deploy it to Heroku from a GitHub Repository.

If you have any questions hit me up von Twitter

I also made a step by step video

GitHub Files: https://github.com/dom-the-dev/doms-api
Demo: https://doms-api.herokuapp.com/posts

List of contents

NodeJS
Setup Application
Create Server
Generate Dummy Data
JSON Response
GitHub Repository
Create Heroku App
Add Procfile
Deploy Server

NodeJS

Before we yout can start you have to make sure that you have node installed on your machine. To do so open your terminal and run following command:

node --version

If you get promed a version number like this v14.16.0 node is already installed. If not you need to install it. For that visit the https://nodejs.org/en/ where you can download and installer.

Once you have node installed we can start.

Setup Application

In our terminal, let's create a new directory for our application with following command:

mkdir dummy-api && cd dummy-pi

Now we need to initialize npm. The following command will generate a package.json with defaults set.

npm init -y

After that we can add the ExpressJS framework with by running this command:

npm install express --save

Our project is now ready and we can open it in our favorite texteditor.

Create Server

If you open package.json you see that our main entry point is set to index.js.

"main": "index.js",

This means we need to name our server file exactly like that.
This is just a default value and you can rename it if you want to.

So, in our project root create a file index.js which will be our application.

Here we can now create our server. To do so we need to require express.

const express = require('express')

To create our server we need to call express and store it in a variable like that:`

js const app = express()

To actually make our server run we now need to run the listen method. Here we need to pass a port, on which the server will run. We also can pass a callback method.

js app.listen(process.env.PORT || 3000, () => console.log("Server is running."))

Your server is ready to run. In your terminal run

cli node index.js to start your server.
`

The terminal should reponse with our callback function and you should see

cli Server is running.

Now when you visit http:localhost:3000 you should get an error, since we are not responding to the browser.
Lets add that now.

We need to create a GET Route which will send a response to the browser.

js app.get('/', (req, res) => { res.send('Api is running.') })

We create a new GET route by calling the app.get() function. Here we pass the path of the route as well as a callback function, which sends our response.

To make the changes affect you need to restart the server.
Then go back to your browser and reload the page.
You should now see Api is running. in your browser.

Generate Dummy Data

To generate the dummy data, which we later want to serve on our API, we can use the json-generator which you find here.

On the left side you see the settings for you dummy data. You can play around and edit them like you want. If you want to dive deeper into that i recommend to check out the help section.

For our case it is enough to hit de generate button, and copy the generated JSON Object on the right side.

Now we need to store this JSON object in a file, so we can require it in our server application.

In the root of our project create a file named posts.js. Inside of if we are going to export the dummy data like that:

js module.exports = "paste your dummy data here"

JSON Response

Move back to index.js where we import our dummy data. At the top add following line:

js const posts = require("./posts");

Now we need to add another GET route similar to the first one, but instead of sending a simple response, we want to response with our json object.

Create a new GET route which points to /posts and response a json where you pass the dummy data object.

js app.get('/posts', (req, res) => { res.json(posts) })

GitHub Repository

Our server is now ready to go, create a GitHub Repository where we can push the files to, so we can use them in our Heroku application.

Create a new repository on GitHub.

cli git init git remote add origin YOUR_GIT_URL git add * git commit -m "initial commit" git push -u origin main

Create Heroku App

Create an account in Heroku and login to you dashboard.

On you app dashaboard create a new application by clicking on the button on the top right corner. Give your application a name, select a region an click on creat.

You will be redirected to the Deploy Tab. Here you can choose from several deployment methods. We are going to choose the GitHub method.

For that you need to connect your GitHub Account to Heroku. One this is done, you can browse your repositories. Here you can choose your Express Server Repository.

Now you can choose if you want to automatically deploy when you push to your main branch and you can deploy your application by clicking on the deploy branch button.

Before we can deploy our application we need to add one more thing.

Add Procfile

To let Heroku now which commands are needed to make our application run, we need to add a Procfile.
This Procfile contains the command which is needed to make our application run on Heroku.

Open your terminal an cd into your project root. Run following command to create this file:

cli echo "web: node index.js"

Now push this file to your main branch.

Deploy Server

The last step now is to accutally click on the Deploy Branch.
This will run the deployment pipeline. You can follow the progress right here.
Once this is done you get success message that you Application has beend deployed and a visit button will be displayed.

You can now visit your ExpressJS Dummy Data API.

Thank's for reading! I hope you liked this article. Please leave me some feedback! :)

Step by Step Video

How to build a React Live Search (Rick & Morty Edition)

Dom the dev — Mon, 03 Jan 2022 10:03:53 +0000

In this short tutorial I show you how to fetch and filter data from an API with React JS.

If you have any questions hit me up von Twitter

GitHub Repo: https://github.com/dom-the-dev/react-search-bar

I also made a step by step video

List of contents

Create React App
Clean Up
Fetching Data
Display Data
Filter Search Results

Create React App

To create a new react application open your terminal and run the following command:

npx create-react-app react-live-search

This creates a complete react application. With cd spotify-react && yarn start you jump into the projects directy and start the development server which then runs at http://localhost:3000 by default.

Clean Up

Before we start to code let's remove the unnecessary stuff we don't need. So remove everythin inside of App.css and in App.js remove the imports as well as the html inside of the div with className App.
So your App.js will look similar to this:

import './App.css';

function App() {

    return (
        <div className="App">

        </div>
    );
}

export default App;

Fetch Data

Now we are ready to implement the function to fetch Data from the Rick & Morty API.

Install axios which will handle our HTTP request with following command

yarn add axios

and import it to the app

import axios from 'axios";

Before we fetch data, we want a state where we can save the data. For that we are going to use the useState Hook. So let's import it and create a new state variable characters:

Add at top of the App.js
import {useState} from 'react';

Inside of App() add:

const [query, setQuery] = useState("")

Since we want to fetch the data immediatly when we open up our app, we need the useEffecthook. So import that as well from react.

Adjust import statement at top of the App.js and add the useEffect hook to App function.

You App.js should now look like this:

import './App.css';
import {useEffect, useState} from 'react';
import axios from 'axios';

function App() {
    const [characters, setCharacters] = useState([])

    useEffect(() => {

    }, [])

    return (
        <div className="App">

        </div>
    );
}

export default App;

Inside of useEffect we now want to declare the fetchData function which performs async get Request to the API Endpoint and gets the wanted data. We wrap our code inside of a try/catch block to handle possible errors.
The fetched data will be stored in the characters state calling the setCharacters function.

const fetchData = async () => {
            try {
                const {data} = await axios.get(`https://rickandmortyapi.com/api/character/`)
                setCharacters(data.results)
            } catch (error) {
                console.error(error)
            }
        }

And then we simply have to call this function:

fetchData()

Display Data

Now we have our data stored in the state, and we are ready to dispaly it in the frontend.

For that create a new div and inside of it we are going to map over the characters Array and dispaly the characters name as well as the image.

<div className="results">
    {characters.map(character => (
        <div key={character.id}>
            <img src={character.image} alt={character.name}/>
                {character.name}
        </div
    ))}
</div>

If you want you can add some styling to your App.css.

.results {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}

.search {
    background-color: darkgray;
    text-align: center;
    padding: 15px;
}

.input {
    font-size: 25px;
}

When you now visit your browser at http://localhost:3000 you should be able to see the data we just fetched. Now we are ready for the last step.

Filter Search Results

Add search input

In order to filter the search results, we need to create a new state called query and set it to an empty string initially.

const [query, setQuery] = useState("")

As well as we need an input field which updates the states as soon as we start typing. For that lets create this input field and add an onChange event which triggers the state update. The value of the input field needs to contain the query states value:

<div className="search">
    <input  type="text"
            placeholder={"Search Character"}
            className={"input"}
            onChange={event => setQuery(event.target.value)}
            value={query}
    />
</div>

Update search results

Now we need to update our search result. To achive that we need to adjust our fetching endpoint. We need to add a "name" paramater and pass our search query into that.

Adjust this line of code:

const {data} = await axios.get(`https://rickandmortyapi.com/api/character/?name=${query}`)

Let me explain that: Initially the query variable is set to an empty string what means that we are not passing a param of name. That means we perform the regular call and get 20 first characters.

The problem now is, since we pass an empty dependancy array to the useEffect hook the fetchData function will not be called again if we start typing our search query. To fix that we need to add query as an dependancy to the useEffect hook. So your useEffect will now look like this:

useEffect(() => {
    const fetchData = async () => {
        try {
            const {data} = await axios.get(`https://rickandmortyapi.com/api/character/?name=${query}`)
            setCharacters(data.results)
        } catch (error) {
            console.error(error)
        }
    }

    fetchData()
}, [query])

With this changes the useEffect and also the fetchData will be called and we get new search results depending on our query state.

Visit you application at http://localhost:3000 and start typing inside your input field. The results now should update immediatly.

That's it! Thanks for reading! I would love to see a comment with any kind of feedback!

Step by Step Video

How to build a full stack application with Supabase & ReactJS

Dom the dev — Tue, 21 Dec 2021 16:35:36 +0000

React JS is one of the most (if not the most) popular frontend libraries nowadays. It helps you to build super fast user interfaces.

Supabase is an easy to use tool that helps you to create your applications backend.

With both tools combined you can create your own full stack application. Include different kinds of Sign Ups, persist data with a PostgreSql database as well as file uploads with their storage service.

I made a series for my YouTube Channel, where i build "Movie Tinder" App. The first video of this series contains the "Magic Link" Sign In method. For that I am using React Router v6 as well as custom hooks and React Context to create protected Routes.

If you have any questions hit me up von Twitter

Update

In video number two of this series, we fetch videos from themoviedb API using axios for our http requests. To create a users watchlist we persist data in the database using the supabase client.

Update Update

In video number three, we create an profile page where users can update their profile. For that we create a storage bucket in our supabase project. Check out video #3.

You can watch the videos on My YouTube Channel or here below:

Part 1:

Part 2:

Part 3:

How to use the Spotify API In Your React JS App

Dom the dev — Fri, 17 Dec 2021 11:14:02 +0000

In this tutorial you will learn how to use the Spotify Api in your application.

If you have any questions hit me up von Twitter

GitHub Files: https://github.com/dom-the-dev/spotify-with-react

I also made a step by step video

List of contents

Create Spotify App
Setup React Application
Authentication
Access Token
Logout
Fetching Data
Displaying Data

Create Spotify App

First, we need to create a Spotify App at Spotifys developer dashboard. For that you need to login at https://developer.spotify.com/dashboard/login.

Click on the green button "Create an App". In the Modal you need to set an app name as well as a description. Confirm the terms and hit the Create button.

You will be redirected to the spotify app overview. Here you get the Client ID which we will be needing later in our react app.

To complete this step we need to set the redirect URI. For that click on "edit settings". Under "Redirect URIs" type in http://localhost:3000 and confirm by clicking on add, then save the settings.

Now we are ready to start coding.

Setup React Application

Open your terminal and create a new react application with following command:

npx create-react-app spotify-react

Authentication

To be able to use the API, the user needs to be authenticated with his Spotify Account. For that case we need to create a link which leads us to the Spotify Authentication/Login page.

This links consists of the following params:

Endpoint
Client ID
Redirect URI
Response Type

Let's start coding, open up App.js and remove all that stuff you don't need, so you app will look similiar to this:

import './App.css';

function App() {

    return (
        <div className="App">
            <header className="App-header">

            </header>
        </div>
    );
}

export default App;

Now let's add the variables which we then use for our authentication link.

const CLIENT_ID = "+++++++++++++++++++++++++++++"
const REDIRECT_URI = "http://localhost:3000"
const AUTH_ENDPOINT = "https://accounts.spotify.com/authorize"
const RESPONSE_TYPE = "token"

Now we can create the link in the return of our App.js which looks like this:

 <a href={`${AUTH_ENDPOINT}?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=${RESPONSE_TYPE}`}>Login to Spotify</a>

Let's open http//:localhost:3000 in your browser. When you click on the Login to Spotify link, you will be redirected to the Spotify Authentication page.

Either you are already logged in, than you just need to accept the terms, or you need to login with your Spotify Account credentials.

After accepting the terms you will be redirected back to the app at localhost:3000.
A hash is passed to the URL which contains the access token which we need to authorize the API calls.

Access Token

As we want to check for the token as soon as we come back, we use the useEffect from react.
Then we check the URL for the hash and extract the token by performing some tasks. After that we store the token in a state variable with help of the useState hook as well as we save the token in our localeStorage.

Import the useEffect as well as the useState hook to your application.

import {useEffect, useState} from 'react';

Now create the state variable for the token and set it to an empty string by default.

const [token, setToken] = useState("")

The useEffect function will look like this:

useEffect(() => {
    const hash = window.location.hash
    let token = window.localStorage.getItem("token")

    if (!token && hash) {
        token = hash.substring(1).split("&").find(elem => elem.startsWith("access_token")).split("=")[1]

        window.location.hash = ""
        window.localStorage.setItem("token", token)
    }

    setToken(token)

}, [])

Let me explain what happens in here:
When we open the app, we check if we have a hash or we already have a token saved in our localStorage.
If we do have a token stored, we simply continue by setting our token state variable.
If we don't have a token, we check if we have a hash. If so we perform tasks on that string to extract the token.

Once we got the token we save it in our localStorage and reset the hash.

Logout

To logout we simply create a function which removes the token from our localStorage as well as we set the state token back to an empty string.

const logout = () => {
    setToken("")
    window.localStorage.removeItem("token")
}

Let's add the Logout Button to our app, rendering conditionally depending on token state.

The intermediate stand of App.js should now look like this


function App() {
    const CLIENT_ID = "+++++++++++++++++++++++++++++"
    const REDIRECT_URI = "http://localhost:3000"
    const AUTH_ENDPOINT = "https://accounts.spotify.com/authorize"
    const RESPONSE_TYPE = "token"

    const [token, setToken] = useState("")

    useEffect(() => {
        const hash = window.location.hash
        let token = window.localStorage.getItem("token")

        if (!token && hash) {
            token = hash.substring(1).split("&").find(elem => elem.startsWith("access_token")).split("=")[1]

            window.location.hash = ""
            window.localStorage.setItem("token", token)
        }

        setToken(token)

    }, [])

    const logout = () => {
        setToken("")
        window.localStorage.removeItem("token")
    }

    return (
        <div className="App">
            <header className="App-header">
                <h1>Spotify React</h1>
                {!token ?
                    <a href={`${AUTH_ENDPOINT}?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=${RESPONSE_TYPE}`}>Login
                        to Spotify</a>
                    : <button onClick={logout}>Logout</button>}
            </header>
        </div>
    );
}

export default App;

Fetching Data

Now we are ready to start with the fun part. In this tutorial we are searching for artists and display some informations like name and their profile image. Check out the documentation for way more possibilities.

First, create two new states, one which will keep our search term, and one which will keep the fetched data.

const [searchKey, setSearchKey] = useState("")
const [artists, setArtists] = useState([])

Install axios which will handle our HTTP request with following command

yarn add axios

and import it to the app

import axios from 'axios";

Now create the searchArtists function. We use axios to perform the GET request to the spotify API endpoint. As request configuration we pass an object which contains the header with the Bearer Authorization and the token. As well as a params object containing the search term and the type of search which is here set to artist.
Once the request is done, and the fetch successful the response is set to our artists state.

const searchArtists = async (e) => {
    e.preventDefault()
    const {data} = await axios.get("https://api.spotify.com/v1/search", {
        headers: {
            Authorization: `Bearer ${token}`
        },
        params: {
            q: searchKey,
            type: "artist"
        }
    })

    setArtists(data.artists.items)
}

To perfom the search lets add the form to our app.

<form onSubmit={searchArtists}>
    <input type="text" onChange={e => setSearchKey(e.target.value)}/>
    <button type={"submit"}>Search</button>
</form>

We are almost there.

Displaying Data

The last step is to display the data in our application. For that we let's create the renderArtists function and call it inside the return of our App.js.

const renderArtists = () => {
    return artists.map(artist => (
        <div key={artist.id}>
            {artist.images.length ? <img width={"100%"} src={artist.images[0].url} alt=""/> : <div>No Image</div>}
            {artist.name}
        </div>
    ))
}

{renderArtists()}

Visit your browser at http://localhost:3000. Login with your Spotify account, enter an artists in the search field and see the data rendered in your app.

Thank's for reading! I hope you liked this article. Please leave me some feedback! :)

Step by Step Video

Burger Map: Fetching and Displaying Data with React

Dom the dev — Wed, 15 Dec 2021 09:26:52 +0000

Learning web development can be pretty dreary and gray. So it's always good to involve things you like into your learning process.
Ania Kubów made a Burger API in her YouTube Video How to mock your own API.

I took the liberty and used that API to create a Burger Map with React. And here i show you how.

If you have any questions hit me up von Twitter

TL;DR

List of content

Create React App
Fetching Burger Data
Mapbox API
Append Latitude and Longitude Values to the Response
Display the World Map
Render Data on the Map

Create React App

Let's setup our frontend application by typing the following command into your terminal:

npx create-react-app burger-map

This command will boilerplate a complete react application for you.

Jump into your project with cd burger-map and then start the development server with yarn start,

This will start the react application which you can then visit at http://localhost:3000.

Once this is done we can open up this project in the editor of our choice.

In the main file App.js safely remove all the stuff which is not needed the file will look like this:

import './App.css';

function App() {
    return (
        <div className="App">

        </div>
    );
}

export default App;

Fetching Burger Data

The next step is to fetch the data which we want to display. For that purpose we are going to use the npm module axios which will execute our HTTP requests.

Install it with yarn via the terminal:

yarn add axios

To add a state to our application, we need to import the useState hook. Since we want to call up the data right at the beginning of our application, we need the useEffect hook right away.
Import them at the beginning of App.js

import {useState, useEffect} from 'react';

We need one state to set our application into the loading state while fetching data, and one to store the burger data.
Lets to this with this to lines of code:

const [loading, setLoading] = useState(true)
const [burgers, setBurgers] = useState(null)

The function to fetch the data we place the useEffect hook, to be sure it is called right at the beginning of our application.
As mentiond we use axios to handle the get-request.
The URL of the API is where we get the burgers from is https://my-burger-api.herokuapp.com/burgers.

The useEffect hook should now look like this:

useEffect(() => {
    const fetchBurgers = async () => {

        const {data} = await axios.get("https://my-burger-api.herokuapp.com/burgers")

        setBurgers(data)
        setLoading(false)
    }

    fetchBurgers()
}, []);

Mapbox API

For further purposes we need to create an free account at mapbox.com. Then under your Account you can create an Access Token which we need to call the Mapbox Api.
Copy this token and put it in ca const in your application.

const MAPBOX_TOKEN = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

Append Latitude and Longitude Values to the Response

When we check the response for e.g. with console.log(data)
we see that currently the address for each burger looks something like that:

[
    {
    addressId: 0
        country: "United Kingdom"
        line1: "Brick Lane"
        line2: "Shoreditch"
        number: "104"
        postcode: "E1 6RL"
    },
    ...
]

Since the Mapbox App is needing the latitude and longitude values to display the data on the correct position we have to call the geocoding endpoint. Here we have to pass the address object as a string seperated with ampersands.

For that case create the getLatLong function like that:

const getLatLong = async (address) => {
    const {line1, line2, number, postcode, country} = address;
    let searchKey = [line1, line2, number, postcode, country].filter(Boolean).join().replaceAll(" ", "&");

    const {data: {features}} = await axios.get(`https://api.mapbox.com/geocoding/v5/mapbox.places/${searchKey}.json?access_token=${MAPBOX_TOKEN}`)

    return features[0].center;
}

Now we need to call this function for each burger so adjust the fetchBurgers function to look like that:

useEffect(() => {
    const fetchBurgers = async () => {
        let burgers = []
        const {data} = await axios.get("https://my-burger-api.herokuapp.com/burgers")

        for (const burger of data) {
            burger.latLong = await getLatLong(burger.addresses[0])
            burgers.push(burger)
        }

        setBurgers(burgers)
        setLoading(false)
    }

    fetchBurgers()
}, []);

Now when we check our burger object we see a property latLong which is an array containing the lat and long values.

Display the World Map

To display the data on a map let's install the ReactMapGL component.

yarn add react-map-gl

Then import the Map as well as the Markers Component at the beginning of our App.

import ReactMapGL, {Marker} from 'react-map-gl';

Let's adjust the return from our App.js and add the Map Component like that:


if (loading) {
    return 'loading burgers..'
}

return (
    <div className="App">
        <div>
            <h1 style={{textAlign: 'center'}}>World Map</h1>
        </div>

        <ReactMapGL
            width="100vw"
            height="100vh"
            mapboxApiAccessToken={MAPBOX_TOKEN}
        >
        </ReactMapGL>
    </div>
);

Now you already should be able to see a fullscreen map in your browser.

To make our map interactive we need to add a so called viewport as well as the function to change it.

So add a new state, as well as adjust the Map Component:

const [vieport, setVieport] = useState({})

<ReactMapGL
    {...vieport}
    width="100vw"
    height="100vh"
    onViewportChange={nextVieport => setVieport(nextVieport)}            
    mapboxApiAccessToken={MAPBOX_TOKEN}
>
</ReactMapGL>

Go and check the map. You can now drag and drop, as well as zoom in and zoom out.

Render Data on the Map

Now we come to the last part. We have to combine the data and the map.

For that create the renderBurgers function and call inside of the ReactMapGL component.
The renderBurgers function maps over all burgers, passes the lat and long values to the Marker and returns them on their location.
Whatever you pass inside the Marker Component will then be displayed on the map. In this case we render a X for each burger.

function renderBurgers() {
    return burgers.map(burger => (
        <Marker
            key={burger.id}
            latitude={burger.latLong[1]}
            longitude={burger.latLong[0]}
        >
            X
        </Marker>
    ))
}

The last step is to call the renderBurgers function in the ReactMapGl Component. So let's add it:

<ReactMapGL
    {...vieport}
    width="100vw"
    height="100vh"
    onViewportChange={nextVieport => setVieport(nextVieport)}
    mapboxApiAccessToken={MAPBOX_TOKEN}
>
    {renderBurgers()}
</ReactMapGL>

Conclusion

In this I showed you how to create a react app, fetch data from an API. Then we used the Mapbox react component to display the data on the Map.

This was my first article ever, if you liked it let me now. And if you didn't liked it let me now what can be improved.

Thanks for reading!

GitHub: https://github.com/dom-the-dev/burger-map

TL;DR

I also made a step by step video for this burger map on my YouTube Channel.