refactor: split shared into packages #50

tomast1337 · 2025-07-25T23:55:54Z

This pull request introduces several structural and configuration changes to the whole project, primarily focused on spiting the project server, web and shared packages into separate @nbw/backend, @nbw/frontend, @nbw/database, @nbw/song, @nbw/thumbnail, @nbw/sounds and @nbw/config.

The following diagram shows the new structure of the project:

graph TD
    subgraph "Applications"
        Backend["@nbw/backend<br/>(Backend App)"]
        Frontend["@nbw/frontend<br/>(Frontend App)"]
    end
    
    subgraph "Workspace Packages"
        Config["@nbw/config<br/>(Configuration)"]
        Database["@nbw/database<br/>(Database Entities & DTOs)"]
        Song["@nbw/song<br/>(Song Processing)"]
        Sounds["@nbw/sounds<br/>(Sound Management)"]
        Thumbnail["@nbw/thumbnail<br/>(Thumbnail Generation)"]
    end
    
    %% Workspace package dependencies
    Database --> Config
    Song --> Database
    Thumbnail --> Song
    
    %% Backend dependencies
    Backend --> Database
    Backend --> Song
    Backend --> Thumbnail
    Backend --> Sounds
    
    %% Frontend dependencies (through workspace)
    Frontend -.-> Config
    Frontend -.-> Database
    Frontend -.-> Song
    Frontend -.-> Thumbnail
    
    %% Styling
    classDef appStyle fill:#e1f5fe,stroke:#0277bd,stroke-width:2px
    classDef pkgStyle fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
    classDef leafStyle fill:#e8f5e8,stroke:#388e3c,stroke-width:2px
    
    class Backend,Frontend appStyle
    class Database,Song,Thumbnail pkgStyle
    class Config,Sounds leafStyle

Bun and Testing Improvements

Refined test scripts in package.json to run tests specifically on src/**/*.spec.ts and e2e/**/*.spec.ts, improving test targeting and coverage.
Added .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc to document and enforce the use of Bun over Node.js, npm, pnpm, or vite, including recommendations for APIs, testing, and frontend workflows.

…adjusting exports

…e unused imports across various files

…onality

… unused imports across the frontend

… up unused imports in auth and song services

…ture for backend and frontend

…structure

…add dependency in package.json

…istency across song components

…an up unused imports in auth, song, and user modules

…g, sounds, and thumbnail packages

…song, and sounds packages to use glob pattern for improved test discovery

Bentroen

Looks great! Thank you for working on these changes =)

Some extra things (besides the review comments) we gotta make sure are working before merging:

Update VSCode workspace file, test running etc. to reflect the new project structure
Update GitHub Actions to reflect the new project structure

apps/frontend/package.json

Bentroen · 2025-07-26T16:34:49Z

package.json

We had originally decided to leave build.ts in the root of the project, as it was depended upon by both the frontend and the backend. With the new project structure, doesn't it belong in one of the different packages we created?
(Adding @nbw/sounds as the one single global workspace dependency looks a bit weird to me, haha :) )

Bentroen · 2025-07-26T16:38:41Z

package.json

For consistency, could we rename the build commands to use frontend and backend too, like the package names?

Bentroen · 2025-07-26T16:40:43Z

packages/backend/src/auth/auth.service.ts

As a result of introducing separate packages, first-party package imports have been grouped with third-party ones (see this file as an example). The @nbw/ group should be added as a local package group in ESLint - I'll look up how we can do this again :)

packages/backend/package.json

Bentroen · 2025-07-26T16:50:15Z

packages/song/tests/song/index.spec.ts

Following the rest of the project's structure, this file could be moved to the source file's path, and renamed to stats.spec.ts (as we'll likely add test files for the other modules in there)

Bentroen · 2025-07-26T16:58:07Z

packages/song/tsconfig.json

To avoid all the repetition, would it be possible to use a shared tsconfig.json using extends with these common package configurations?

Bentroen · 2025-07-26T16:59:38Z

packages/song/.gitignore

The separate .gitignore files may not be necessary, in case the root's package.json already takes care of them

…nd MinIO client services

…Script configuration, color utilities, and user constants

…t new naming conventions and add development scripts

…ner code

…development

…nsistency across database and user modules

…TANTS across song and seed modules for consistency

… for improved performance and simplicity

…stants from @nbw/config for consistency across modules

…w package structure

…r Node and browser environments

…for Node and browser environments

…nvironments with improved error handling

…nent with NoteQuadTree import

Copilot

Pull Request Overview

This PR restructures the monorepo by splitting the original server, web, and shared packages into focused workspace packages and applications. It creates a more modular architecture with separate packages for configuration, database entities, song processing, thumbnail generation, and sound management, while establishing clear dependency relationships between components.

Splits the monolithic structure into focused packages (@nbw/config, @nbw/database, @nbw/song, @nbw/thumbnail, @nbw/sounds)
Creates dedicated application packages (@nbw/backend, @nbw/frontend)
Updates all import paths throughout the codebase to use the new package structure

Reviewed Changes

Copilot reviewed 124 out of 398 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
packages/configs/	New configuration package with shared constants and types
packages/database/	New database package setup with gitignore and eslint config
apps/frontend/	Updated frontend with new import paths and package structure
apps/backend/	Updated backend with new import paths and dependency references
package.json	Root package updated with new workspace structure and exports
build.ts	Updated build script to use new package imports

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-08-14T13:52:11Z

packages/configs/src/colors.ts

@@ -22,16 +22,9 @@ Full list of colors is available at:
 https://tailwindcss.com/docs/customizing-colors

 */
+import colors from 'tailwindcss/colors';


The import statement has changed from a complex import with type casting to a direct import. Ensure that 'tailwindcss/colors' exports are compatible with the expected format and that the removal of the type casting doesn't break the color object structure.

Suggested change

import colors from 'tailwindcss/colors';

import * as colors from 'tailwindcss/colors';

Copilot · 2025-08-14T13:52:12Z

packages/configs/src/song.ts

@@ -1,8 +1,6 @@
-import { bgColors } from '@shared/features/thumbnail/colors';
+import { BG_COLORS } from './colors';


The import references './colors' but the file being modified is 'song.ts' and the colors are defined in 'colors.ts'. This import should work correctly, but verify that the BG_COLORS export is properly available from the colors module.

Copilot · 2025-08-14T13:52:12Z

apps/frontend/src/modules/song/components/client/SongThumbnailInput.tsx

@@ -156,14 +156,17 @@ export const SongThumbnailInput = ({
      />

      {song && notes && (
-        <ThumbnailRendererCanvas notes={notes} formMethods={formMethods} />
+        <ThumbnailRendererCanvas
+          notes={notes as unknown as NoteQuadTree} //TODO: fix this bizarre type cast


The type cast 'as unknown as NoteQuadTree' with a TODO comment indicates a type mismatch that should be resolved properly rather than using a double cast. This suggests the types between packages may not be properly aligned.

Suggested change

notes={notes as unknown as NoteQuadTree} //TODO: fix this bizarre type cast

notes={notes}

Copilot · 2025-08-14T13:52:12Z

apps/frontend/src/modules/song-upload/components/client/context/UploadSong.context.tsx

-      song = await parseSongFromBuffer(await file.arrayBuffer());
+      song = (await parseSongFromBuffer(
+        await file.arrayBuffer(),
+      )) as unknown as SongFileType; // TODO: Investigate this weird type error


Another 'as unknown as' type cast with a TODO comment. This pattern appears multiple times and suggests that the type definitions between packages may need to be reconciled to avoid these unsafe casts.

Suggested change

)) as unknown as SongFileType; // TODO: Investigate this weird type error

const parsedSong = await parseSongFromBuffer(

await file.arrayBuffer(),

);

if (!isSongFileType(parsedSong)) {

throw new Error('Parsed song does not match SongFileType');

}

song = parsedSong;

Copilot · 2025-08-14T13:52:13Z

apps/frontend/src/modules/song-edit/components/client/context/EditSong.context.tsx

@@ -259,7 +259,7 @@ export const EditSongProvider = ({
      setInstrumentSounds(songInstruments);
      formMethods.setValue('customInstruments', songInstruments);

-      setSong(song);
+      setSong(song as unknown as SongFileType); // TODO: Investigate this weird type error


Another instance of the same type casting issue. This pattern suggests a systematic problem with type compatibility that should be addressed at the package level rather than with individual casts.

Suggested change

setSong(song as unknown as SongFileType); // TODO: Investigate this weird type error

setSong(song as SongFileType);

Copilot · 2025-08-14T13:52:13Z

packages/configs/package.json

+    "typescript": "^5"
+  },
+  "peerDependencies": {
+    "typescript": "^5"


The package includes 'tailwindcss' as an implicit dependency through the colors import but doesn't declare it as a dependency or peerDependency. This could cause issues if tailwindcss is not available in consuming packages.

Suggested change

"typescript": "^5"

"typescript": "^5",

"tailwindcss": "^3.0.0"

Copilot · 2025-08-14T13:52:13Z

build.ts

@@ -13,7 +13,7 @@ function writeJSONFile(
  writeFileSync(path, jsonString);
 }

-const dataDir = resolve(__dirname, 'server', 'public', 'data');
+const dataDir = resolve(__dirname, 'packages', 'backend', 'public', 'data');


The path references 'packages/backend' but according to the new structure, the backend should be in 'apps/backend'. This path should be updated to match the new directory structure.

Suggested change

const dataDir = resolve(__dirname, 'packages', 'backend', 'public', 'data');

const dataDir = resolve(__dirname, 'apps', 'backend', 'public', 'data');

tomast1337 added 9 commits July 25, 2025 19:49

refactor: split shared into packages

9697ca9

refactor: moved backend to packages

b4ecf42

refactor: moved frontend to apps/frontend

f79dc4e

refactor: restructure project to use workspaces for apps and packages

ff0be9d

refactor: clean up database module by removing unused index file and …

f350b50

…adjusting exports

refactor: update imports to use centralized database module and remov…

a2f54b6

…e unused imports across various files

feat: implement offscreen drawing of notes and canvas swapping functi…

bee7b71

…onality

refactor: update imports to use centralized module paths and clean up…

baa803c

… unused imports across the frontend

refactor: tidy up tsconfig.json formatting for improved readability

e6834bc

tomast1337 self-assigned this Jul 25, 2025

tomast1337 added enhancement New feature or request help wanted Extra attention is needed labels Jul 25, 2025

tomast1337 added 8 commits July 25, 2025 21:05

refactor: update imports to use centralized database module and clean…

91b480b

… up unused imports in auth and song services

refactor: update build and start scripts to reflect new package struc…

f8697f6

…ture for backend and frontend

refactor: update ESLint configuration paths to reflect new directory …

4e44766

…structure

refactor: update imports to use new package structure for sounds and …

7928d51

…add dependency in package.json

refactor: add test script to package.json and update imports for cons…

4d29bce

…istency across song components

refactor: standardize import statements across multiple files and cle…

0785bd5

…an up unused imports in auth, song, and user modules

refactor: add lint and test scripts to package.json for database, son…

e76df8f

…g, sounds, and thumbnail packages

refactor: update test scripts in package.json for backend, database, …

52520ec

…song, and sounds packages to use glob pattern for improved test discovery

Bentroen reviewed Jul 26, 2025

View reviewed changes

tomast1337 added 2 commits August 12, 2025 20:20

chore: add docker-compose.yml to configure MongoDB, Maildev, MinIO, a…

f4a8ca3

…nd MinIO client services

refactor: remove unused import in SongDetails component for cleaner code

9d0a1b7

Bentroen mentioned this pull request Aug 13, 2025

Project structure refactor #51

Open

21 tasks

tomast1337 added 6 commits August 12, 2025 22:19

feat: initialize configs package with basic structure, including Type…

f1588b6

…Script configuration, color utilities, and user constants

refactor: rename packages and update package.json structure to reflec…

24bab36

…t new naming conventions and add development scripts

refactor: remove unused colors export from thumbnail package for clea…

7419f74

…ner code

feat: add development script to sounds package for watch mode during …

10e468a

…development

refactor: update imports to use new constants from @nbw/config for co…

1867009

…nsistency across database and user modules

refactor: standardize import statements and update to use UPLOAD_CONS…

4d4cca6

…TANTS across song and seed modules for consistency

tomast1337 added 9 commits August 12, 2025 22:20

feat: add Bun configuration rule to replace Node.js and related tools…

e60fbc4

… for improved performance and simplicity

refactor: update components to use UPLOAD_CONSTANTS and other new con…

212b52e

…stants from @nbw/config for consistency across modules

refactor: update data directory path in build script to align with ne…

374c7c8

…w package structure

refactor: move backend to apps/backend

59ff35c

fix: Tests are no longer run and included in the dist folder

d670b34

refactor: update thumbnail package.json to support separate builds fo…

1ea8531

…r Node and browser environments

refactor: update song package.json to support separate build scripts …

814b19b

…for Node and browser environments

refactor: enhance canvasFactory to support both Node.js and browser e…

4d71486

…nvironments with improved error handling

refactor: update VSCode settings and enhance SongThumbnailInput compo…

4a30be5

…nent with NoteQuadTree import

tomast1337 requested review from Bentroen and Copilot August 14, 2025 13:50

tomast1337 linked an issue Aug 14, 2025 that may be closed by this pull request

Project structure refactor #51

Open

21 tasks

Copilot AI reviewed Aug 14, 2025

View reviewed changes

	import colors from 'tailwindcss/colors';
	import * as colors from 'tailwindcss/colors';

		@@ -1,8 +1,6 @@
		import { bgColors } from '@shared/features/thumbnail/colors';
		import { BG_COLORS } from './colors';

	notes={notes as unknown as NoteQuadTree} //TODO: fix this bizarre type cast
	notes={notes}

-      )) as unknown as SongFileType; // TODO: Investigate this weird type error
+      const parsedSong = await parseSongFromBuffer(
+        await file.arrayBuffer(),
+      );
+      if (!isSongFileType(parsedSong)) {
+        throw new Error('Parsed song does not match SongFileType');
+      }
+      song = parsedSong;

	setSong(song as unknown as SongFileType); // TODO: Investigate this weird type error
	setSong(song as SongFileType);

	"typescript": "^5"
	"typescript": "^5",
	"tailwindcss": "^3.0.0"

	const dataDir = resolve(__dirname, 'packages', 'backend', 'public', 'data');
	const dataDir = resolve(__dirname, 'apps', 'backend', 'public', 'data');

Uh oh!

refactor: split shared into packages #50

Are you sure you want to change the base?

refactor: split shared into packages #50

Conversation

tomast1337 commented Jul 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Bentroen left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Bentroen Jul 26, 2025

Choose a reason for hiding this comment

Uh oh!

Bentroen Jul 26, 2025

Choose a reason for hiding this comment

Uh oh!

Bentroen Jul 26, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Bentroen Jul 26, 2025

Choose a reason for hiding this comment

Uh oh!

Bentroen Jul 26, 2025

Choose a reason for hiding this comment

Uh oh!

Bentroen Jul 26, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Aug 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 14, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

tomast1337 commented Jul 25, 2025 •

edited

Loading