jbewing
commented
3 years ago Lemme quickly resolve these conflicts, then I'd appreciate a re-review 😄 @DarkAce65
Closed jbewing closed 3 years ago
jbewing
commented
3 years ago Lemme quickly resolve these conflicts, then I'd appreciate a re-review 😄 @DarkAce65
This PR adds a first cut at an image container component. I learned Typescript + refreshed myself on React and this is what resulted. All pointers + feedback is appreciated as I don't usually jump into the front of the stack that often 😆
Preview:
Notes:
I'm sure that everything could be flex-boxed up and the margins could be automatically adjusted so that everything is centered, but it would take a better CSS mind than mine. I just left everything as
inline-block+ left justified.There was a bug turned out to be because of CORS, so I added a CORS module to the API which seems to have fixed it. Please tell me if this is not the desired approach + what could be done better. The end goal is just to be able to read the API responses from JS instead of having things fail in weird ways behind the scenes but I usually don't need to worry about this stuff as a BE dev 😄
The tooling is amazing! Thanks for setting that up @DarkAce65
Testing
I tested this component with the flask server running locally (
poetry run task run) + the FE running (yarn start). I uploaded a ton of duplicate copies of a golden retriever to the DB to test how this component acted with 1 image vs. three rows of images. I tested that the design is responsive to screen width + height as well.Issue: https://github.com/brodigan-e/capstone-POV/issues/11 cc @DarkAce65