How can I better split the code in the _web folder by interface/technology?

Say I have the following interfaces/sections in my app:

  • presentation/marketing pages with the registration form, using simple Phoenix templates and controllers for those pages and the registration (no LiveView)

  • a GraphQL interface, using resolvers and schema (serving a JavaScript SPA)

  • an admin backend using LiveView

All those different sections of my application use the same business logic/domain (which would be the foo folder alongside the foo_web folder).

At some point I just thought to create separate apps or dependencies, depending on the common business logic/domain code, but I’m not sure whether it’s a good idea. (I still think that having the marketing website separate in the future might be a good idea in order to separate the traffic of the registered users using the app with the traffic of the public website’s guests and bots by different deployment, but I probably think too prematurely).

As those sections of the website are separate and using different technologies, and in order to not have all this code mixed up together and clearly see which code belongs to which section of the app, is there any code organization technique I could use to group code together by section?
(I still think there might be some code shared such as the Endpoint and other connection configuration, not sure yet).

Any advice is appreciated:)