Humble-Superhero-API 🦸

Project Overview

The Humble Superhero API is a simple yet meaningful application designed to celebrate the uniqueness and humility of superheroes. Every superhero has their own special abilities, but true greatness also comes with humility. This project allows users to add superheroes along with their superpower and humility score, then view a ranked list of superheroes based on their humility.

Tech Stack

• Backend: Express.js (Node.js framework)
• Frontend: React.js with Bootstrap for styling
• Data Storage: In-memory database [array]

"If I had more time":

• I would deploy the project so that it is available to everyone, without having to download and install it locally.
• I would make the Search bar functional for easier searching.
• I would add an option to upload a picture of the Superhero.
• I would connect it to a database (MongoDB) so that all Superheroes are constantly available.

Project Instructions

Prerequisites

Before proceeding, ensure you have the following installed:

• Node.js (LTS version recommended)
• npm (comes with Node.js) or yarn
• A terminal or command prompt

Step 1: Download the Humble-Superhero-API Project

Clone it using Git:

• https: git clone https://github.com/Bazzomir/Humble-Superhero-API.git

https://medium.com/@hammadrao891/how-to-clone-a-react-application-from-github-and-run-4f9b742e568a

Step 2: Navigate to the Project Directory

Change into the project directory:

cd Humble-Superhero-API

Then enter the directory (for Front-End):

cd client

Then enter the directory (for Back-End):

cd api

The steps are the same for both parts, only the direction is different!!!

Step 3: Install Dependencies

Run the following command to install the required dependencies:

Using npm:

npm install

Using yarn:

yarn install

Step 4: Start the Development Server

To start the local development server, run:

Using npm:

npm start

Using yarn:

yarn start

This will start the application and open it in your default web browser at http://localhost:3000/. (Front-End React.js) This will start the application and open it in your default web browser at http://localhost:3030/. (Back-End Express.js)

In the api folder Copy the part from .env.example, create a new file .env on the same level as .env.example and paste the copied stuff into it.

Troubleshooting

If you encounter permission issues, try running commands with sudo (Mac/Linux) or PowerShell as Administrator (Windows).

If dependencies are outdated or broken, try:

rm -rf node_modules package-lock.json && npm install

or

rm -rf node_modules yarn.lock && yarn install

Conclusion

You have now successfully downloaded, installed, and run a Humble-Superhero-API application locally. Happy coding!

Please ensure all steps are completed correctly.