X-Men Files

X-Men Files is a React application that fetches superhero data and displays X-Men characters in a Marvel comic-book style interface.

Features

• Fetches X-Men character data from an API

• Displays:

  • Alias
  • Real Name
  • Team
  • Powers & Stats (combined UI section)
  • Description

• Random mutant generator button

• Loading and error handling

• Comic-book themed UI with animations

Tech Stack

• React
• Vite
• JavaScript
• CSS

API Used

https://akabab.github.io/superhero-api/api/all.json

How to Run

npm install
npm run dev

Challenges

• X-Men APIs were unreliable → switched to superhero API
• Images were missing → implemented fallback system
• Combined powers + stats into a better UI layout

What I Learned

• Fetching API data using useEffect
• Managing state with useState
• Handling broken or missing API data
• Designing UI from raw JSON data

Future Improvements

• Search/filter mutants
• Add animations per character
• Sound effects / comic transitions