DEV Community: Kirti

Adding Google Authentication Feature.

Kirti — Sun, 23 Jan 2022 08:13:11 +0000

Hey everyone! In this article, we will be adding a new feature Google AUTH to our login Form.
Let's start with basics install a react app using the below commands in the terminal.

npx create-react-app google_auth
cd google_auth
npm start

Now, let's quickly install a very popular package react-google-login to display a “Log in with Google” button which will help us in retrieving information about the user and will also handle displaying a google login prompt.

npm install react-google-login

Now after that write these lines of code in the App.js file i have added the explanation to each line

import React from 'react'
import GoogleLogin from 'react-google-login';  // importing library
const App = () => {

  // Function for displaying response in console
  const displayResponse = (res) => {
     console.log(res);
     console.log(res.profileObj);

  };

  return (
    <div>
      {/* It takes some props as clientId , ButtonText
      onSuccess , onFailure, cookiePolicy= {single_host_origin} */}
      <GoogleLogin
         clientId=""
         buttonText="Login with Google"
         onSuccess={displayResponse}
         onFailure={displayResponse}
         cookiePolicy="single_host_origin"
      />
    </div>
  )
}

export default App;

Now, as you can see the clientId is yet not there, so for that go to "Google API console" and in there add a new project, just add your project name and done.
Now switch to the project which you just added. Go to credentials.
After that go to configure consent screen and after that click on "External" after that click on create.
Now it will ask you to fill in some more details like application name(not the same as your project's name). You have to also enter the support email id and after that just keep on clicking save and next.
Now, go back to the credentials tab again and click on create credentials. Here click on Create OAuth client ID and in there add application type to be Web application and add URI to where you want to use your google login.
Yuhuu!!! we generated our keys.
Now, simply copy and paste the code in the code editor where clientID ="Our Above steps result".

Now, just run your react app and click on the login button you will see something like this

and after you log in with any of the accounts it will display it in the console.

I have attached the GitHub code for the same.
Github
Thank You!!!🙂🙂

Build Your Expense Tracker using chart.js - PART-1

Kirti — Wed, 05 Jan 2022 09:04:38 +0000

How cool would that be if we could just talk about our expenses and our app would calculate and show graphical representation of all our income and expenses with history of our previous records as well.
To add cherry on top let's make our very own Expense Tracker using context API ,Speechly and local Storage.
Let's start with the setup first go to terminal of your VScode and write

npx create-react-app my-app
cd my-app
npm start

One more thing to add is our react version is 17 and we would need to degrade it because our speechly doesn't support the new version of react. so for downgrading write in your terminal.

npm i react@16.12.0 react-dom@16.12.0

Now, let's just install all the other packages that we would be needing for our build.
for design purpose

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

for graphical representation and unique id

npm i chart.js react-chartjs-2 uuid

Now , for the special voice feature

npm i @speechly/react-client @speechly/react-ui

Let's start with setting up the background and basic structure of our app where we would have one component for expense and income and one as main components where we would be adding a form and voice feature to add our expense.
Make Details.js file and for structure have a look at the code below.

import React from 'react'
import {Card , CardHeader , CardContent , Typography } from '@material-ui/core';
// import { Doughnut } from 'react-chartjs-2';
import  useStyles from './styles';
const Details = ({title}) => {
    // We use useStyle hook for importing material-ui class
    const classes =useStyles();

    return (
        // In th below statement for our income use income css class else expense
        <Card className={title === 'Income' ? classes.income : classes.expense}>
            <CardHeader title={title}/>
                <CardContent>
                   <Typography varinat="h5"> $50</Typography>
                   {/* We will be adding data later */}
                   {/* <Doughnut data='DATA' /> */}
                </CardContent>
        </Card>
    )
}

export default Details

Now Styles file

import { makeStyles } from '@material-ui/core/styles';

export default makeStyles(() => ({
  income: {
    borderBottom: '10px solid rgba(0, 255, 0, 0.5)',
  },
  expense: {
    borderBottom: '10px solid rgba(255, 0, 0, 0.5)',
  },
}));

import React from 'react'
import {Card , CardHeader , CardContent , Typography , Grid , Divider, FormControl, InputLabel, Select, MenuItem} from '@material-ui/core';
import useStyles from './styles'
import Form from './Form/Form';
const Main = () => {
        // We use useStyle hook for importing material-ui class
    const classes = useStyles();
    return (
        <Card className={classes.root}>
            <CardHeader title ="Expense Tracker" subheader="Talk to Add your expenses"/>
            <CardContent>
                <Typography align="center" variant="h5"> Total Balance $100</Typography>
                <Typography variant="subtitle1" style={{lineHeight: '1.5em', marginTop: '20px'}}>
                </Typography>
                <Divider/>
                {/* Below is our Form component */}
                <Form/>
            </CardContent>

        </Card>
    )
}

export default Main

Now styles file for main component

import { makeStyles } from '@material-ui/core/styles';

export default makeStyles((theme) => ({
  media: {
    height: 0,
    paddingTop: '56.25%', // 16:9
  },
  expand: {
    transform: 'rotate(0deg)',
    marginLeft: 'auto',
    transition: theme.transitions.create('transform', {
      duration: theme.transitions.duration.shortest,
    }),
  },
  expandOpen: {
    transform: 'rotate(180deg)',
  },
  cartContent: {
    paddingTop: 0,
  },
  divider: {
    margin: '20px 0',
  },
}));

Now Form Component

import React from 'react'
import {TextField, Typography, Grid, Button, FormControl, InputLabel, Select, MenuItem} from '@material-ui/core';
import useStyles from './styles';
const Form = () => {
    const classes = useStyles();
    return (
        <Grid container spacing={2}>
                    <Grid item xs={12}>
                    <Typography align='center' variant='subtitle1' gutterBottom>
                        ...
                    </Typography>
                    </Grid>

                    {/* Another grid for Type */}
                    <Grid item xs={6}>
                    <FormControl fullWidth>
                        <InputLabel>Type</InputLabel>
                        <Select>
                            <MenuItem value="Income">Income</MenuItem>
                            <MenuItem value="Expense">Expense</MenuItem>
                        </Select>
                    </FormControl>
                    </Grid>
                    {/* Another grid for conatiner */}
                    <Grid item xs={6}>
                        <FormControl fullWidth>
                            <InputLabel> Category</InputLabel>
                            <Select>
                            <MenuItem value="Income">I</MenuItem>
                            <MenuItem value="Expense">E</MenuItem>
                        </Select>
                        </FormControl>
                    </Grid>

                    {/*Amount */}
                    <Grid item xs={6}>
                      <TextField type="number" label ="Amount" fullWidth/>
                    </Grid>

                    {/* DATE */}
                    <Grid item xs={6}>
                      <TextField type="date" label ="Date" fullWidth/>
                    </Grid>

                    {/*BUTTON TO SUBMIT OUR FORM */}
                    <Button className={classes.button} variant="outlined" color="primary" fullWidth>
                        Create
                    </Button>
            </Grid>
    )
}

export default Form

Now style file for form

import { makeStyles } from '@material-ui/core/styles';

export default makeStyles(() => ({
  radioGroup: {
    display: 'flex',
    justifyContent: 'center',
    marginBottom: '-10px',
  },
  button: {
    marginTop: '20px',
  },
}));

Now App.js file where we will call and arrange our all components to be rendered on the website.

import React from 'react'
import {Grid} from '@material-ui/core';
import Details from './components/Details/Details';
import useStyles from './styles';
import Main from './components/Main/Main';
const App = () => {

    const classes =useStyles();
    return (
        <div>
            <Grid className= {classes.grid} 
            container spacing={0} 
            alignItems= "center"
            justify="center"
            style={{height: '100vh'}}>
                <Grid item xs={12} sm={3}>
                    <Details title ="Income"/>
                </Grid>
                {/* Main component */}
                <Grid item xs={12} sm={3}>
                    <Main/>
                </Grid>
                {/* Expense component */}
                <Grid item xs={12} sm={3}>
                    <Details title="Expense"/>
                </Grid>
            </Grid>
        </div>
    )
}

export default App

Now styling file for App file

#root, body , html {
    height: 100%;;
    margin: 0;
}

body{
    background: url(./Images/bg.jpg);
    background-size: cover;
}

Now , Our structure is ready and after these lines of codes our app will look something like this.

Now, let's talk about one of the important things which we will be using for our app is Context. Here, you can relate context to
the reducer where we had a store and all the components used to take data from. It is similar to that but simpler and with less boilerplate code. Here, we have two main things to focus on right now is adding transactions and deleting one. Create a folder name context and in that files named context.js and contextReducer.js and have a look at the below code I have added explanation there.
context.js

import React, {useReducer , createContext} from 'react';

import  contextReducer from './contextReducer';

const intitalState = [];

export const ExpenseTrackerContext = createContext(intitalState);

export const Provider = ({children}) => {
    const [transactions, dispatch] = useReducer(contextReducer, intitalState);

    // Action Creators
    //which one we want to delete can be known by the id only 
    const deleteTransactions = (id) => {
          dispatch({type: 'DELETE_TRANSACTION', payload: id});
    };
    // In here while creating we dont know the id so we need the whole transaction
    // dispatching means changing the state of the transition
    const addTransactions = (transaction) => {
        dispatch({type: 'ADD_TRANSACTION', payload: transaction});
    };

    return (
        // This line below means we are sending the delete and add transaction method to be used by the whole app
        <ExpenseTrackerContext.Provider value={{
            deleteTransactions,
            addTransactions,
            transactions,
        }}>
            {children}
        </ExpenseTrackerContext.Provider>
    );

};

contextReducer.js

//logic after doing that action like how changing old state to new

const contextReducer = (state, action) => {
    let transactions;

    switch(action.type){

        case 'DELETE_TRANSACTION':
            transactions = state.filter((t) => t.id !== action.payload);
            return transactions;

        case 'ADD_TRANSACTION':
            transactions = [action.payload, ...state]; 
            return transactions;
        default:
            return state;
    }
}

export default contextReducer;

Now, calling it in our List.jsx

import React, {useContext} from 'react';
import { List as MUIList, ListItem, ListItemAvatar, Avatar, ListItemText, ListItemSecondaryAction, IconButton, Slide } from '@material-ui/core';
import { Delete, MoneyOff } from '@material-ui/icons';
import {ExpenseTrackerContext} from '../../../context/context';
import useStyles from './styles';

const List = () => {
    const classes =useStyles();
    const {transactions , deleteTransactions} = useContext(ExpenseTrackerContext);

    return (
       <MUIList dense={false} className={classes.list}>
           {
               transactions.map((transaction) => (
                   <Slide direction="down" in mountOnEnter unmountOnExit key={transaction.id}>
                       <ListItem>
                           <ListItemAvatar>
                               <Avatar className={transaction.type === 'Income' ?
                               classes.avatarIncome : classes.avatarExpense
                               }>
                                   <MoneyOff/>
                               </Avatar>
                           </ListItemAvatar>
                           <ListItemText primary={transaction.category} 
                           secondary ={`$${transaction.amount} - ${transaction.date}`}></ListItemText>
                           <ListItemSecondaryAction>
                               <IconButton edge="end" aria-label="delete" 
                               onClick={() => deleteTransactions(transaction.id)}>
                                 <Delete/>
                               </IconButton>
                           </ListItemSecondaryAction>
                       </ListItem>

                   </Slide>
               ))
           }

       </MUIList>
    )
}
export default List

Now we would also want to have a dynamic categories list for expenses and income and for that we would create constants and simply in there, we will be creating objects of type, amount, and color. Look at the picture below for a better understanding.

Categories.js

const incomeColors = ['#123123', '#154731', '#165f40', '#16784f', '#14915f', '#10ac6e', '#0bc77e', '#04e38d', '#00ff9d'];
const expenseColors = ['#b50d12', '#bf2f1f', '#c9452c', '#d3583a', '#dc6a48', '#e57c58', '#ee8d68', '#f79d79', '#ffae8a', '#cc474b', '#f55b5f'];

export const incomeCategories = [
  { type: 'Business', amount: 0, color: incomeColors[0] },
  { type: 'Investments', amount: 0, color: incomeColors[1] },
  { type: 'Extra income', amount: 0, color: incomeColors[2] },
  { type: 'Deposits', amount: 0, color: incomeColors[3] },
  { type: 'Lottery', amount: 0, color: incomeColors[4] },
  { type: 'Gifts', amount: 0, color: incomeColors[5] },
  { type: 'Salary', amount: 0, color: incomeColors[6] },
  { type: 'Savings', amount: 0, color: incomeColors[7] },
  { type: 'Rental income', amount: 0, color: incomeColors[8] },
];

export const expenseCategories = [
  { type: 'Bills', amount: 0, color: expenseColors[0] },
  { type: 'Car', amount: 0, color: expenseColors[1] },
  { type: 'Clothes', amount: 0, color: expenseColors[2] },
  { type: 'Travel', amount: 0, color: expenseColors[3] },
  { type: 'Food', amount: 0, color: expenseColors[4] },
  { type: 'Shopping', amount: 0, color: expenseColors[5] },
  { type: 'House', amount: 0, color: expenseColors[6] },
  { type: 'Entertainment', amount: 0, color: expenseColors[7] },
  { type: 'Phone', amount: 0, color: expenseColors[8] },
  { type: 'Pets', amount: 0, color: expenseColors[9] },
  { type: 'Other', amount: 0, color: expenseColors[10] },
];
// Reset function to reset all the categories if you want to clean them
export const resetCategories = () => {
  incomeCategories.forEach((c) => c.amount = 0);
  expenseCategories.forEach((c) => c.amount = 0);
};

Now, let's call everything in our Form.jsx
Form.jsx

import React, {useContext, useState} from 'react';
import {TextField, Typography, Grid, Button, FormControl, InputLabel, Select, MenuItem} from '@material-ui/core';
import useStyles from './styles';
import {ExpenseTrackerContext} from '../../../context/context';
import {v4 as uuidv4} from 'uuid';
import {incomeCategories , expenseCategories} from '../../../constants/categories';
import formatDate from '../../../Utils/formatDate';


const initialState = {
    amount: '',
    category: '',
    type: 'Income',
    date: formatDate(new Date()),
};

const Form = () => {
    const classes = useStyles();
    const {addTransactions} = useContext(ExpenseTrackerContext);
    const [formData , setFormData] =useState(initialState);


    const createTransaction = () => {
        // For id we will be using uuid
        const transaction = {...formData, amount: Number(formData.amount), id: uuidv4()}
        addTransactions(transaction);
        setFormData(initialState);
    }

    const selectedCategories = formData.type === 'Income' ? incomeCategories : expenseCategories;
    return (
        <Grid container spacing={2}>
                    <Grid item xs={12}>
                    <Typography align='center' variant='subtitle1' gutterBottom>
                        ...
                    </Typography>
                    </Grid>

                    {/* Another grid for Type */}
                    <Grid item xs={6}>
                    <FormControl fullWidth>
                        <InputLabel>Type</InputLabel>
                        <Select value={formData.type} 
                        onChange={(e) => setFormData({...formData, type: e.target.value})}>
                            <MenuItem value="Income">Income</MenuItem>
                            <MenuItem value="Expense">Expense</MenuItem>
                        </Select>
                    </FormControl>
                    </Grid>

                    {/* Another grid for conatiner */}
                    <Grid item xs={6}>
                        <FormControl fullWidth>
                            <InputLabel>Category</InputLabel>
                            <Select value={formData.category} 
                            onChange={ (e) => setFormData({...formData, category: e.target.value})}>
                                    {
                                        selectedCategories.map((c) => 
                                        <MenuItem key ={c.type} value={c.type}>
                                            {c.type}
                                        </MenuItem>
                                        )
                                    }
                        </Select>
                        </FormControl>
                    </Grid>

                    {/*Amount */}
                    <Grid item xs={6}>
                      <TextField type="number" label ="Amount" fullWidth value={formData.amount}
                      onChange={(e) => {setFormData({...formData , amount: e.target.value})}}/>
                    </Grid>

                    {/* DATE */}
                    <Grid item xs={6}>
                      <TextField type="date" label ="Date" fullWidth value={formData.date}
                      onChange={(e)=> {setFormData({...formData, date: formatDate(e.target.value)})}}/>
                    </Grid>

                    {/*BUTTON TO SUBMIT OUR FORM */}
                    <Button className={classes.button} variant="outlined" color="primary" fullWidth
                    onClick={createTransaction}>
                        Create
                    </Button>
            </Grid>
    )
}

export default Form;

For the change in date Format have a look at the below code or you can also use moment library.
util.js

export default (date) => {
    const d = new Date(date);
    let month = `${d.getMonth() + 1}`;
    let day = `${d.getDate()}`;
    const year = d.getFullYear();

    if (month.length < 2) { month = `0${month}`; }
    if (day.length < 2) { day = `0${day}`; }

    return [year, month, day].join('-');
  };

Next part is to add charts the graphical representation of our income and expenses. For that we would be using custom hook(A custom Hook is a JavaScript function whose name starts with ”use” and that may call other Hooks).

UseTransaction.js

import { useContext } from 'react';
import { ExpenseTrackerContext } from './context/context';

import { incomeCategories, expenseCategories, resetCategories } from './constants/categories';

const useTransactions = (title) => {
  resetCategories();
  const { transactions } = useContext(ExpenseTrackerContext);
  const rightTransactions = transactions.filter((t) => t.type === title);
  const total = rightTransactions.reduce((acc, currVal) => acc += currVal.amount, 0);
  const categories = title === 'Income' ? incomeCategories : expenseCategories;

  rightTransactions.forEach((t) => {
    const category = categories.find((c) => c.type === t.category);

    if (category) category.amount += t.amount;
  });

  const filteredCategories = categories.filter((sc) => sc.amount > 0);

  const chartData = {
    datasets: [{
      data: filteredCategories.map((c) => c.amount),
      backgroundColor: filteredCategories.map((c) => c.color),
    }],
    labels: filteredCategories.map((c) => c.type),
  };

  return { filteredCategories, total, chartData };
};

export default useTransactions;

Let's simply call this hook in our details file and one more thing to notice we do need to downgrade out chart.js package fr doing that put these commands in the terminal

npm i chart.js@2.9.4  react-chartjs-2@2.11.1

Now , calling our hook in details.jsx

import React from 'react'
import {Card , CardHeader , CardContent , Typography } from '@material-ui/core';
 import { Doughnut } from 'react-chartjs-2';

import  useStyles from './styles';
import useTransactions from '../../useTransactions';

const Details = ({title, subheader}) => {
    // We use useStyle hook for importing material-ui class
     const {total, chartData} =useTransactions(title);
    const classes =useStyles();


    return (
        // In th below statement for our income use income css class else expense
        <Card className={title === 'Income' ? classes.income : classes.expense}>
            <CardHeader title={title} subheader ={subheader}/>
                <CardContent>
                   <Typography varinat="h5">${total}</Typography>
                   {/* We will be adding data later */}
                   {/* console.log(chartData) */}
                   <Doughnut data={chartData} /> 
                </CardContent>
        </Card>
    );
}
export default Details;

Now, our App looks something like this

I have also added voice feature with local storage in it as well if you all want me to write an article on that part then please write in comments.
All the code is available here on github
And the app link
Github (leave a start ⭐)
Track_Your_Expenses

Thank You!!

Build Your Own API using node and express

Kirti — Sat, 25 Dec 2021 07:39:06 +0000

Hey everyone, I am here again with the new article in this we will be building our very own API using node and express. Let's start with the setup first in which we initialize our backend JavaScript application.

npm init -y

Now we do need to express well so let us install express as well.

npm install --save express

Now to use normal or new import statements go to package.json and make an entry as

 "name": "crud_api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module", // this line

Now, let's make an index.js, I have attached the code below explaining each line of it.

import express from "express";
// can also write const express = require ('express');
import bodyParser from "body-parser";
// bodyParser allows us to take incoming post request bodies
const app =express();
// Now our whole application lies in this little variable
const PORT = 4000;
// specifying port of our application , you can choose any port 
app.use(bodyParser.json)
//it says we are going to use json data in our body
app.listen(PORT, () =>console.log(`Server running on port: http://localhost:${PORT}`)); 
//To listen to this port and a callback function

For stopping the server use "Ctrl+C"
Wait.. but how can we see the changes🤔 because by this time we can only see the server running on the following port, or the things we console what about the changes done on the client-side. Nodemon is the solution let's quickly install Nodemon.

 npm install --save -dev nodemon

Now to run our Nodemon let's quickly set up the start scripts in package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon index.js"
  },

Yahaya!!😇 We are done with all the setup of our basic express server.
Now, let's just have a quick look at what some terms mean and do.

GET It finds all the users. example -> /user
POST Creates a user. example -> /user
GET Find user detail by id example-> /user/:id
DELETE** Deletes a user example-> **/user/:id
PATCH Updates a user example-> /user/:id

Let's start with our get operation first, Let's create a folder with name controllers and inside it a users.js file.

let users =[]; // an empty array that is the data 

// THIS IS GET OPERATION
//request and response are the parameters passed in this function
export const getUser=(req,res) =>{
// printing the users 
    console.log(`Users in database: ${users}`);
    res.send(users);// sending data from server to client 
}

Now, for the post-operation, one can note that we can have unique ids for each user as it would help us to delete and update the database in further command. so, let's just install a node package

npm i uuid

The post function

export const createUser = (req, res) => {   
    const user = req.body;
   //In the below statement we are spreding the already users object and adding id as well  
    users.push({...user, id: uuid()});
    console.log(`User [${user.username}] added to the database.`);
};

Now, let's see how to get a particular user from the database

//THIS IS GET A PARTICULAR USER WITH A ID
export const getUser = (req, res) => {
    res.send(req.params.id)
};

For deleting a particular users

// FOR deleting a particular user
export const deleteUser = (req, res) => { 
    console.log(`user with id ${req.params.id} has been deleted`);

    users = users.filter((user) => user.id !== req.params.id);
};

For updating a particular value of a user

//Update a particular user
export const updateUser =  (req,res) => {
    const user = users.find((user) => user.id === req.params.id);

    user.username = req.body.username;
    user.age = req.body.age;

    console.log(`username has been updated to ${req.body.username}.age has been updated to ${req.body.age}`)
};

Now, let's have a look at the routes where the above operations will be directed to.

import express from 'express';
import {createUser, getUsers, getUser, deleteUser, updateUser} from '../Controllers/users.js'

const router = express.Router();

router.get('/',getUsers);
router.post('/',createUser);
router.get('/:id',getUser);
router.delete('/:id',deleteUser);
router.patch('/:id',updateUser);

export default router;

index.js

import express from "express";
//  can also write const express = require ('express');
import bodyParser from "body-parser";
// bodyParser allows us to take incoming post request bodies
import usersRoutes from "./routes/routes.js"
const app =express();
// Now our whole appliaction lies in this little variable
const PORT = 5000;
// specifying port of our aplication , you can choose any port 
app.use(bodyParser.json)
//it says we are going to use json data in our body
app.use("/users", usersRoutes);

app.get("/", (req, res) => res.send("Welcome to the Users API!"));

app.all("*", (req, res) =>res.send("You've tried reaching a route that doesn't exist."));

app.listen(PORT, () =>console.log(`Server running on port: http://localhost:${PORT}`)); 
//To listen to this port and a callback function

YAYAA!!! we created our API with crud functionality, for testing you can use POSTMAN which is free will attach the link below for the same with the GitHub link 😄😄.
GitHub
Postman

PAGINATION using react/Paginate

Kirti — Thu, 16 Dec 2021 17:15:05 +0000

Hello everyone, let's build a new feature with this article (i.e. pagination) many of you are already aware and have seen this feature in many websites with lots of data so here let's build one for our application as a beginner.
let's first install the library.
if you use npm

npm install react-paginate

if you use yarn

yarn add react-paginate

In this article, our main aim is to work on the logic and implementation of pagination so let's just import fake data to display on different pages. I have used Fake-data to create fake data just for testing our pagination feature you can do the same.
Our code and website before pagination feature.

import react, {useState} from 'react';
import fakedata from "./Fake_data.json"
import './App.css';

function App() {

  const [data, setData] =useState(fakedata.slice(0,50));
  return (
    <>
     <div className="header"> <h2>WELCOME TO FAKEDATA WORLD</h2></div>
    <div className="App">
    { data.map((x)=>{
      return(
        <div className="card">
          <h3>{x.FullName}</h3>
          <h3>{x.CompanyName}</h3>
          <h3>{x.URL}</h3>
          </div>
      );
    })
    }    
    </div>
    </>
  );
}

export default App;

.header
{
  color: black;
  text-align: center;
  cursor: pointer;
  font-style: italic;
  font-family: fantasy;
  background: blueviolet;
}

.App{
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  color: grey;
  background-color: pink;
}

.card{

    border: 2px solid grey;
    border-radius: 10px;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 300px;
    height: 300px;
    margin: 20px;
}

Can you see the length of the scroll bar isn't it too long and not at all user-friendly, making the site slow as well as all the data will be loaded at once
okay, let's decide first how many blocks per page we should be displaying
then we will go to the second step that would be the number of pages visited till now which can be easily calculated by the number of blocks we have on one page multiplied by the current page number.
Our next step should be to make a function for displaying blocks and we slice blocks per page where we map the blocks by slicing it into a range from page visited + blocks per page to get an idea like it's is in a group of let's say (1-6) at first then (6-12) and so on.
Now, we call the function in our render part with paginate component of react-pagination library, we do need previous and next button with the page count where it would be the number of pages in total that would be present in the website we would be using simple math for calculating it(i.e Number of blocks divided by Number of blocks to be fetched per page).
Yes, it is that simple to add a pagination feature I have attached the code also
I have attached the code for the same and did change the CSS also I have also attached the GitHub repo for this as well.

import react, {useState} from 'react';
import Paginate from 'react-paginate';
import fakedata from "./Fake_data.json"
import './App.css';

// let's make a funtion for diaplaying data
function App() {

  const [data, setData] =useState(fakedata.slice(0,40));
  const [pageNumber, setPageNumber] =useState(0);
  const dataPerPage =6;
  const pageVisited = pageNumber * dataPerPage;

  // making function for fetching data
  const fetchData = data.slice(pageVisited, pageVisited + dataPerPage).map((x)=>{
    return(
      <div className="card">
        <h3>{x.FullName}</h3>
        <h3>{x.CompanyName}</h3>
        <h3>{x.URL}</h3>
        </div>
    );
  })
// we are using ceil function here because if it not proper divisible value then we need an extra page for
// the remainder
const pageCount = Math.ceil(data.length/dataPerPage)

// function for page change set the page we are currently on
const changePage = ({selected}) => {
  setPageNumber(selected);
}
  return (
    <>
     <div className="header"> <h2>WELCOME TO FAKEDATA WORLD</h2></div>
    <div className="App">
      {fetchData}
      <Paginate
      previousLabel ={"Prev"}
      afterLabel ={"After"}
      pageCount ={pageCount}
      onPageChange={changePage}
      containerClassName={"paginationBttns"}
      previousLinkClassName={"previousBttn"}
      nextLinkClassName={"nextBttn"}
      disabledClassName={"paginationDisabled"}
      activeClassName={"paginationActive"}

      />
    </div>
    </>
  );
}

export default App;

It's CSS code

.header
{
  color: black;
  text-align: center;
  cursor: pointer;
  font-style: italic;
  font-family:cursive;
}

.App{
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  color: grey;
  background-color: black;
}

.card{

    border: 2px solid grey;
    border-radius: 10px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: cursive;
    width: 300px;
    height: 300px;
    margin: 20px;
}
.paginationBttns {
  width: 80%;
  height: 40px;
  list-style: none;
  display: flex;
  justify-content: center;
}

.paginationBttns a {
  padding: 10px;
  margin: 6px;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: 2px solid grey;
  display: inline-block;
  color: black;
  cursor: pointer;
  background-color: white;
  text-align: center;
}

.paginationBttns a:hover {
  color: white;
  background-color: grey;
}

.paginationActive a {
  color: white;
  background-color: blue;
}

.paginationDisabled a {
  color: pink;
  background-color: pink;
}

Thank for reading :) will keep posting my new learnings!
Github

CRUD operation on Firebase Realtime database

Kirti — Tue, 07 Dec 2021 06:18:35 +0000

Hey! developers let's develop a basic MyAnimeList in which we will be working on building react app as frontend and for database, we would be using firebase and in this article, we will see how to perform basic crud operation on real-time database.
STEP-1
Let's create a react app
In your cmd write

npx create-react-app MyAnimeList
cd MyAnimeList
npm start

STEP-2
Let's set up a firebase for our MyAnimeList
a. Google search google firebase console and login with your Gmail account.
b. On the top right corner you will see go to console click on it and there you will see add project button click on add project.
c. Fill in the steps
i. Enter your project name(MyAnimeList)
ii. Toggle the button (off) google analytics for firebase
project.
iii. click on create project now.
Wow! you just created your project on firebase now let's add firebase to our web app.
Below the name of your web app, you will see a symbol "</>" click on it and add your app's name to it and click on Also set up Firebase Hosting for this app.
Now click on the register app.
You will get the firebase configuration here copy it we will use it later.

step -3
Install firebase for app

npm install firebase

Now create a file in your src and name it firebase.js
Now paste here the code that we copied above, and create a const variable to initialize firebase and after initializing export it.Code for the same is attached below.

import firebase from 'firebase/compat/app';
import 'firebase/compat/database';

var firebaseConfig = {
    apiKey: "AIzaSyDowJOJykSjXj5tbwybpinypYh7UGV9YGc",
    authDomain: "myanimelist-e637e.firebaseapp.com",
    databaseURL: "https://myanimelist-e637e-default-rtdb.firebaseio.com",
    projectId: "myanimelist-e637e",
    storageBucket: "myanimelist-e637e.appspot.com",
    messagingSenderId: "854247297412",
    appId: "1:854247297412:web:4c977510e0f36b54220dd1"
  };

const fireDb = firebase.initializeApp(firebaseConfig);
export default fireDb.database().ref();

Now, go to console and click on Realtime database and create database choose or leave the location as it and click on start in test mode and enable it.
yippee... we did all the setup part now let's move forward and create our app.
Let's start our app by building the navbar component.
Firstly we would need to install a react-router-dom library for routing it to multiple pages and we can achieve it with browser stack, switch, and route. I also installed toastify for styling.
In app.js
In the navbar, we have a logo at the left and in right we have pages
before jumping it here do create a separate folder named pages and create all the .js files for the pages on which we will be working later and import it here in the app.js.

import React from "react"
import './App.css';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import About from './pages/About';
import Add from './pages/Add';
import Home from './pages/Home';
import View from './pages/View';
import Navbar from "./Components/Navbar";
import "react-toastify/dist/ReactToastify.css";
import { ToastContainer } from "react-toastify";
function App() {
  return (
    <BrowserRouter>

      <div className="App">
        {/* calling our navbar component where actual logic is there */}
      <Navbar/>
        <ToastContainer position="top-center" />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/add" component={Add} />
           {/* We need an id of the particluar anime which we want to update  and view */}
          <Route path="/update/:id" component={Add} />
          <Route path="/view/:id" component={View} />
          <Route path="/about" component={About} />
        </Switch>
      </div>
    </BrowserRouter>
  );
}
export default App;

Now let's work on our navbar component which we imported in our app.js here we are going to use react-hooks like useState and useEffect. We also need link and useLocation from react-router-dom we are using useLocation because we want to highlight that tab of navbar which we are currently on even if visit different pages with our URL.
I have added a proper explanation of each line of the code in the code itself.

import React, { useEffect, useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import "./Navbar.css";

const Navbar = () => {
    const [activeTab, setActiveTab] = useState("Home");
     //it gives the location that where we are currently
    const location = useLocation();
   // a useeffect hook to active the tab of particular pathname
    useEffect(() => {
        if (location.pathname === '/')
            setActiveTab("Home")
        else if (location.pathname === '/add')
            setActiveTab("Add")
        else if (location.pathname === '/about')
            setActiveTab("About")
    }, [location]); // we passed location here because we want this hook to work only if there is change in location

    return (
        <div className="header">
            <p className="logo">Otaku</p>
            <div className="header-right">
                <Link to="/">
                    <p className={`${activeTab === "Home" ? "active" : ""}`}
                        onClick={() => setActiveTab("Home")}
                    >
                        Home
                    </p>
                </Link>

                <Link to="/add">
                    <p className={`${activeTab === "Add" ? "active" : ""}`}
                        onClick={() => setActiveTab("Add")}
                    >
                        Add
                    </p>
                </Link>

                <Link to="/about">
                    <p className={`${activeTab === "About" ? "active" : ""}`}
                        onClick={() => setActiveTab("About")}
                    >
                        About
                    </p>
                </Link>
            </div>
        </div>
    );
};

export default Navbar;

Now some styling of Navbar just copy-paste the CSS file or design it in your way not a big fan of CSS!!

.header
{
    overflow: hidden;
    background: linear-gradient(to bottom, black 0%, #497BE8 35%, grey 55%);
}
.header p{
    float: left;
    color: black;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    font-size: 18px;
    line-height: 5px;
    font-weight: bold;
    font-family: cursive;
    border-radius: 2px;
}
.header p.logo
{
    font-size: 25px;
    font-weight: bold;
    color: black;
    font-family: cursive;
}
.header p:hover{
    background-color: black;
    color: grey;
}

.header p.active{
    background-color: indigo;
    color: pink;
}

.header-right
{
    float: right;
}

@media screen and (max-width: 500px)
{
    .header p {
        float: none;
        display: block;
        text-align: left;
    }

    .header-right {
        float: none;
    }
}

Yippeee done with navbar!!
Now let's Move to our next part where we will be creating Add page in which we will be taking users input and pushing it into the database. I Have added the explanation of the lines wherever needed and have also validated the form as you cannot submit empty form.

import React, { useState, useEffect } from 'react';
import fireDb from '../firebase';
import { toast } from 'react-toastify';
import { useHistory } from 'react-router';
import "./Add.css"

const intialstate = {
    name: "",
    genre: "",
    myPersonalRating: ""
}

const Add = () => {
    const [state, setState] = useState(intialstate);
    const { name, genre, myPersonalRating } = state;

    const history = useHistory();

    const handleInputChange = (e) => {
        const { name, value } = e.target;
        setState({ ...state, [name]: value });
    };
    // here is handlesubmit function where an event is passed
    const handleSubmit = (e) => {
        e.preventDefault();
        // validating if any of the fields is emepty than show an error with the use of toastify
        if (!name || !genre || !myPersonalRating) {
            toast.error("All Fields are mandatory")
        }
        else {
            // imp part to push the values in the database with checking the error also if not than display success
            fireDb.child("Anime").push(state, (err) => {
                if (err) {
                    toast.error(err);
                }
                else {
                    toast.success("Added Successfully")
                }
            });
            // here we are adding a delay of 5 sec and than redirectig it to home page after adding 
            setTimeout(() => history.push("/"), 500);
        }
    };
   // below is the form implementation of the three input fields which we are asking from the user
    return (
        <div style={{ marginTop: "100px" }}>
            <form style={{ margin: "auto", padding: "15px", maxWidth: "400px", alignContent: "center" ,
            color: "brown"}}
                onSubmit={handleSubmit}> 
                <label htmlFor="name">Anime Name</label>
                <input type="text" id="name"
                    name="name"
                    placeholder="Anime Name"
                    value={name}
                    onChange={handleInputChange} />

                <label htmlFor="genre">Genre</label>
                <input type="text" id="genre"
                    name="genre"
                    placeholder="Anime genre"
                    value={genre}
                    onChange={handleInputChange} />

                <label htmlFor="MyPersonalRating">MyPersonalRating</label>
                <input type="number" id="myPersonalRating"
                    name="myPersonalRating"
                    placeholder="Rate It"
                    value={myPersonalRating}
                    onChange={handleInputChange} />

                <input type="submit" value='save'  />
            </form>
        </div>
    )
}
export default Add

It's CSS code

input[type="text"],
input[type="email"],
input[type="number"],
select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
    font-family: fantasy;
    box-sizing: border-box;
    border-radius: 6px;
}
 input[type="submit"] {
     width: 100%;
     background-color: darkgreen;
     color: white;
     padding: 14px 20px;
     margin: 8px 0;
     border: none;
     border-radius: 4px;
     cursor: pointer;
 }
input[type="submit"]:hover {
    background-color: darkgreen;
}

Done with adding it into the database now let's display it in tabular form on our home page.

import { useEffect, useState } from "react"
import { Link } from "react-router-dom";
import { toast } from "react-toastify";
import fireDb from '../firebase';
import "./Home.css";

const Home = () => {

    const [data, setData] = useState({});

    const onDelete = (id) =>{
        if(window.confirm("Are you sure you want to delete it ?"))
        {
            fireDb.child(`Anime/${id}`).remove((err) =>{
                if(err)
                {
                    toast.error(err);
                }
                else 
                {
                    toast.success("deleting from the database");
                }
            })
        }
    }

    useEffect(() => {
        fireDb.child("Anime").on("value",(snapshot) => {
            if(snapshot.val() !== null)
            {
                setData({...snapshot.val()});
            }
            else
            {
                setData({});
            }
        });
        return () => {
            setData({});
        };
    },[]);

    return (
        <div style={{ marginTop: "100px"}}>
            <table className="styled-table">
                <thead>
                    <tr>
                        <th style={{ textAlign: "center" }}> No</th>
                        <th style={{ textAlign: "center" }}> Name</th>
                        <th style={{ textAlign: "center" }}> Genere</th>
                        <th style={{ textAlign: "center" }}> MyPersonalRating</th>
                        <th style={{ textAlign: "center" }}> Action</th>
                    </tr>
                </thead>
                <tbody>
                    {/* maping the objects we have in database */}
                    {
                        Object.keys(data).map((id, index) => {
                            return (
                                    <tr key={id}>
                                        <th scope="row">
                                            {index+1}
                                        </th>
                                        <td>{data[id].name}</td>
                                        <td>{data[id].genre}</td>
                                        <td>{data[id].myPersonalRating}</td>
                                        <td>
                                            <Link to ={`/update/${id}`}>
                                                <button className="btn btn-edit">Edit</button>
                                            </Link>
                                                <button className="btn btn-delete" onClick={()=> onDelete(id)}>Delete</button>

                                            <Link to ={`/view/${id}`}>
                                                <button className="btn btn-view">View</button>
                                            </Link>
                                            </td>
                                    </tr>
                            );
                        }
                        )
                    }
                </tbody>
            </table>

        </div>
    )
}
export default Home;

It's CSS file

.styled-table{
    border-collapse:collapse;
    margin: auto;
    font-size: 0.9em;
    font-family: sans-serif;
    max-width: 800px;
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
    align-content: center;
}

.styled-table thead tr {
    background-color: darkslategray;
    color: deepskyblue;
    text-align: left;
}

.styled-table th,
.styled-table td{
    padding: 12px 15px;
}

.styled-table tbody tr {
    border-bottom: 1px solid #dddd;
}

.styled-table tbody tr:nth-of-type(even)
{
    background-color: dimgrey;
}

.styled-table tbody tr:last-of-type{
    border-bottom: 2px solid #009879;
}

.btn {
    border: none;
    color: white;
    padding: 5px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 5px;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.btn-edit{
    background-color: yellow;
}

.btn-delete{
    background-color: red;
}

.btn-view{
    background-color: green;
}

Now we will add the working to edit button on the home page. Let's perform an update operation on the real-time database in this we need an id for updating the particular record. Below is the implementation with the comments

import React, { useState, useEffect } from 'react';
import fireDb from '../firebase';
import { toast } from 'react-toastify';
import { useHistory, useParams } from 'react-router';
import "./Add.css"

const intialstate = {
    name: "",
    genre: "",
    myPersonalRating: ""
}

const Add = () => {
    const [state, setState] = useState(intialstate);
    const [data, setData] =useState({});
    const { name, genre, myPersonalRating } = state;

    const {id} =useParams();
    // STEP -1 FIRST LETS POPULATE THE FORM IF DATA IS AVAILABLE and only if id is also there
    useEffect(() => {
      fireDb.child("Anime").on("value",(snapshot) =>
      {
          if(snapshot.val()!==null)
          {
              setData({...snapshot.val()});
          }
          else 
          {
              setData({});
          }
      });
      // CLEANUP
      return () => {
          setData({});
      };
    },[id]);

    useEffect(() => {
        if(id)
        {
           setState({...data[id]});
        }
        else 
        {
            setState({...intialstate});
        }
        return () =>{
            setState({...intialstate});
        };
    },[id,data]);

    const history = useHistory();

    const handleInputChange = (e) => {
        const { name, value } = e.target;
        setState({ ...state, [name]: value });
    };
    // here is handlesubmit function where an event is passed
    const handleSubmit = (e) => {
        e.preventDefault();
        // validating if any of the fields is emepty than show an error with the use of toastify
        if (!name || !genre || !myPersonalRating) {
            toast.error("All Fields are mandatory")
        }
        else {
            // imp part to push the values in the database with checking the error also if not than display success
            if(!id)
            {
                fireDb.child("Anime").push(state, (err) => {
                    if (err) {
                        toast.error(err);
                    }
                    else {
                        toast.success("Added Successfully")
                    }
                });
            }
            // if already exsists and we want to modify it 
            else 
            {
                fireDb.child(`Anime/${id}`).set(state, (err) =>{
                   if(err){
                       toast.error(err);
                   }
                   else 
                   {
                       toast.success("Updated Successfully")
                   }
                }
                )
            }


            // here we are adding a delay of 3 sec and than redirectig it to home page after adding 
            setTimeout(() => history.push("/"), 300);
        }
    };
   // below is the form implementation of the three input fields which we are asking from the user
    return (
        <div style={{ marginTop: "100px" }}>
            <form style={{ margin: "auto", padding: "15px", maxWidth: "400px", alignContent: "center" ,
            color: "brown"}}
                onSubmit={handleSubmit}> 
                <label htmlFor="name">Anime Name</label>
                <input type="text" id="name"
                    name="name"
                    placeholder="Anime Name"
                    value={name || ""}      // value can be empty or already there
                    onChange={handleInputChange} />

                <label htmlFor="genre">Genre</label>
                <input type="text" id="genre"
                    name="genre"
                    placeholder="Anime genre"
                    value={genre || ""}
                    onChange={handleInputChange} />

                <label htmlFor="MyPersonalRating">MyPersonalRating</label>
                <input type="number" id="myPersonalRating"
                    name="myPersonalRating"
                    placeholder="Rate It"
                    value={myPersonalRating || ""}
                    onChange={handleInputChange} />
                {/* If id is there than upadte otherwise save */}
                <input type="submit" value={id ? "update":"save"}/>  
            </form>
        </div>
    )
}

export default Add

Now the last part adds functionality to our view button In this, we will be displaying particular anime details on a separate page.

import React, { useEffect, useState } from 'react'
import fireDb from '../firebase';
import { Link } from "react-router-dom";
import { useParams } from 'react-router';
import './View.css'
const View = () => {

    const [anime,setAnime] = useState({});
    const {id} = useParams();
    useEffect(() => {
        fireDb.child(`Anime/${id}`).get().then((snapshot) => {
            if(snapshot.exists())
            {
                setAnime({...snapshot.val()});
            }
            else 
            {
                setAnime({});
            }
        });
    },[id]);
    console.log("anime",anime);
    return (
        <div style={{marginTop: "150px"}}>
            <div className="card">
                <div className="card-header">
                    <p>Anime Detail</p>
                    </div>
                    <div className="container">
                        <strong>ID: </strong>
                        <span>{id}</span>
                        <br/>
                        <br/>

                        <strong>Anime_Name: </strong>
                        <span>{anime.name}</span>
                        <br/>
                        <br/>

                        <strong>Anime_Genre: </strong>
                        <span>{anime.genre}</span>
                        <br/>
                        <br/>

                        <strong>My_Personal_Rating: </strong>
                        <span>{anime.myPersonalRating}</span>
                        <br/>
                        <br/>
                      <Link to="/">
                          <button className="btn btn-edit"> Head to Home</button>
                      </Link>
                    </div>
              </div>
              </div>
    )
}

export default View

IT's CSS file

.card{
    width: 30%;
    display: flex;
    flex-direction: column;
    border: red solid;
    align-content: center;
    margin: 0 auto;
}

.card-header {
    height: 30%;
    background: black;
    color: grey;
    text-align: center;
}

.card-header p {
    font-size:20px;
}

.container {
    padding: 4px 16px;
}

Let's have a look at how our web app looks like, apologies for the bad styling in advance.

Thank you!
Github