anesuc / superheroes

A hub for superhero enthusiasts

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool


Logo

Superhero Explorer

For comics and superhero enthusiasts
View Demo

Table of Contents

  1. About The Project
  2. Getting Started
  3. Usage
  4. Assumptions

About The Project

Superheroes Explorer

It is obviously easier and more convinient to use the live hosted version of this. However, if you want to run it your self locally, you can find instructions on how to do that below.

Getting Started

To get a local copy up and running follow these simple steps. Another imprtant note to coonsider is that this has been mostly tested in Chrome. There could be some issues with other browsers I am not aware of.

You will need a local (or remote) PostgreSQL setup to connect to. Have a look at the server file to see how it needs to be setup. It needs to have a table named "test_db" (you can change this). The table needs to have 7 columns all set to accept intergers and the id set to be unique. The columns are to be used to store strength details of superheroes and are to be labelled as seen below:

id, combat, durability, intelligence, power, speed, strength

You will need to change the credidentials and the host/port information in the server file before condinuing with the steps below.

Prerequisites

  • node v12.0.0+ (this will depend on your platform for how to install it).
  • npm
    npm install npm@latest -g
  • Yarn (this will depend on your platform for how to install it).

Installation

  1. Clone the repo
    git clone https://github.com/anesuc/superheroes.git
  2. Go into the project diretory:
    cd superheroes
  3. Install nodemon globally and the server dependencies:
    npm i nodemon -g
    yarn
  4. Finally run it with:
    yarn dev

Usage

Search in the search box for any superhero character you are interested in. It will show you suggestions as you do so as seen below: Superheroes explorer search

Once you find the character you are interested in, press enter or select it from the suggestion. You will then be met with the info screen as seen below: Superheroes explorer search

Alternatively, you can select previously saved superheroes to get to the same page.

You can edit statistics of a superhero by selecting the blue edit button as seen below: Superheroes explorer edit stats

Assumptions

Assumptions I made during the development of this project is that all saved changes are available to all users since there is no login or user aunthenticaton mechanisms. Another assumption made is that once the info is changed thats what all users will get to see even when they menually search for that character.

About

A hub for superhero enthusiasts


Languages

Language:JavaScript 78.0%Language:CSS 16.0%Language:HTML 6.0%