Monsters Rolodex is a React.js portfolio project that demonstrates React.js and state management techniques. It retrieves data from the JSONPlaceholder API and allows you to filter the monsters by typing in a search box. This project showcases React.js skills, particularly in state management.
This app is deployed on Github Pages using Github Actions.
The Monsters Rolodex Project was initially built using React Hooks, a modern and widely adopted way to manage state and side effects in React applications. React Hooks provide simplicity and flexibility, making them an excellent choice for most use cases. However, in some situations, Class Components might be more suitable, especially when dealing with legacy code or integrating with external libraries. As such you can find this project rebuilt using class based components here
- Monster List: Display a list of monsters with their names, images, and emails.
- Search: Filter the monster list in real-time by typing in the search box.
This project serves as a portfolio piece to demonstrate proficiency in React.js and state management. It focuses on retrieving data from an external API, managing application state, and efficiently updating the user interface based on user input.
Follow these steps to run the project locally and explore the state management implementation:
- Clone the Repository: Start by cloning this repository to your local machine using Git:
git clone https://github.com/Hthrace/monstersRolodex.git
- Navigate to the Project Directory: Move to the project directory:
cd monstersRolodex
- Install Dependencies: Install the project dependencies using npm:
npm install
- Start the Development Server: Run the following command to start the development server with Vite:
npm run dev
This will launch the app in your default web browser at http://localhost:5173.
-
View Monster List: When you access the app, you will see the monster list displayed on the screen.
-
Search for Monsters: Use the search box at the top of the page to filter the monsters. As you type, the list will update in real-time to display matching results.
This project integrates with the JSONPlaceholder API to fetch monster data for demonstration purposes. JSONPlaceholder is a free fake online REST API for testing and prototyping.
You can find more information about JSONPlaceholder here: JSONPlaceholder
- React.js
- Vite (for development and deployment)
- CSS (for styling)
To deploy the Monsters Rolodex app using Vite, follow these steps:
- Build the project:
npm run build
-
Deploy the built files to your hosting service of choice. You can use platforms like Netlify, Vercel, GitHub Pages, or any other hosting solution that supports static websites.
-
Configure your hosting service to serve the built files from the
distdirectory. -
Access the deployed app via the provided URL.
This project is intended to showcase React.js skills, particularly in state management. It's a demonstration of how to efficiently manage application state and update the UI based on user interactions.
This project is for portfolio demonstration purposes and is not actively seeking contributions. However, you are welcome to fork the repository and adapt it to your own projects.
This project is licensed under the MIT License - see the LICENSE file for details.
- Special thanks to the React.js and Vite communities for their excellent documentation and resources.