Pokemon

Clarisse Strijdom

21100249

DV200 - Term 1 | 2023

PokeWorld

PokeApi is a learning platform to learn us about the Pokemon world. It helps educate & learn the use of API.
more about website

· Report Bug · Request Feature

Table of Contents

• About the Project
  • Project Description
  • Built With
• Getting Started
  • Prerequisites
  • How to install
• Features and Functionality
• Concept Process
  • Ideation
  • Wireframes
  • Custom UI
• Development Process
  • Implementation Process
    • Highlights
    • Challenges
  • Future Implementation
• Final Outcome
  • Mockups
  • Video Demonstration
• Conclusion
• License
• Contact
• Acknowledgements

About the Project

Project Description

Add description here

Built With

• React
• Charts.js
• PokeApi

Getting Started

The following instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

Ensure that you have the latest version of NPM installed on your machine. The GitHub Desktop program will also be required.

How to install

Installation

Here are a couple of ways to clone this repo:

1. GitHub Desktop
   Enter https://github.com/CSWilder02/Final-project.git into the URL field and press the Clone button.

2. Clone Repository
   Run the following in the command-line to clone the project:

   git clone https://github.com/CSWilder02/Final-project.git

   Open Software and select File | Open... from the menu. Select cloned directory and press Open button

3. Install Dependencies
   Run the following in the command-line to install all the required dependencies:

   npx create-react-app my-app
   npm install react-chartjs-2 chart.js
   npm i bootstrap

4. An API key is not required

Features and Functionality

FIlter COmpare

Using a filter to select 2 of any pokemon character and seeing them compared with each other with their hp, attach strenght and more, through a bar chart and a pie chart.

Timeline

Using a filter to select a pokemon character and seeing through a timeline chart how they grow.

Concept Process

The Conceptual Process is the set of actions, activities and research that was done when starting this project.

Ideation

speak about planning.

Development Process

The Development Process is ....

Explain process

Implementation Process

• Utilized React Charts.JS dependency for Data visualization
• Implemented Routing with React-Router v6.
• API End Point: https://pokeapi.co/

Highlights

• Highlights was to see the end reult working
• Having the reults show after selecting the filter
• Learning how react works

Challenges

• Challenges I have faced was to fetch data from an API
• I have had some challenges setting up 2 filters that would show different data
• Seting up a timeline that would change when a diffrent pokemon is selected

Future Implementation

• In future I would like to work better on fixing the way my website front end looks like. Even if the back end work I would like to work on how my website display its visuals.

Final Outcome

Mockups

Video Demonstration

To see a run through of the application, click below:

View Demonstration

See the [open issues](https://github.com/CS Strijdom/Pokemon/issues) for a list of proposed features (and known issues).

Authors

• YourName - CS Strijdom

License

Distributed under the MIT License. See LICENSE for more information.\

Contact

• YourName - [email protected] - @instagram_handle
• Project Link - https://github.com/21100249_CS Strijdom/PokeWorld

Acknowledgements