A beautifully animated, high-performance web application for exploring the vast universe of Marvel Comics, built with React, TypeScript, and Framer Motion.
Live Demo: https://hq-marvel.gcstatus.cloud
High-Performance Virtualized Grids: Utilizes react-window to render massive lists of comics, series, and creators with buttery-smooth infinite scrolling performance.
Advanced Filtering & Sorting: Allows users to filter and sort records by title, date, format, and more, with debounced inputs for a responsive experience.
Declarative, Hardware-Accelerated Animations: Leverages the full power of Framer Motion for all UI animations, from complex 3D card tilts to elegant page transitions and staggered list reveals.
Rich, Interactive UI: Features beautifully designed, interactive cards for Comics, Creators, Events, and Series, each with unique hover effects and animations.
Detailed Dossier Pages: Every character, comic, series, event, and story has a dedicated detail page with a unique, thematic design.
Skeleton Loading States: Provides a professional and seamless loading experience by using skeleton placeholders that match the final component's dimensions, preventing layout shift.
Fully Responsive Design: The entire application is designed to work beautifully on all screen sizes, from mobile phones to large desktops.
Modular & Maintainable Codebase: Built with a feature-sliced architecture, making the code easy to navigate, maintain, and scale.
The project uses a modern, high-performance tech stack focused on developer experience and UI quality.
- Frontend: React, TypeScript
- State Management & Data Fetching: RTK Query (Redux Toolkit)
- Styling: Styled-components
- Animation: Framer Motion
- Virtualization: React Window
- Routing: React Router DOM
- Icons: React Icons
- Forms & Filtering: React Hook Form, use-debounce
Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.
Prerequisites
$ npm or yarn- Visit developer.marvel.com and create an account.
- Get your Public Key and Private Key.
git clone https://github.com/your-username/marvel-universe-dossier.git
cd marvel-universe-dossiernpm installyarn installnpm run devyarn devThe application should now be running on http://localhost:5173 (or another port if 5173 is in use).
This project is free to use.