MarvelHeroes icon indicating copy to clipboard operation
MarvelHeroes copied to clipboard

Web app that displays characters from Marvel comics

Marvel Heroes

Node.js CI Codecov Code Climate Maintainability Code Climate Test Coverage Prettier Airbnb Code Style

http://marvelheroes.s3-website.eu-west-3.amazonaws.com/ [1]

React app that displays the Marvel characters thanks to https://developer.marvel.com/

  • Supports IE 11 (broken display but "works")
  • W3C validator completed

I use this app as a boilerplate and to demo JS web app best practices.

1. No HTTPS, no gzip, no cache...

HeroesPagination/Heroes component screenshot

HeroesPagination/Heroes component screenshot

Hero component screenshot

Hero component screenshot

How to run

npm run start
open http://localhost:8080

Libraries used

  • React with hooks
  • No Redux, just useState()
  • TypeScript with strict: true
  • Babel with @babel/preset-typescript
  • Jest + react-testing-library + Playwright => 100% code coverage
  • Fetch API + whatwg-fetch polyfill
  • React Router
  • Prettier + ESLint + stylelint
  • Bootstrap 5 + Purgecss