Project Structure

For this project I am creating at least 3 different views for every SMT game, and plan to eventually have a few dozen games on the site. This means I will have over 100 different components. Thankfully, each game will displaying mostly the same thing and a few abstract classes are going to take care of most the work.

At the top level, I have 3 different folders:

1. app - a single module that is present in every single view of the site
2. games - contains modules for each game in the franchise
3. shared - a single module that contains anything extendable that is used by multiple modules (except for direct spin-off titles like P5R)

Each module mostly follows the standard Angular structure:

.
└── example-module/
    ├── components/
    │   ├── my-component/
    │   │   ├── my-component.component.ts
    │   │   ├── my-component.component.html
    │   │   └── my-component.component.css
    │   ├── another-component/
    │   │   ├── another-component.component.ts
    │   │   ├── another-component.component.html
    │   │   └── another-component.component.css      
    │   └── types/
    │       ├── some-object.ts
    │       └── some-other-object.ts
    ├── example-routing.module.ts
    └── example.module.ts

If you are unfamiliar with Angular or other such platforms like React or Vue, you can read more about the general Angular structure here: https://angular.io/guide/file-structure#workspace-and-project-file-structure

The layout described above is the same layout of my app and shared modules. For the game modules I tweak things a little bit. I want each game to look different, so I have a module SCSS file in each game that is imported by every component level SCSS file in a game. I also keep data unique to each game in a data directory in each game module.

Here is an excerpt of my Persona 5 directory as an example:

.
└── games/
    └── p5/
        ├── components/
        │   ├── p5-demon-list/
        │   │   ├── p5-demon-list.component.scss
        │   │   └── p5-demon-list.component.ts
        │   ├── p5-skill-list/
        │   │   ├── p5-skill-list.component.scss
        │   │   └── p5-skill-list.component.ts
        │   └── ...
        ├── data/
        │   ├── demon-data.json
        │   ├── skill-data.json
        │   └── ...
        ├── types/
        │   ├── p5-compendium
        │   ├── p5-fusion-calculator
        │   └── ...
        ├── p5-routing-module.ts
        ├── p5.module.ts
        └── p5.scss

I imagine to some people this might look unnecessarily verbose or modularized--I know I thought it was when I first designed it--but when you have as many views as I do this way of doing keeps things clear and easy to follow, even if the path names get annoyingly long.