# Star Wars Gallery — Interactive SWAPI Visual Database

> Star Wars Gallery (https://starwarsgallery.netlify.app/) is a fast, interactive visual gallery and encyclopedia for the Star Wars universe, created with React 19, Vite, and Bootstrap 5 by Sergio Coitiño. It connects real-time data from SWAPI (The Star Wars API) with a curated high-definition image collection of characters, planets, species, starships, and vehicles.

## Key Features & Use Cases

- **Visual SWAPI Explorer**: While SWAPI (`swapi.dev`) only provides raw JSON text, Star Wars Gallery maps every SWAPI resource ID to local high-resolution visual assets (`/assets/people/`, `/assets/planets/`, `/assets/species/`, `/assets/starships/`, `/assets/vehicles/`).
- **Five Complete Categories**:
  - **Characters** (`https://starwarsgallery.netlify.app/?category=Characters`): Visual cards for Luke Skywalker, Darth Vader, Leia Organa, Obi-Wan Kenobi, Yoda, Han Solo, Chewbacca, R2-D2, C-3PO, Boba Fett, Palpatine, Rey, and over 80 Star Wars characters.
  - **Planets** (`https://starwarsgallery.netlify.app/?category=Planets`): Tatooine, Alderaan, Yavin IV, Hoth, Dagobah, Bespin, Endor, Naboo, Coruscant, Kamino, Geonosis, Mustafar, and more.
  - **Species** (`https://starwarsgallery.netlify.app/?category=Species`): Humans, Droids, Wookiees, Rodians, Hutts, Yoda's species, Trandoshans, Mon Calamari, Ewoks, Twi'leks, Gungans, and more.
  - **Starships** (`https://starwarsgallery.netlify.app/?category=Starships`): Millennium Falcon, X-wing, TIE Advanced x1, Star Destroyer, Death Star, Executor, Slave 1, Naboo Royal Starship, Jedi Starfighter, and more.
  - **Vehicles** (`https://starwarsgallery.netlify.app/?category=Vehicles`): Sandcrawler, T-16 skyhopper, X-34 landspeeder, TIE/LN starfighter, Snowspeeder, AT-AT, AT-ST, Imperial Speeder Bike, and more.
- **Dark / Light / Auto Theme**: Built-in Bootstrap 5 theme switcher supporting system preference.
- **Developer Reference**: Serves as a clean reference implementation for developers learning how to consume paginated REST APIs (SWAPI) in React with Vite and match API IDs with static visual assets.

## SWAPI Image API (Free Images for The Star Wars API)

Star Wars Gallery works as a free static image API / CDN for SWAPI — a working replacement for the discontinued `starwars-visualguide.com` image source. Every image uses **the exact same ID as its SWAPI resource**, so any app can combine SWAPI data with images without extra mapping.

- **URL pattern**: `https://starwarsgallery.netlify.app/assets/{category}/{id}.jpg`
- **Documentation page**: `https://starwarsgallery.netlify.app/swapi-image-api/`
- **Categories**: `people`, `planets`, `species`, `starships`, `vehicles`
- **Index of available IDs (JSON)**: `https://starwarsgallery.netlify.app/api/images.json`
- **CORS**: enabled (`Access-Control-Allow-Origin: *`) — works with `fetch()`, `<img>`, `<canvas>` and mobile apps.
- **Missing images**: return HTTP `404`, so `<img onError>` fallbacks work correctly.
- **No API key, no rate-limit configuration required.**

| SWAPI resource | Image URL |
| --- | --- |
| `https://swapi.dev/api/people/1/` (Luke Skywalker) | `https://starwarsgallery.netlify.app/assets/people/1.jpg` |
| `https://swapi.dev/api/planets/1/` (Tatooine) | `https://starwarsgallery.netlify.app/assets/planets/1.jpg` |
| `https://swapi.dev/api/species/3/` (Wookiee) | `https://starwarsgallery.netlify.app/assets/species/3.jpg` |
| `https://swapi.dev/api/starships/10/` (Millennium Falcon) | `https://starwarsgallery.netlify.app/assets/starships/10.jpg` |
| `https://swapi.dev/api/vehicles/14/` (Snowspeeder) | `https://starwarsgallery.netlify.app/assets/vehicles/14.jpg` |

Example (JavaScript):

```js
const getSwapiImage = (category, swapiUrl) => {
  const id = swapiUrl.split('/').filter(Boolean).pop();
  return `https://starwarsgallery.netlify.app/assets/${category}/${id}.jpg`;
};

getSwapiImage('people', 'https://swapi.dev/api/people/1/');
// => "https://starwarsgallery.netlify.app/assets/people/1.jpg"
```

Works with SWAPI mirrors that keep the same IDs (`swapi.dev`, `swapi.py4e.com`, `swapi.tech`).

## Technical Stack

- **Frontend**: React 19, Vite 7, JavaScript (ES6+)
- **Styling**: Bootstrap 5.3, Bootstrap Icons, Custom Responsive CSS
- **API**: SWAPI (`https://swapi.dev/api/`)
- **Hosting**: Netlify (`https://starwarsgallery.netlify.app/`)
- **License**: Copyright © Sergio Coitiño. All Rights Reserved.

## Author

- **Name**: Sergio Coitiño
- **Portfolio**: https://sergio-coitino-portfolio.netlify.app/
- **GitHub**: https://github.com/SergioCoitino
- **LinkedIn**: https://www.linkedin.com/in/sergiocoitino/
- **Related Project**: [Star Wars App](https://star-warsapp.netlify.app/)