I am working on a web app that will automatically generate Bootstrap sites given a bounded set of parameters. I need help with regards to architectural decisions, as over time, I have made very naive design decisions and I don't want to repeat this mistake with this project. For my PoC, I have taken an MVC approach to design, with the top-level architecture (see above) containing the following:
- CanvasComponent - this is the entry point for the application, a UI element in which the user can generate their website and be given to download it;
- CanvasService - this service orchestrates the creation of the website, and has dependencies on a set of services (NavbarService, HeroService, FooterService);
- DomService - this service is in charge of the creation of the DOM element at a high level sans styles;
- ComponentService - these group of services (NavbarService, HeroService, FooterService) are in charge of the creation of the DOM element at a lower level;
- FontService - this service is a Google font repository.
The above is something I put together fairly quickly, so I understand that it isn't perfect. I have a few questions with regards to the direction of the project with regards to the scalability of it as I move towards productionalising it.
Given the nature of the project, I am dealing quite extensively with raw html. I use a mixture of approaches to dynamically generate the required HTML. I wanted to ask if the above is advisable. What would be the cleanest approach architecturally to creating and managing blocks of HTML? Should I use raw string or create something more bespoke?
What would be the best approach to storing an assortment of styles per component (navbar, hero, footer) and then applying them randomly? From what I understand a style can be separated into two categories - a template and a theme. A template can have many themes, and a single theme can be associated with multiple themes. A good example is "light/dark" colour mode on a website. At the moment in NavbarService, I store a range of possible widths and heights in an array.
Are there any issues that my current architectural approach will present down the road (unknown unknowns)? In the past, whenever I have started projects like this, they have quickly become unsustainable. I lose interest, because I am wrestling with the code-base at that point. I want the process to continue to be enjoyable, and keep my code clean and manageable over the course of the project.
A sample demo is available here: https://stackblitz.com/edit/angular-ivy-2pga8q (each time you reload the page, a new navbar appears).