Joel Dodich, Jun 2024
Sample app to evaluate a demo part.
Built with React + Vite + Typescript. Styling provided by Tailwind CSS, styled-components, and shadcn/ui
To get started. install dependencies: npm i
To run the main app: npm run dev
To run Storybook: npm run storybook
App consists of two pages, routed with react-router-dom. Analysis is a simple ThreeJS viewer that pulls from the sample datasets. Users can toggle colors, hover surfaces, and select pockets to see bounding boxes.
While Storybook may seem intimidating, there are some very powerful features that help me develop UI components quickly. This could also be piped to Chromatic for automated QC.
Although there was no API to hit, I mocked up a pattern for a call to a backend on a dashboard page, including loading state.
Leveraging Figma as a developer helps plan and identify architecture issues before getting deep into code. Link to the Figma file I generated is here: https://www.figma.com/design/NdGBBTJOWqLjcQUuqxFJ9S/Jdodich---Hadrian-Pocket-Review-Demo?node-id=167-9624&t=x9NDiTB79zTNGo0Q-1
- Faces can be picked through other faces. I did not write any hit testing logic.
- Faces hover while spinning. This is more annoying than anything else.
- Minimal responsiveness. I decided to omit making things responsive in favor of dev speed.