Marvel API test App

Marvel Info Portal

Marvel Info Portal app uses official Marvel Developer API. Can be used to gather info about Marvel comics and characters.

Built on React, React Router, Redux Toolkit Query & more. Not adapted for mobile devices and smaller widths.

Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author
• Acknowledgments

Overview

My goals

• Make it possible to search characters, read information about them and comics with them
• Smooth transitions, list animations
• Keyboard accesibility, focus & hover states
• Error boundaries

Links

• Live Site URL: Marvel Information Portal on Heroku

My process

Built with

• CSS Grid, SCSS
• React - JS library
• Redux & Redux Toolkit - JS library for managing state & queries
• React Router - React library
• Framer Motion - For animations & transitions
• React Hook Form - React library for forms
• React Helmet Async - Page helmet customization

What I learned

How to use real world API & queries, work with animations and make app keyboard-accesible.

Continued development

My remaining targets for the app:

• Put characters/comics list into RTK EntityAdapter via RTK Query

Author

• Sergej Zhilinskij - Github

Acknowledgments

Big thanks to Ivan Petrichenko - His page with courses on Udemy. The app was started on his course and I highly recommend his course to everyone who wants to learn JS/React.