Refactor to be React App w/ Flask Backend

[MCBoarder289]

Now that the app is functional as a prototype with Plotly's Dash platform, I'd like to try and refactor this to have a distinct FE and BE so that the visual experience is cleaner / more modern. With a React FE, there would be more flexibility for the interactivity, which also might solve some of the PWA issues (not leveraging the url params).

This will be a significant refactor which will take more time, but I'd like to grow this full-stack skillset. I think it will be worth the investment. This resource seems useful as a good place to start.

Overall Vision

• Monorepo structure
  • BE (Python - Flask)
  • FE (React)
• Still deploying via Render but this way:
  • Static Site for the FE
  • Python Web Service for the BE
  • Likely still just the raw code vs. containerizing/docker, but we'll see
  • Render Suggestion 1 Render Suggestion 2

FE specifics

• Would like to use Mantine - will be good to have a simple but useful component library.
• Will shift to more Client-Side rendering vs. Server-side rendering, which will impact some of the current BE API calls.

BE Specifics

• Will stick with Python w/ Flask.
  • That way I can reuse a lot of what I know (ex: Flask Caching, etc.)
  • Also able to more easily repurpose the already working core components (Libby search, Library Searches, Goodreads parser, etc.)
• With more client-side rendering, the BE API needs to not return components/children, but JSON data.

Refactor Concerns

• Decoupling FE and BE might cause more Bandwidth usage on Render (need to monitor this more carefully)
  • Use something like https://tools.pingdom.com/ to check page size and performance.
  • Currently, page size is 3.2MB and load time was 555ms w/ 63 requests.

[MCBoarder289]

Mantine UI Components

[MCBoarder289]

Helpful article on Pydantic for BE validation / JSON serde: https://medium.com/@danielwume/exploring-pydantic-and-dataclasses-in-python-a-comprehensive-comparison-c3269eb606af

[MCBoarder289]

Started with create react app, but might want to look into their pwa template: https://create-react-app.dev/docs/making-a-progressive-web-app/

[MCBoarder289]

This might be needed for awaiting components to finish? https://stackoverflow.com/questions/71778278/how-can-i-ensure-that-a-react-component-is-loaded-only-after-some-api-call-has-b

Or loading behavior?

[MCBoarder289]

https://stackoverflow.com/questions/66444067/react-display-loading-animation-for-api-call-duration

Loading behavior example

[MCBoarder289]

https://dev.to/will_yama/how-to-render-responses-96c

Another helpful article about calling external apis

[MCBoarder289]

Render static site info regarding redirects: https://community.render.com/t/cant-connect-api-calls-to-web-service-express-from-my-static-site/10229/3

[MCBoarder289]

Looks like I need to go with a Vite template because create react app doesn’t work maybe?

https://help.mantine.dev/q/can-i-use-mantine-with-cra

Vite PWA- https://vite-pwa-org.netlify.app/guide/

Vite PWA- https://dev.to/_ibrahimturan/adding-pwa-to-vite-applications-1bce

[MCBoarder289]

Might need this for changing the URL without refreshing the page? https://stackoverflow.com/questions/57101831/react-router-how-do-i-update-the-url-without-causing-a-navigation-reload

[MCBoarder289]

Backend: Might need to consider the BE returning ALL the books, so that the FE can avoid using bandwidth to simply get a random selection.

Frontend: This might mean a refactor to use ReactQuery and manage the cache that way.