Gotta fetch 'em all!

Embark on a Pokémon adventure!

🌟 Explore locations, battle wild Pokémon, and grow your collection. 🌟

🏆 Can you become the ultimate Pokémon Trainer? 🏆
Explore the docs »

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Contributing
5. Contact
6. Acknowledgments

---

About The Project

Gotta Fetch ’Em All! is a fun Pokémon-style web game built with React and JavaScript.

Start your journey on a map, choose locations to explore, and face wild Pokémon waiting to challenge you! 🗺️

Pick one of your Pokémon to battle, strategize your attacks, and watch the enemy’s HP bar shrink. ⚔️
If you win, the defeated Pokémon joins your collection and can fight alongside you in future battles. 🏆

Do you have what it takes to catch ’em all and become the ultimate Pokémon Trainer? 🌟

(back to top)

Built With

We built this adventure with some trusty tools to help you on your Pokémon journey! 🛠️

Frontend

• 
• 
• 
• 

Routing

• 

Tooling

• 

APIs

• 

(back to top)

---

Getting Started

These instructions will help you set up and run the project locally on your machine.

Prerequisites

Before you begin, make sure you have the following installed:

• Node.js (version 18 or later recommended)
  You can download it from: https://nodejs.org/

• Git (to clone the repository)

• A modern web browser (e.g. Chrome, Firefox, Edge)

You can check if Node.js is installed by running:

node -v
npm -v

Installation

Follow these steps to run the project locally:

1. Clone the repository

   git clone https://github.com/CodecoolGlobal/gotta-fetch-em-all-react-Smonk12.git 
   cd gotta-fetch-em-all-react-Smonk12
   cd fetch-em-all-files

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open the app in your browser

   After running the command above, Vite will show a local address in the terminal, usually:

   http://localhost:5173
   

Open this link in your browser to see the app running.

💡 Tip:

If you get errors during npm install or npm run dev, make sure that:

• You are in the correct project folder (the one that contains package.json)
• Your Node.js version is up to date (node -v)
• You try deleting the node_modules folder and running npm install again

(back to top)

Usage 🎮

Welcome, Trainer! Your Pokémon adventure awaits. 🌟

How to Play

1. Start your journey on the map 🗺️

   Choose a location and explore its areas.

   Each location has its own wild Pokémon ready to challenge you!

2. Choose your Pokémon 🐾

   After selecting a location, you’ll face an enemy Pokémon.

   Pick one of your already caught Pokémon to battle with.

3. Battle time ⚔️

   On the battle screen, you have three options:

   • Fight → attack the enemy! Their HP goes down… but watch out, they hit back! 💥
   • Select → change your Pokémon if the fight isn’t going your way. 🔄
   • Run → escape back to the map and live to fight another day. 🏃‍♂️

   Keep an eye on the HP bars!

   If your Pokémon faints, you lose the fight and must face that Pokémon again to try catching it.

4. Catch ’em all! 🏆

   Defeat the enemy Pokémon, and it’s yours! Add it to your collection and bring it into future battles.

Goal 🎯

Explore, battle, and grow your Pokémon collection.

Can you catch them all and become the ultimate Trainer?

(back to top)

Trainers 👥

These Trainers helped shape the adventure!

Contact

Bácsik Szabolcs - bacsikszabi@gmail.com

Project Link: https://github.com/CodecoolGlobal/gotta-fetch-em-all-react-Smonk12

(back to top)

Acknowledgments

• React – The JavaScript library powering the UI and game interactions.
• React Router – Handles navigation between map, selection, and battle screens.
• Vite – Super fast development server and build tool.
• PokéAPI – Provides all Pokémon data, including names, sprites, and stats.
• MDN Web Docs – Reference for JavaScript, HTML, and CSS basics.
• Img Shields – Creates the colorful badges you see in this README.
• GitHub Markdown Cheatsheet – Makes writing this README easier.
• Pokémon International Logo – Logo used in the project header.

(back to top)