https://github.com/bazzomir/humble-superhero-api
https://github.com/bazzomir/humble-superhero-api
bootstrap cors express-js jest reactjs
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/bazzomir/humble-superhero-api
- Owner: Bazzomir
- Created: 2025-02-11T04:02:56.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-03-04T16:40:48.000Z (over 1 year ago)
- Last Synced: 2025-03-04T17:37:33.419Z (over 1 year ago)
- Topics: bootstrap, cors, express-js, jest, reactjs
- Language: JavaScript
- Homepage:
- Size: 758 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.`