React Marvel

React Marvel information portal - SPA with multiple pages structure.

In main page list of heroes with pagination and more information on clicking on the hero.
There's also a search a character by name hero.
There's also show random hero on click to button "Try it".

In the “Comics” section, a list of comics with pagination and inner pages with more information on selected comic.

All the data is taken in open Marvel Comics API in developer.marvel.com.

Demo

Features app

Functional components with react hooks.
States are stored in a separate component.

Used technologies

• React
  hooks: useState, useEffect, useCallback, useRef
  custom react hook: useHttp
• routing pages on react-router
• search form with Formik and Yup
• optimization with React.lazy
• SEO with react helmet (generation title page ande meta description)
• Pagination heroes and comics
• Spinners and skeletons
• react-transition-group for transition effects on elements
• Create React App
• DB in open Marvel Comics API in developer.marvel.com

How to use

1. git clone
2. npm i
3. npm start

How to deploy (to GitHub Pages)

1. npm run deploy