grace-hephzibah / monsters-rolodex

This application leverages React for UI rendering, incorporating asynchronous API calls to an internal database for fetching monster data. It features a dynamic search functionality, allowing users to filter monsters by names through a dedicated input field.

Monster Rolodex

Project Overview

Monster Rolodex is a React.js web application that provides a fun and interactive way to view a list of fictional monster characters. It utilizes an internal API to fetch and display monster details such as images, names, and email addresses. Users can search for monsters using the search box, which dynamically filters the list of monsters to match the search input.

Features

• Display monster cards with images, names, and emails.
• Filter monsters by name using the search box.
• Responsive and user-friendly interface.

Technologies

• React.js
• CSS
• Asynchronous JavaScript for fetching data from an internal API.

File Structure

• public - Contains the static files like the favicon, index.html, and manifest.
• src - Contains the source code for the application.
  • components - Includes React components like card-container, card-list, and search-box.
  • App.js - The main React component renders the entire application.
  • index.js - The entry point for the React application.

Setup

To get started with Monster Rolodex:

1. Clone this repository.
2. Navigate to the project directory.
3. Run npm install to install dependencies.
4. Run npm start to run the app in development mode.
5. Visit http://localhost:3000 to view the app in the browser.

Snapshots

1. Home Page

2. Card Hover Effect

3. Search Box