Skip to content

Web app that displays characters from Marvel comics

License

Notifications You must be signed in to change notification settings

tkrotoff/MarvelHeroes

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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]

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

  • 2 pages: list of heroes + details of a hero
  • Implementation is 400 LOC (+ 700 LOC of tests)
  • Unit/integration tests written in react-testing-library & Jest
  • E2E tests written in Playwright
  • W3C validator completed

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

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

List of heroes: HeroesPagination/Heroes component screenshot

HeroesPagination/Heroes component screenshot

Details of a hero: Hero component screenshot

Hero component screenshot

How to run

npm run start:stubs
open http://localhost:8080
npm run start:marvel.com
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
  • React Router
  • Prettier + ESLint + stylelint
  • Bootstrap 5 + Purgecss
  • Google Lighthouse