Heroes App is an interactive single-page application built with React 19 and Vite that lets you explore an extensive catalog of Marvel and DC Comics superheroes. Browse heroes by publisher, search by name in real time, and dive into detailed profiles covering alter egos, first appearances, and character histories.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/ludwiigdev/Heroes_App/llms.txt
Use this file to discover all available pages before exploring further.
Quickstart
Clone the repo, install dependencies, and run the app locally in under five minutes.
Project Structure
Understand how the codebase is organized across modules, routes, and components.
Authentication
Learn how AuthContext, AuthProvider, and route guards protect the app.
Components & Pages
Explore every React component and page, with props and usage examples.
What’s Inside
Heroes App is structured around two feature modules — Heroes and Auth — wired together through React Router v6 and a shared Context API for authentication state.20 Heroes
10 Marvel and 10 DC Comics heroes, each with a photo, alter ego, publisher, first appearance, and character list.
Real-Time Search
Search heroes by name using query string parameters — results update as you type and survive page refreshes.
Protected Routes
PrivateRoute and PublicRoute guards redirect unauthenticated users to login and authenticated users away from it.
Key Technologies
| Technology | Role |
|---|---|
| React 19 + Vite | UI framework and build tool |
| React Router DOM v6 | Client-side routing with hash history |
| Bootstrap 5 | Responsive layout and UI components |
| React Context + useReducer | Global authentication state |
| Jest + React Testing Library | Unit and integration tests |
| query-string | URL search param parsing for hero search |
Get Started
Heroes App uses hash-based routing (
HashRouter). All URLs will be prefixed with #, for example http://localhost:5173/#/marvel.