Project structure refactor

[Bentroen]

Overview

With the implementation of upcoming features demanding more complex code, as well as more advanced interactions between different parts of the project, the project's structure must be in a good state to support these additions. Postponing refactorings can lead to technical debt that's difficult to overcome later. Features implemented to follow the current structure leave more work to be done later when we change to a new structure.

As such, this issue highlights pending refactorings that were not yet completed, due to the faster iterations we undertook to release the project sooner. Right now, before we expand further, is the most appropriate time to work on these changes, as they touch practically every file on the repo. There are not as many features built on top of the current structure to make changing it too difficult, and all subsequent additions to the project will benefit from it.

Pull requests created to address these changes should not change public-facing features. (Note that this does not include the API as it's not part of our public API yet.)
This, thus, basically includes commits marked with the refactor, chore, build, test, and style conventional commit types (but no feat or fix commits must be present). These include:

• Structural changes to the frontend project;
• Any change to the backend and shared projects that does not disrupt what's returned to the frontend;
• Build, test, linting and overall project structure changes to conform to the new structure

Tasks

Project

• Split shared package into separate packages, and move frontend and backend to apps (refactor: split shared into packages #50, Fixing the packges build and github workflows #55)
• Remove imports between frontend <-> backend (and vice-versa) (refactor: split shared into packages #50)
• Remove imports from frontend/backend in shared (refactor: split shared into packages #50)
• Remove eslint-plugin-prettier and leave formatting to prettier (Update ESLint configuration #54)
• Upgrade ESLint and accompanying plugins to version 8 and migrate to flat config (refactor: split shared into packages #50, Update ESLint configuration #54)
• Add pre-commit hook to auto-format commits (Update ESLint configuration #54)
• Review import aliases @web/@server to just @/, or add more useful aliases
  • Goal: avoid long imports like ../../../../lib/ in favor of @lib/
• Replace web and server in commands for frontend and backend
• Add concurrently back for running frontend and backend with single command

Infrastructure

• Add automatic GitHub releases and deployments based on semver (or calver)
• Better document API and classes, and add this to the contributing guide
• Fix remaining TODOs across the codebase
• Add README coverage report and CI/build status badges
• Add E2E tests
• Add Storybook for component testing
• Consider BFF pattern to make the frontend as 'dumb' as possible
  • (We may want to create a different frontend in the future, such as a mobile app; a lot of logic happens in the frontend ATM, which will create a lot of duplicate work)

Shared packages

• Write tests for song obfuscation module
• Refactor thumbnail's canvasFactory module (it's hacky to allow the same code to be imported in frontend and backend)
  (refactor: split shared into packages #50)

Backend

• Change api/v1/ prefix to just v1/ - as the backend is already hosted in the api subdomain (refactor: split shared into packages #50, Fix: Remove remaining /api prefixes from routes #56)
• Refactor song-browser and song modules to provide a single /song API path with flexible querying (feat: song search #59)
• Rework API return data to a standardized object with data, pagination, error, success (true or false), and message

Frontend

• Move all images into the /img subfolder
• Remove docs from /public folder
• Better structure component and page modules' naming convention and locations
  • The current module division doesn't make it clear whether or not something is only used by a page, or is a global component - for instance, upload form components are generic components and may be moved out of the upload module
• Remove client/ path division from components
  • The 'use client'; directive at the top of each module already indicates whether something is a client component, rendering the nesting unnecessary
  • Some components are currently misplaced (server components in client/ folder and vice-versa) - it can easily lead to mistakes in component placement
  • [Optional] Consider using client-only and server-only packages for better enforcement
• Consider using one component per module
• Content of pages is split between pages/ and components/ directories arbitrarily. Make this uniform
• Abstract away requests to the backend with React hooks (e.g. TanStack Query), and maybe extract it to a consumer library

[tomast1337]

[Backend] Change api/v1/ prefix to just v1/ - as the backend is already hosted in the api subdomain

3ca4d60

[tomast1337]

[Shared] Refactor thumbnail's canvasFactory module (it's hacky to allow the same code to be imported in frontend and backend)

https://github.com/OpenNBS/NoteBlockWorld/blob/feature/node-workspace-setup/packages/thumbnail/src/canvasFactory.ts#L22

I've removed most of the hackiness of it

[tomast1337]

[All] Upgrade ESLint and accompanying plugins to version 8 and migrate to flat config
[All] Remove eslint-plugin-prettier and leave formatting to prettier

solved here: 5151439