Toy Robot Simulator is a react app built with redux, hooks, styled components and is tested using jest and enzyme. The design pattern loosely follows the Domain or Ducks style for file structure.

ParcelJs is used as the build tool. The prod build is ready to be served on a web server

Styled components Are used as a css in js solution

• TDD
• Container/presentational components
• Small action creators
• Business logic in the reducer
• Feature first
• Tests next to code
• Domain or Ducks approach
• Css in js theme for colours and breakpoint

• 2 top level components or domains: TableTop and UiControls
• Actions, Css and Utils have been split out into seperate modules per component

• TableTop connects to the state to get the current robot position and renders the TableTopSquares
• TableTopSquares display the robot based on the robot position props stored in the state
• Easy to do this then move a div around a fluid grid
• Used css grid

• UiControls renders the 3 ui components, Place, Rotate and Move.
• It holds the ui controls reducer which updates the robotPosition in the state
• PlaceUi component uses hooks for local state of the user input
• Each ui component dispatch's actions for updating state

I have included a folder with a build fit for opening directly in the browser. This can be found in /staticBuild. The only difference is that the script location is relative so as not to cause a 404. The best way to view is by running the start command

1. The app could be optimized for accessability.
2. Further unit testing coud be completed and also optimized for the PlaceUi component. Turns out using Hooks is a little difficult to test at the moment and you cant test them with enzyme at all!
3. Create a few more low level shared components ie: buttons, headings etc
4. Jest snapshots could be used as a baseline test for all components
5. Typescript could be implemented
6. Could have used styled-system for theming

yarn install
OR
npm install

yarn start
OR
npm start

yarn prod
OR
npm prod

yarn test
OR
npm test