Skip to main content

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.

Getting Heroes App running locally takes only a few commands. The app has no backend service or environment variables to configure — once dependencies are installed you can start the dev server and immediately explore the hero catalog. Follow the steps below to go from zero to a running app.
1

Clone the Repository

Pull the source code from GitHub and move into the project directory.
git clone https://github.com/ludwiigdev/Heroes_App.git
cd Heroes_App
This creates a local Heroes_App/ folder containing the full project source, including all static hero images in public/heroes/.
2

Install Dependencies

Install all Node.js dependencies declared in package.json. Use whichever package manager you prefer.
npm install
Key packages installed include React 19, React Router DOM v6, Bootstrap 5.3, and the Jest + React Testing Library suite for tests.
3

Start the Development Server

Launch the Vite dev server. It starts almost instantly thanks to Vite’s native ESM dev mode.
npm run dev
You should see output similar to:
  VITE v6.x.x  ready in ~300ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
Because Heroes App uses HashRouter, the actual entry point is http://localhost:5173/#/. Navigating to the bare http://localhost:5173/ will automatically redirect you there.
4

Open the App and Log In

Open http://localhost:5173/#/login in your browser. You will see the Heroes App login page.Click the Login button — no username or password is required. The app stores the following user object in localStorage and redirects you to the Marvel heroes page:
{
  "id": "123",
  "name": "Luis Fernandez"
}
After login you land on /#/marvel where you can browse the Marvel hero catalog, switch to DC Comics via the navbar, or search across all heroes.
This login flow is intentionally simplified to demonstrate React context-based auth and protected routing. There is no real credential check or API call involved.
5

Build for Production (Optional)

When you’re ready to create an optimized production bundle, run the build command. The output is written to the dist/ directory.
npm run build
npm run preview spins up a local static server pointing at dist/ so you can verify the production build before deploying. The public/_redirects file included in the repo configures redirect rules for static hosts such as Netlify.

​
Running Tests

The project ships with a Jest + React Testing Library suite. Run it in watch mode with: 
npm test
This executes jest --watchAll, which re-runs affected tests on every file save. Test files live in the tests/ directory and mirror the src/ folder structure.
To run the test suite once without watch mode (useful in CI), use npx jest or add a "test:ci": "jest" script to your package.json.

Build docs developers (and LLMs) love

Get started for freeTalk to us