Bot Battlr is a React-based single-page application (SPA) that allows users to view a collection of bots, enlist them into their personal army, release them, and even permanently delete them. The app fetches bot data from an API and provides sorting and filtering functionalities to manage the bots efficiently.
Fetch bot data from an external API. Display a collection of bots with attributes such as health, damage, and class. Sort and filter bots based on attributes. Enlist bots into a personal army with restrictions (only one bot per class). Release bots back to the collection. Permanently delete bots from both the collection and the army.
React.js (with Vite) JavaScript CSS JSON Server (API hosted on Render)
Ensure you have Node.js and npm installed on your system. Steps to Run the Project;
- Clone this repository:
- git clone https://github.com/your-username/bot-battlr.git
- Navigate to the project directory:
- cd bot-battlr
- Install dependencies:
- npm install
- Start the development server:
- npm run dev
- Open the application in your browser at http://localhost:5173/.
The application fetches bot data from: "https://bots-si0g.onrender.com/bots"
-
App.jsx Manages the main state of the application, including the list of bots and the user's army. Fetches bot data from the API on mount. Contains functions to enlist, release, and delete bots.
-
BotCollection.jsx Displays a list of bots. Allows users to sort and filter bots by class and attributes. Includes a function to enlist bots into the army.
-
BotCard.jsx Displays individual bot details with an enlist button.
-
YourBotArmy.jsx Displays enlisted bots. Provides options to release or permanently delete a bot.
-
SortBar.jsx Contains dropdowns for sorting bots and filtering by class. Functionality Overview Fetching Bots: Uses fetch inside useEffect to get bot data from the API. Sorting and Filtering: Uses useState to update the criteria dynamically. Enlist a Bot: Adds a bot to the army if no other bot of the same class exists. Release a Bot: Removes a bot from the army without affecting the collection. Delete a Bot: Removes a bot from both the army and the server permanently.