🔴 PokeApp — Pokédex Web Application

A full-stack Pokédex app built with a Laravel backend API and a Next.js frontend. Browse, search, and infinitely scroll through Pokémon pulled from the PokéAPI.

---

📸 Screenshots

Home Page (Top Section)

Scrolled View (Sticky Middle Section)

---

📁 Project Structure

PokeApp/
├── pokedex-api/        # Laravel backend
├── pokedex-frontend/   # Next.js frontend
├── ss/                 # Screenshots for README
└── README.md

---

⚙️ Prerequisites

Make sure you have the following installed before running the project:

Tool	Version	Download
PHP	8.1+	https://windows.php.net/download/
Composer	Latest	https://getcomposer.org/
Node.js & npm	18+	https://nodejs.org/
Git	Latest	https://git-scm.com/

---

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/DesmondJS/PokeApp.git
cd PokeApp

---

🐘 Backend Setup (Laravel)

2. Go into the backend folder

cd pokedex-api

3. Install PHP dependencies

composer install

4. Set up the API routes

If routes/api.php does not exist, run:

php artisan install:api

When asked about migrations, press yes.

5. Fix SSL certificate (Windows only)

If you are on Windows and get an SSL error when fetching from PokéAPI:

1. Download the CA cert file from: https://curl.se/ca/cacert.pem
2. Save it as cacert.pem inside C:\php\
3. Open C:\php\php.ini and update these two lines:

curl.cainfo = "C:\php\cacert.pem"
openssl.cafile = "C:\php\cacert.pem"

6. Start the Laravel server

php artisan serve

The API will be running at: http://localhost:8000

Test it by visiting: http://localhost:8000/api/pokemon?limit=9&offset=0

You should see Pokémon JSON data. ✅

---

🌐 Frontend Setup (Next.js)

Open a new terminal and keep Laravel running in the first one.

7. Go into the frontend folder

cd pokedex-frontend

8. Install Node dependencies

npm install

9. Start the development server

npm run dev

The frontend will be running at: http://localhost:3000 ✅

---

🔗 Running Both Together

Service	URL
Laravel API	http://localhost:8000
Next.js Frontend	http://localhost:3000

Make sure both are running at the same time. The frontend fetches data exclusively from the Laravel API.

---

📡 API Documentation

Base URL: http://localhost:8000/api

---

GET /pokemon

Fetch a paginated list of Pokémon or search by name.

Query Parameters

Parameter	Type	Required	Default	Description
limit	integer	No	20	Number of Pokémon to return
offset	integer	No	0	Number of Pokémon to skip (for pagination)
search	string	No	—	Search Pokémon by exact name

---

Example 1 — Get first 9 Pokémon

Request:

GET /api/pokemon?limit=9&offset=0

Response:

{
  "count": 1302,
  "results": [
    {
      "name": "bulbasaur",
      "id": 1,
      "sprite": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png",
      "types": ["grass", "poison"]
    },
    {
      "name": "ivysaur",
      "id": 2,
      "sprite": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/2.png",
      "types": ["grass", "poison"]
    }
  ]
}

---

Example 2 — Load next page (offset pagination)

Request:

GET /api/pokemon?limit=9&offset=9

Returns Pokémon 10–18.

---

Example 3 — Search by name

Request:

GET /api/pokemon?search=charizard

Response:

{
  "count": 1,
  "results": [
    {
      "name": "charizard",
      "id": 6,
      "sprite": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/6.png",
      "types": ["fire", "flying"]
    }
  ]
}

---

Error Response (Pokémon not found)

Request:

GET /api/pokemon?search=unknownpokemon

Response:

{
  "count": 0,
  "results": []
}

---

Response Fields

Field	Type	Description
count	integer	Total number of Pokémon available
results	array	List of Pokémon objects
results[].name	string	Pokémon name (lowercase)
results[].id	integer	Pokémon national Pokédex ID
results[].sprite	string	URL to the Pokémon's front sprite image
results[].types	array of strings	List of the Pokémon's types (e.g. ["fire", "flying"])

---

🛠️ Built With

• Laravel 11 — PHP backend framework
• Next.js 14 — React frontend framework
• PokéAPI — Source of all Pokémon data
• Tailwind CSS — Utility-first CSS

---