https://github.com/ateendra24/marvel-characters-explorer

Marvel Characters Explorer is a React app using the Marvel API to display a grid of Marvel characters. Users can search for characters, view details by clicking on cards, and explore profiles. This intuitive app was created for a Dev Challenge and showcases a modern, engaging interface.
https://github.com/ateendra24/marvel-characters-explorer

api reactjs reactrouterdom

Last synced: 6 days ago
JSON representation

Marvel Characters Explorer is a React app using the Marvel API to display a grid of Marvel characters. Users can search for characters, view details by clicking on cards, and explore profiles. This intuitive app was created for a Dev Challenge and showcases a modern, engaging interface.

• Host: GitHub
• URL: https://github.com/ateendra24/marvel-characters-explorer
• Owner: ateendra24
• Created: 2024-09-11T15:09:51.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-09-13T13:21:46.000Z (2 months ago)
• Last Synced: 2024-09-14T19:47:49.183Z (2 months ago)
• Topics: api, reactjs, reactrouterdom
• Language: JavaScript
• Homepage: https://marvel-characters-explorer.vercel.app
• Size: 3.77 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Marvel Characters Explorer

Welcome to **Marvel Characters Explorer**, a web application that lets you explore the vast world of Marvel characters. This app leverages the [Marvel API](https://developer.marvel.com/) to display characters in a responsive grid layout, allows users to search for specific characters, and shows detailed information about each character when clicked.

## Features

- **Character Grid**: View a grid of Marvel characters with image and name.

- **Search Functionality**: Easily search for your favorite characters.

- **Character Details**: Click on any character card to view their brief information.

- **Responsive Design**: Works seamlessly across different devices and screen sizes.

## Screenshots

![Marvel Character Grid](public/Marvel.png)

![Character Details](public/Marvel2.png)

![Marvel Character Grid](public/Marvel3.png)

## Tech Stack

- **Frontend**: HTML, CSS, JavaScript

- **API**: Marvel API

- **Frontend**: React.js (Vite)

- **API**: Marvel API

- **Styling**: Tailwind CSS 

## How to Run

1. Clone the repository:

   ```bash

   git clone https://github.com/ateendra24/marvel-characters-explorer.git

2. Install the dependencies:

   ```bash

   npm install

3. Create a .env file in the root directory and add your Marvel API keys:

   ```bash

   VITE_MARVEL_PUBLICKEY=your_public_key

   VITE_MARVEL_PRIVATEKEY=your_private_key

4. Start the development server:

   ```bash

   npm run dev

   ```

 5. Open http://localhost:5173 in your browser to view the app.

 ## Marvel API

 This project uses the Marvel API to fetch data about Marvel characters. You will need to create an account with Marvel and generate your own API keys.

## Contact

If you have any questions or suggestions regarding the project, feel free to reach out!

Enjoy exploring the Marvel universe!