BOT-BATTLR

==========================

DESCRIPTION

Bot Battlr is a mini web application that allows a user to custom build their own Army.

The API link generated by my json server was: http://localhost:3000/bots

REQUIREMENTS

Prerequisites

node v14.17.4 and above
npm 6.14.14 and above
Vue 2.6.11
Then install the various packages from package.json npm install
Create environment variables
The data used in this project can be found at data

GET STARTED

To get started you need to do the following:

Clone the Repository using:

 git clone https://github.com/jamnjeri/Bot-Battlr/tree/main/bot-battler

Install JavaScript dependencies using:

npm install

Run the server using:

json-server --watch db.json

Test your server by visiting the below route in the browser:

http://localhost:8001/bots

Load the React application on your Browser using:

npm start

PROJECT DELIVERABLES

For this challenge, I worked on Bot Battlr, a mini web application where you can browse through a list of bots and select which one you would like to join your army.

The user, is expected to be able to:

See profiles of all bots rendered in BotCollection.
Add an individual bot to your army by clicking on it. The selected bot should render in the YourBotArmy component. Each bot can only be enlisted once.
When a bot is selected from the collection to join your army, it doesn't disappear from the BotCollection.
Release a bot from my army by clicking on it. The bot disappears from the YourBotArmy component.
Discharge a bot from their service forever, by clicking the red button marked "x", which would delete the bot both from the backend and from the YourBotArmy on the frontend.

Bonus Deliverables

The user should be able to:

Choose if I want to enlist a bot into my army or just see their data. Clicking on the card should instead display a show view (BotSpecs) for that bot, which should replace BotsCollection. BotSpecs should have two buttons: one to go back to the list view and another to enlist that bot.
Sort bots by their health, damage or armor. For this, create a new component, SortBar.
When I enlist a bot it will be removed from the BotCollection and added to YourBotArmy.
Filter bots by their class. We can select a few filters at the same time.
Sort bots by their health, damage or armor. For this, create a new component, SortBar.
Only enlist one bot from each bot_class. The classes are ["Support", "Medic", "Assault", "Defender", "Captain", "Witch"].

CONCLUSION

All the Core project Deliverables were achieved as well as some of the bonus deliverables.
It is important to note that enlisting the bot means it will be deleted even from the API.

Languages used to create this project

React,
HTML,
CSS,
JavaScript

Author:

Jamila Mathu - Initial work - jamnjeri

Status:

maintained, and is currently in development

Version:

v0.1.0

jamnjeri/bot-battler-2