React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Bot Battlr Code Challenge

Overview

The Bot Collection Web App is a React-based application that allows users to view and manage a collection of bots. The app provides features such as viewing bot profiles, enlisting bots into your army, releasing bots and even discharging them from service permanently.

Core Features

As a user, you can:

1. See profiles of all bots rendered in the Bot Collection.
2. Add an individual bot to your army by clicking on it. The selected bot will be displayed in the "Your Bot Army" component. A bot can be enlisted only once, and it does not disappear from the Bot Collection.
3. Release a bot from your army by clicking on it. The bot will be removed from the "Your Bot Army" component.
4. Discharge a bot from service forever by clicking the red button marked "x". This action will delete the bot both from the backend and from your "Your Bot Army" on the frontend.

Installation

1. Clone this repository to your local machine:

   git clone git@github.com:Markswell-crypto/react-bot-battlr-code-challenge-2.git

2. Navigate to the project directory.

3. Install the lab dependancies.

   npm install

4. Start the development server.

   npm start

5. Open your web browser and access the app at http://localhost:3000

Technologies Used

• React
• JSON DB server for data storage
• Semantic UI CSS

How to Use

1. Browse the available bots in the "Bot Collection" and click on a bot to view its details.
2. Enlist bots into your "Your Bot Army" by clicking on them.
3. To remove a bot from your army, click on the bot in the "Your Bot Army" section.
4. To permanently discharge a bot, click the "x" button in the "Your Bot Army" section.

• BotCard.jsx: Displays details of a single bot, including their name, class, health, damage, and armor. It also provides a button to view more details.
• SelectedBots.jsx: Manages the enlisted bots, allowing users to add and release them. It uses the useState hook to maintain the enlisted bots list.
• BotCollection.jsx: Fetches bot data and renders a list of bot cards using the BotCard component.
• BotSpecs.jsx: Displays detailed information about a selected bot, including their class, health, damage, armor, and timestamps. Users can also enlist the bot in their army from this view.

Navigation

The app uses React Router for navigation. You can navigate between the following pages:

    Bot Collection: /
    Your Bot Army: /your-bot-army
    Bot Details: /bot/:id

Styling

Bootstrap is used for styling in the app. It provides a clean and responsive user interface. Icon Usage Font Awesome icons are used for displaying health, damage, and armor in the bot cards.

License

This app is licensed under the MIT License. Copyright (c) 2023 Markswell Osoro Ogutu

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Contact

Markswell-Crypto - osoromarkswell80@gmail.com