Welcome to Bot Battlr, the one and only spot in the known universe where you can custom build your own Bot Army! This is our app:
Here's the scenario: a galactic overlord has hired you, a galactic web developer, to develop a galactic web app that will allow them to browse through a list of robots, view a robot's details, and, enlist a bot into their army.
For this project, you’ll be building out a React application that displays a list of available bots, among other features. Try your best to find the right places to insert code into the established code base.
Part of what this code challenge is testing is your ability to follow given instructions. While you will definitely have a significant amount of freedom in how you implement the features, be sure to carefully read the directions for setting up the application.
After cloning down the project:
- Run
npm install
in your terminal - Run
npm start
: This will open both your React page on port6002
and your backend on port6001
.
The base URL for your backend is: http://localhost:6001
These are the endpoints you might need:
- GET:
/bots
- POST:
/bots
- DELETE:
/bots/:id
BotPage
is the highest component below App, and serves as the main container for all of the pieces of the page.
BotCollection
and YourBotArmy
are container components, which are children of BotPage
. BotCollection
is where all the bots will be displayed, while YourBotArmy
(the green portion on the top of the screen) will only display the bots that have been selected by the user.
BotCard
and BotSpecs
are presentational components that have been provided for you that will render out information about an individual bot formatted for a list view and for a full view, respectively. They are pre-styled, and it is your responsibility to get the data into them.
All of the code to style the page has been written for you, meaning that you should be adding to the code rather than editing it; however, if your finished product has some styling issues, don't worry too much about it.
As a user, I should be able to:
- See profiles of all bots rendered in
BotCollection
. - Add an individual bot to my army by clicking on it. The selected bot should render in the
YourBotArmy
component. The bot can be enlisted only once. The bot does not disappear from theBotCollection
. - 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.
These deliverables are not required to pass the code challenge, but if you have the extra time, or even after the code challenge, they are a great way to stretch your skills.
Note: If you are going to attempt these advanced deliverables, please be sure to have a working commit with all the Core Deliverables first!
As a user, I should be able to:
- Choose if I want to enlist a bot into my army or just see thier data. Clicking on the card should instead display a show view (
BotSpecs
) for that bot, which should replaceBotsCollection
. BotSpecs should have two buttons: one to go back to the list view and another to enlist that bot. Your app could look like the following:
- 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 toYourBotArmy
. - 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"]
.
-
No code or very little code has been written or the code doesn't run. If it runs, no deliverables have been met. Not managed to set state or pass props successfully.
-
State is not being set or updated. Props are not being passed down, or you are passing down the right prop but trying to access it incorrectly (wrong name, unnecessary
this
,state
instead ofprops
) or key props are missing. API call does not successfully populate state. -
State is working. However, it may be in the wrong component, it might be nested oddly or might have some unnecessary state. Props are being passed unnecessarily to components. Functions that change or calculate state are not defined in the component that they are most closely tied to.
-
State works and is held by the lowest common component. No unnecessary state is created. Only the necessary props are being passed down. Functions used to edit state are passed down.
-
Advanced deliverables are met.
-
No code or very little code has been written or the code doesn't run, i.e. syntax errors, imports missing, etc. If it runs, no deliverables have been met.
-
Starter components have been unnecessarily modified and broken. There is no reference to componentDidMount. Incorrect or unnecessary lifecycle methods are used.
-
Fetch is triggered in the right place. Code is not abstracted into clear methods. Additional components have been added which serve no purpose. Props and variables could be named consistently and descriptively.
-
Components are structured in a logical way. Class components only used when needed, functional components used for everything else. Code is abstracted into clear methods. Used object destructuring and spread operator successfully.
-
Advanced deliverables met. Uses some of the following: destructuring, functional components, spreading, hooks, pure functions, performance is taken into account.
-
No code or very little code has been written or the code doesn't run. If it runs, no deliverables have been met.
-
Did not manage to render everything that was asked for in the deliverables.
-
Renders everything that is asked for in the deliverables. Components could be more abstract/reusable. May have created own components instead of using the components provided.
-
Renders everything that is asked for in the deliverables. Components are abstract/reusable. No unnecessary components were created.
-
Everything from 4 plus extra features were added that are not listed in the deliverables.
Good Luck!