Define a new folder structure

[thePeras]

Leave suggestions below

[Naapperas]

Looking at the current structure of the project, there are some alarming things, namely the fact that the utilities package is a large part of the code base.

With that in mind, one possible solution is to:

• Have code that is used throughout the whole website in a common package;
• Code related to a single page should be separated into its own file; these files could live in a pages directory;
• Things like tables can occur several times. In order to keep the same styles and structure, there could be a components directory containing code for these situations: each page would only need to include/run it when needed;
• non-UI related code should live separately from UI code: things related to being authenticated and such could live in a auth folder;
• This is just a personal opinion but if possible there should be any "utils" code at all. ON the rare occasion that it makes some sense to have said code, you could make some "localized" (i.e., annex to the code or bits of code that use it) utils package/file.

---

One other thing to keep in mind is to not run every bit of javascript in every page since this can slow down page loads. Instead (and as @LuisDuarte1 suggested) we should have a mapping from URLs to "Page scripts". My 2 cents on this is to have a centralized "page registry", kinda like:

// pageRegistry.js

const pageMapping = {} // mapping: URL Regex -> Function

const registerPage = (pageUrlRegex, pageLoader) => pageMapping[pageUrlRegex] = pageLoader;

const loadPage = (pageUrl) => {

    for (const urlRegex of pageMapping) {
        if (pageUrl.match(urlRegex)) {
            pageMapping[pageUrlRegex]();
            return;
        }
    }
}

The code might not be correct but you get the idea

This way, when a page loads, you only need to run the corresponding loader.

This is all based on personal experience and I invite other people to argue about the pros and cons of this structure and provide their own solutions.

P.S.: Typescript is cool :P