DEV Community: Marianna

Create Cool React Image Gallery

Marianna — Wed, 16 Feb 2022 10:08:58 +0000

Image gallery is one of the most important parts of any website. Today I want to show you how to create a responsive image gallery with React.

Step 1
Firstly we need some images to display in our gallery. For this we will use Lorem.space website to get random placeholder images. You can choose any category you want but I will go with shoes 👟.
We will create an array that will contain URLs of our images. For this tutorial I will use three images but of course you can have more images if you want.

const images = [
  {
    url: "https://api.lorem.space/image/shoes?w=400&h=400&hash=8B7BCDC2"
  },
  {
    url: "https://api.lorem.space/image/shoes?w=400&h=400&hash=500B67FB"
  },
  {
    url: "https://api.lorem.space/image/shoes?w=400&h=400&hash=4F32C4CF"
  }
];

Step 2
After that we will create a functional React component for our app:

export default function App() {
  return (
    <div
      style={{
        flexDirection: "row",
        display: "flex",
        justifyContent: "center",
        alignContent: "center"
      }}
    >
    </div>
  );
}

We will use React style prop to center our div.
Step 4
In our gallery we want to have one main image and two secondary images that will have less opacity. In order to do that we need to create a component for our image:

const Image = ({ src, setMainImg, mainImg }) => {
  const [opacity, setOpacity] = useState(0.6);
  const [srcUrl, setSrcUrl] = useState(src);

  return (
    <img
      src={srcUrl}
      alt="new"
      height="250"
      width="250"
      style={{ opacity: opacity }}
      onMouseOver={() => {
        setOpacity(0.8);
      }}
      onMouseOut={() => {
        setOpacity(0.6);
      }}
      onClick={() => {
        setMainImg(srcUrl);
        setSrcUrl(mainImg);
      }}
    />
  );
};

The Image component will receive 3 props: src - URL of the image, setMainImg - hook to manage app state and mainImg - URL of the main image. We want to change the main image on click. To do that we use onClick prop. And also we want to change the opacity of the secondary image on hover. We can do this with the use of onMouseOver and onMouseOut props.
Also in our App component we will specify the initial value of the main image URL and the state management function with the useState React hook:

const [mainImg, setMainImg] = useState(images[0].url);

That's it! You should be able to see something like this:

You can view a live demo of the image gallery on my CodeSandBox

Thank you for reading and happy coding!😊!

Create Cool Plots With React and Plotly

Marianna — Sat, 12 Feb 2022 10:39:03 +0000

Today I will show you how to create an interactive plot with React and Plotly library that you can use in your React web apps!
Let's start cooking!🍳

Step 1
In this tutorial we will plot 24hr price change of cryptocurrency. To do that we will need an API to get data. I will use Alpha Vantage API to fetch data. You can grab your own API key on their website or just use demo key.

To get data from API we will use fetchData function:

const fecthData = async () => {
  const apiKey = "demo";
  const url = `https://www.alphavantage.co/query?function=CRYPTO_INTRADAY&symbol=ETH&market=USD&interval=5min&apikey=${apiKey}`;
  return fetch(url)
    .then((res) => {
      if (res.status === 200) {
        return res.json();
      }
    })
    .then((data) => {
      return data["Time Series Crypto (5min)"];
    });
};

This function is asynchronous because it takes time to retrieve data and we don't want our application to be blocked during this time!

Step 2
Then we need to install Plotly. To do this just run the following command in your terminal:
npm install react-plotly.js plotly.js
After installation import Plotly and React hooks that we will need for state management:

import Plot from "react-plotly.js";
import { useState, useEffect } from "react";

Step 3
We will create functional React component for our app:

export default function App() {
  const [data, setData] = useState([]);
  const [dataIsLoaded, setDataIsLoaded] = useState(false);
if (dataIsLoaded) {
    return <div>Loaded</div>;
 } else {
    return <div>Loading...</div>;
  }

We will show our plot only after our data is loaded. To do this we will use Boolean variable dataIsLoaded that will be set to true when we get data. Variable data will be used to store retrieved data.

Step 4
We want to fetch data only once when the app is loaded. To make this happen we will use React useEffect hook, everything we write inside this hook will be executed only once:

useEffect(() => {
    fecthData().then((res) => {
      setData(res);
      setDataIsLoaded(true);
    });
  }, []);

We use .then with our fetchData() because it returns Promise and after this Promise will be returned we will set our data variable to the response from the API. After that we will set dataIsLoaded to true to render our plot.

Step 5
To be able to show our plot we need x and y variables: x for x axis and y for y axis:

const X = Object.keys(data);
const Y = X.map((date) => {
    return data[date]["1. open"];
  });

On x axis we will show the date and on the y axis we will show the open price of ETH.

Step 6
To create a line chart we will use Plot component with type scatter and mode lines. Also we will set some layout options to add title, change range of y axis, background color and font:

if (dataIsLoaded) {
    return (
      <Plot
        data={[
          {
            x: X,
            y: Y,
            fill: "tonexty",
            type: "scatter",
            marker: { color: "#8000DE" }
          }
        ]}
        layout={{
          width: 500,
          height: 300,
          title: "ETH-USD",
          yaxis: {
            range: [2850, 3000],
            type: "linear"
          },
          paper_bgcolor: "rgb(243, 243, 243)",
          plot_bgcolor: "#f3f3f3",
          family: "Courier New, monospace"
        }}
      />
    );
  }

You should get something like this:

And to add fill under plot just use fill property in data:

data={[
          {
            x: X,
            y: Y,
            fill: "tonexty", // add this
            type: "scatter",
            mode: "lines",
            marker: { color: "#8000DE" }
          }
        ]}

You can learn more about different plot types and their attributes on the official Plotly website.
Also you can view all the source code and live demo on my CodeSandBox.

That's all!😃
Hope you liked this tutorial and happy coding!

Flask App Login with Google

Marianna — Thu, 03 Feb 2022 14:16:50 +0000

Social authentication has one big advantage - you don't have to worry about user data, all the backend work is done for you! And almost everyone these days has a Google account so it would be really handy for your users to have this option!😊
So let's begin!

Step 1
First thing first you need to get your Google credentials details - Client ID and Client Secret. Go to Google Developers website and in the Credentials click on 'Create credentials. Select 'OAuth client ID'. 👇

You may have to create OAuth Consent Screen. Just enter your Flask app name and your email address in the user support & developer email and click 'Save and continue'.

After that go back to credentials tab and edit your OAuth Client ID. Add new authorized URI to redirect your logins through:

And we're done! Now let's create our app!

Step 2
Run the following in your command line:
pip install -U Flask Authlib requests

Create new folder for your app and open it in your favorite IDE:



mkdir flask-google-login
cd flask-google-login
code .

Step 3
In your project directory create new folder templates and in this folder createindex.html:



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles.css') }}">
    <title>Flask app</title>
</head>
<body>
        <div align="center">
            <a href="google/" class="login-btn" style="text-decoration:none;">
                <img id="google" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/2048px-Google_%22G%22_Logo.svg.png"
            alt="Google"
            style="width:50px;height:50px;">
            <div class="btn-text">
                Login with Google
            </div>
            </a> 
        </div>
</body>
</html>

Also in the working directory create another folder static and add styles.css file:



.login-btn {
    justify-content: center;
    flex-direction: row;
    display: flex;
    background-color: rgb(255, 255, 255);
    justify-content: center;
    align-items: center;
    width: 220px;
    padding: 10px;
    box-shadow: 3px 3px 3px rgb(170, 170, 170);
    border-radius: 15px;
}
.btn-text {
    justify-content: center;
    padding: 10px;
    font-family: 'Poppins', sans-serif;
    color: rgb(85, 85, 85);
}

Step 4
In the main working directory create app.py file:



from flask import Flask, render_template, url_for, redirect
from authlib.integrations.flask_client import OAuth
import os


app = Flask(__name__)
app.secret_key = os.urandom(12)

oauth = OAuth(app)

@app.route('/')
def index():
    return render_template('index.html')

To be able to authorize our users we need to create an unique secret key. to do that we simply use 12 randomly generated characters.
After that we will create the index function that will render our index.html page.

Step 5
Then we will create two functions that will handle authentication with Google. To get your Google Client ID and Secret go to Google Credentials click on the download icon and cope your credentials!



@app.route('/google/')
def google():

    GOOGLE_CLIENT_ID = 'YOUR GOOGLE CLIENT ID'
    GOOGLE_CLIENT_SECRET = 'YOUR GOOGLE CLIENT SECRET'

    CONF_URL = 'https://accounts.google.com/.well-known/openid-configuration'
    oauth.register(
        name='google',
        client_id=GOOGLE_CLIENT_ID,
        client_secret=GOOGLE_CLIENT_SECRET,
        server_metadata_url=CONF_URL,
        client_kwargs={
            'scope': 'openid email profile'
        }
    )

    # Redirect to google_auth function
    redirect_uri = url_for('google_auth', _external=True)
    print(redirect_uri)
    return oauth.google.authorize_redirect(redirect_uri)

@app.route('/google/auth/')
def google_auth():
    token = oauth.google.authorize_access_token()
    user = oauth.google.parse_id_token(token)
    print(" Google User ", user)
    return redirect('/')

After all this run your app and go to http://localhost:5000/ and you should be able to see something like this:

After clicking on the button you will be redirected to the Google Login page:

That's it! Hope you liked it and happy coding!😀

Create a Search Bar with React and Material UI

Marianna — Tue, 01 Feb 2022 14:48:18 +0000

Today I wanna show you how you can create a Search bar with React and Material UI kit!
So let's start cooking!🍪

Step 1
To install Material UI kit run the following command in the terminal:
npm install @material-ui/core

Also we need to install Material Icons library. To do that run the following in the command line:
npm install @material-ui/icons

After the installation, import everything we will need:



import { useState } from "react";
import IconButton from "@mui/material/IconButton";
import SearchIcon from "@mui/icons-material/Search";
import TextField from "@mui/material/TextField";

Step 2
First of all we will create a functional component for our Search bar:



const SearchBar = ({setSearchQuery}) => (
  <form>
    <TextField
      id="search-bar"
      className="text"
      onInput={(e) => {
        setSearchQuery(e.target.value);
      }}
      label="Enter a city name"
      variant="outlined"
      placeholder="Search..."
      size="small"
    />
    <IconButton type="submit" aria-label="search">
      <SearchIcon style={{ fill: "blue" }} />
    </IconButton>
  </form>
);

This component will accept the setSearchQuery function that we will change the state. We will also create the Text Field that will correspond to the search bar. Function that we pass to onInput prop will handle the user input.

Step 3
Then we will create a function to filter our data. This function will return only elements that include our search query.



const filterData = (query, data) => {
  if (!query) {
    return data;
  } else {
    return data.filter((d) => d.toLowerCase().includes(query));
  }
};

Also we will create data array to represent our data:



const data = [
    "Paris",
    "London",
    "New York",
    "Tokyo",
    "Berlin",
    "Buenos Aires",
    "Cairo",
    "Canberra",
    "Rio de Janeiro",
    "Dublin"
  ];

Step 4
We will create our App functional component:



export default function App() {
  const [searchQuery, setSearchQuery] = useState("");
  const dataFiltered = filterData(searchQuery, data);

  return (
    <div
      style={{
        display: "flex",
        alignSelf: "center",
        justifyContent: "center",
        flexDirection: "column",
        padding: 20
      }}
    >
      <SearchBar searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
      <div style={{ padding: 3 }}>
        {dataFiltered.map((d) => (
          <div
            className="text"
            style={{
              padding: 5,
              justifyContent: "normal",
              fontSize: 20,
              color: "blue",
              margin: 1,
              width: "250px",
              BorderColor: "green",
              borderWidth: "10px"
            }}
            key={d.id}
          >
            {d}
          </div>
        ))}
      </div>
    </div>
  );
}

Our App renders the array of our filtered data. Every time we type something in the search bar setSearchQuery function will change the state of the app and we will render filtered data.

You should get something like this:

That's all! Thank you for reading and happy coding!😊

Create a Cool Login Page with React

Marianna — Sun, 30 Jan 2022 10:24:14 +0000

Today I wanna show you how to easily create a cool Login Page for your brand new React Startup!
Let's get cooking!😜

Step 1
Create a new React project by running following command:
npx create-react-app login-form

Then open your newly created app in your favorite IDE.

Step 2
Add this to your index.html file:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
<div id="root"></div>

Step 3
Delete all the boiler-late code from the App.js file and add this code to create a new React functional component:

const LoginForm = () => {

return (
   <form class="form">
      <div style={formStyle}>
        <div style={{display: "flex", alignSelf: "flex-start", paddingBottom: 20, fontSize: 30}} class="input">
        Login
      </div>
      </div>
   </form>
);
}

Also add this to App.css file:

.form {
  flex-direction: column;
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
}

.input {
  font-family: 'Montserrat', sans-serif;
  padding-top: 10;
}

We will use a Google font called Montserrat.

And also add a styling variable to the constants:

const formStyle = {
    flexDirection: "column",
    alignSelf: "center",
    width: "30%",
    display: "flex",
    justifyContent: "space-between",
  }

Step 4
Add variables and functions to handle user input:

  const [login, setLogin] = useState('');
  const [password, setPassword] = useState('');
  const [hover, setHover] = useState();
  const [remember, setRememeber] = useState(false);

  const handleSubmit = (event) => {
    alert('You have successfully signed in!');
    event.preventDefault();
  }

Step 5
Add the Login and Password inputs:

<label style={{color: "blue"}} class="input">
          Username or Email*:
          </label>
          <input 
            class="input"
            type="text" 
            style={inputStyle} 
            value={login} 
            onChange={(event) => setLogin(event.target.value)}
            placeholder={"your.name@email.com"}/>

<label class="input" style={{color: "blue"}}>
         Password*:
        </label>
          <input 
            class="input"
            type="password" 
            style={inputStyle} 
            value={password} 
            onChange={(event) => setPassword(event.target.value)}
            placeholder={"Min. 8 characters"}/>

We will use <label> tag to add labels for inputs. To create a password input we will specify the type of input as "password".

Also create the inputStyle variable to add stylings for our inputs:

const inputStyle = {
    padding: 8,
    borderRadius: 15,
    borderWidth: 1,
    margin: 5,
    backgroundColor: "#f5f5f5",
    borderColor: "#d2d2d4",
  }

Step 6
Also we will create a checkbox to let the user decide whether he wants to be remembered and add a Forgot Password? link:

<div style={{flexDirection: "row", display: "flex", justifyContent: "space-between", height: "100", padding: 5}}>
          <div style={{flexDirection: "row", display: "flex", justifyContent: "space-between"}}>
            <input 
              type="checkbox"
              checked={remember}
              onChange={() => setRememeber(prev => !prev)}/>
          <label>
          <div class="input" style={{fontSize: 12, justifyContent: "flex-start"}}>
            Rememeber me?
        </div>
        </label>
          </div>

          <div style={{justifyContent: "flex-end", display: "flex"}}>
            <a  href="#" class="input" style={{fontSize: 12}}>Forgot password?</a>
          </div>
        </div>

Step 7
After all we will add a submit button:

<div style={{justifyContent: "center", display: 'flex', bakgroundColor: "red", width: "100%"}}>
      <input type="submit" value="Sign In" 
        id="button"
        class="input"
        onMouseOver={handleMouseIn} onMouseOut={handleMouseOut}
          style={ hover ? hoverStyle : btnStyle}
          />

Also we need to add two functions to handle button behavior:

const handleMouseIn = () => {
    setHover(true);
  };

  const handleMouseOut = () => {
    setHover(false);
  };

And styling for our button:

const hoverStyle = {
    margin: 5, padding: 8, borderRadius: 15, width: "100%",
    backgroundColor: "white",
    color: "blue",
    borderWidth: 1,
    borderColor: "blue",
  }

  const btnStyle = {
    margin: 5, padding: 8, borderRadius: 15, width: "100%",
    backgroundColor: "blue",
    color: "white",
    borderWidth: 0
  }

That's it! After all that you should be able to see the similar page:

Hope you liked this tutorial and thanks for reading!😊

Create Stocks Web Scraper with Python

Marianna — Fri, 28 Jan 2022 09:13:26 +0000

As investing and trading becomes more popular every other day, we, developers, are trying to make our lives easier and have more fun with our code. Today I will explain how to create a web scraper to scrape real-time ~~stonks~~ stock prices with Python.
So let's get started!

For this tutorial we will use Yahoo Finance web site to get stocks data.
You can enter this URL into your browser's search bar https://finance.yahoo.com/MSFT to get the idea what our scraper should look for on the web page.

If you use Google Chrome browser you can open web developer tools by using Ctrl+Shift+I keyboard shortcut. After that go to 'elements' tab and click on the mouse icon in the left-hand corner. You will be able to click on the element on the page and see what it HTML code looks like.

So after inspecting elements and finding what we should look for we can start building our web scraper!

Step 1

You need to install two very important Python libraries - BeautifulSoup and HTML parser html5lib. You can do that by running following commands in your terminal/command line:
pip install beautifulsoup4 html5lib
After successful installations we can start creating our web scraper!

Step 2

Create a working directory for our scraper (you can name it whatever you want 😊):
mkdir stocks-scraper
Then create a file called 'scraper.py'.
First of all import necessary libraries and functions:

import requests
from bs4 import BeautifulSoup

Step 3
Then we will create a function that will accept a ticker (e.g. MSFT) and return real-time data:

def get_stock_data(ticker) :
    url = f'https://finance.yahoo.com/quote/{ticker}'
    headers = {'content-type': 'application/json', 'User-Agent': 'Custom'}
    r = requests.get(url, headers=headers)
    soup = BeautifulSoup(r.content, "html5lib")
    shortName = soup.find('h1', {'class' : 'D(ib) Fz(18px)'}).text
    bracket = shortName.find('(')
    shortName = shortName[: bracket]
    percent = soup.find('fin-streamer', {'data-field' : 'regularMarketChangePercent', 'data-symbol': ticker}).get('value')
currentPrice = soup.find('fin-streamer', {'class' : 'Fw(b) Fz(36px) Mb(-4px) D(ib)'}).text
    return {
        "symbol": ticker,
        "shortName": shortName,
        "currentPrice": currentPrice,
        "percent": percent
        }

Let's look closely on our code.

Firstly we create an f-string that will represent an URL we want to scrape data from.
Then we will send a GET request with the specified headers (without headers your request can be blocked!).
After that we will parse the content of the page that we requested with the use of html5lib library.
And then we will search for the tags associated with the data we want. In this example we extract name of the company, percentage of the price change and current stock price.
After all we will return all the data in the Python dictionary.

To test our scraper run the following command in the working directory:

python
from scraper import get_stock_data
get_stock_data('MSFT')

You should get similar result:

{'symbol': 'MSFT', 'shortName': 'Microsoft Corporation ', 'currentPrice': '299.84', 'percent': 1.0549038}

That's all! You can use this scraper to get data of any stock that is present on Yahoo Finance site! But be careful - don't send too much requests too frequently or your IP will be blocked!

Thank you for reading and happy coding 😊!