PokeWorld

Topics -> ReactJS, HTML, CSS, Web development

Preview Link -> PokeWorld

Source Code Link -> GitHub

What We are going to do?

1. Fetch the data from the json
2. Displaying on the frontend using components with styling

Fetching the data

Create and write a service(PokemonServices.js) which extracts the pokemon object from the json.

import pokemon from './pokemon.json';

export default class PokemonServices{
    static getpokemons() {
        return pokemon ? pokemon : [];
    }
}

Components

Pokemons(Pokemons.js)

It will contain how the whole webpage look like. It contains the header, footer and main body containing the PokemonApp(fetching the data on request)

import React, { Component } from "react";
import PokemonServices from "../services/PokemonServices";
import PokemonList from "./PokemonList";

export default class Pokemons extends Component{
    constructor(props) {
        super(props);
        this.state={
            pokemons:[]
        };
    }

    componentDidMount() {
        this.setState(()=> ({pokemons:PokemonServices.getpokemons() }))
    }

    render() {
        return(
            
        )
    }
}
                        

PokemonApp(PokemonApp.js)

This component is responsible of fetching the data on load and passing it as a prop to PokemonList Component

import React, {Component} from "react";
import Header from './Header'
import Pokemons from "./Pokemons";

export default class PokemonApp extends Component {
    constructor(props) {
        super(props);
        this.state = {
            title: "Welcome to Pokemon World"
        };
    }

    render() {
        return(
            <div className="pokemon-web">
                <Header title={this.state.title}/>
                <Pokemons/>
                </div>
        )
    }
}

PokemonList(PokemonList.js)

The data fetched is unorgainsed, this component will orgainsed in a collection(list) of pokemon.

import React, {useEffect, useState} from "react";
import PokemonCard from "./PokemonCard";
import PropTypes from 'prop-types';
const postsPerPage=6;
let arrayForHoldingPosts = [];


const getPokemons = (pokemons) => {
    return(
        <div className="card-deck">
            {
                pokemons.map(pokemon => <PokemonCard key={pokemon.pokemon_id} pokemon={pokemon} />)
            }
        </div>
    )
};

const PokemonList = (props) => {
    const [postsToShow, setPostsToShow] = useState([]);
    const [next, setNext] = useState(3);
    const posts = props.pokemons;

    const loopWithSlice = (start, end) => {
        const slicedPosts = posts.slice(start, end);
        arrayForHoldingPosts = [...arrayForHoldingPosts, ...slicedPosts];
        setPostsToShow(arrayForHoldingPosts);
    };

    useEffect(() => {
        loopWithSlice(0, postsPerPage);
    }, []);

    const handleShowMorePosts = () => {
        loopWithSlice(next, next + postsPerPage);
        setNext(next + postsPerPage);
    };
    return(
        <div className="pokemon-list">
            <div className="pokemon-container">
            {
                getPokemons(arrayForHoldingPosts)
            }
            </div>
            <div>
                <button onClick={handleShowMorePosts} className="load-btn" id="next-btn">↓</button>
            </div>
        </div>

    )
};

PokemonList.defaultProps={
    pokemon:[]
}

PokemonList.propTypes={
    pokemon:PropTypes.array
}

export default PokemonList;
                        

PokemonCard(PokemonCard.js)

It contains the basic styling and structure of the pokemon card.

import React from "react";
import PropTypes from 'prop-types';
import '../styles/card.scss'

const PokemonCard = (props) => (
    <div className={ `pokemon-card ${props.pokemon.pokemon_tags[0]}` }>
        <img src={props.pokemon.pokemon_image_url} alt={props.pokemon.pokemon_name} />
        <div className="pokemon-card-body">
            <h4>{props.pokemon.pokemon_id}</h4>
            <h5 className="pokemon-card-title">{props.pokemon.pokemon_name}</h5>
            <p>{props.pokemon.pokemon_tags}</p>
            <a href={props.pokemon.pokemon_url} className="pokemon-card-btn">url</a>
        </div>
    </div>
);

PokemonCard.prototype = {
    pokemon:PropTypes.object
};

PokemonCard.defaultProps={
    pokemon:{}
};

export default PokemonCard;
                        

Fun Fact - Rhydon is the first Pokemon ever to be created

Add some stylings to make it look impressive.

Deployment

For deployment, We are using the GitHub Pages. For More Info

Web Preview / Output

Web preview on deployment

Placeholder text by Praveen Chaudhary · Images by Binary Beast