This repository contains the front-end part of a Pokemon Fight application, created for a WBS Coding School assignment.
In the specific doc architecture.md is the information about the overall structure, views and components.
The app uses react-router-dom to set the different routes of the page, which contains the three following routes:
| Route | Description |
|---|---|
| / | Directs the user onto the landing page. |
| /pokemon | Directs the user onto the main page with all the fetched pokemon data and possible user interaction |
| /pokemon/:id | Directs the user to the specificly chosen pokemon and displays the PokemonDetailed component with information. |
The back-end part of this project has got its own GitHub reposetory. It retrieves its data from a MongoDB database by using mongoose.js. The back-end app is deployed on Heroku.
The app uses Axios requests to fetch data from the back-end part. Its endpoints and specificly fetched data are:
| HTTP Method | Endpoint | Description |
|---|---|---|
| GET | /pokemon | Retrieves all pokemon |
| GET | /pokemon/:id | Retrieves pokemon with id 1 |
| GET | /pokemon/:id/:info | Retrieves specific info (type, name or type) from pokemon with id 1 |
| GET | /pokemon/fight/halloffame | Retrieves top 10 pokemon from hall of fame |
| GET | /pokemon/fight/halloffame?limit=n | Retrieves n pokemon from hall of fame |
| POST | /pokemon/fight/create | Saves a fight result. Request body must contain a JSON object with format: {"pokemon1": id, "pokemon2": id, "winner:" id } |
The front-end application is hosted on Netlfiy.
This project has been developed using NodeJS and React.js. Some of our components have been programmed with Material UI. Its already predefined components made it possible to design the app more time efficient.
- Prettier: install Prettier for your code editor. Prettier can run 'on file save', so that you don't need to run it manually. Look for instructions on how to set it up in your code editor, if needed.