🍣 Setup Instructions - GitHub Repo

Requirements

• Node v22
• Docker or Rancher Desktop

We are utilizing pnpm as our package manager. Though, you can utilize npm if you prefer by running the equivalent npm commands.

# Project setup steps
git clone https://github.com/ZenSoftware/zen.git
cd zen

# Make a copy of the .env file
cp .env.example .env

# Install node modules
pnpm i

# Start the PostgreSQL server
docker-compose up -d

# Run the initial Prisma migration
pnpm prisma:migrate

# Start the Nest API
pnpm start:api

# Start the Angular app at localhost:4200
pnpm start

# Reload Apollo VSCode extension via command palette after the API has started
>Apollo: Reload schema

🥢 GraphQL Features

• Nest GraphQL resolvers to Prisma Client.
• Apollo GraphQL SDL bindings to Prisma generated via Pal.js CLI! Thank you @AhmedElywa 🎎
• PrismaSelect to eliminate overfetching. Queries are delegated to Prisma which solve the GraphQL N+1 problem for free.
• Custom npm scripts to code generate the Nest GraphQL api on Prisma schema changes.
• @graphql-codegen/typescript-apollo-angular of apollo-angular services to enable simple, type safe access to the GraphQL API within Angular. 🎀 Modern dev tooling configured for the project, allowing for Apollo extension for VS Code to provide auto-completion within gql tags for all .ts files.
• An Angular GraphQLModule to simplify the configuration of the ApolloClient to enable/disable the varying ApolloLink features.
  • HttpBatchLink for batching several GraphQL requests that occur within a short time interval. This really helps to alleviate network congestion.
  • UploadLink to give ApolloClient HTTP multi-part form requests capabilities. Enabling the uploading of files via GraphQLUpload.
  • GraphQLWsLink for GraphQL subscriptions over websockets.

🍱 API Authentication, Performance & Scaling

• Nest authentication, user registration and login system designed specifically to work for an Angular SPA (single page application). This project provides responsive, "mobile first" interfaces for the standard set of authentication features.
• New account component
• Login component with remember me option.
• Sign in with Google via OpenID Connect.
• Forgot password component and full password reset flow.
• Password change component for user dashboards.
• Nest guards & directives for both RBAC & ABAC authorization schemes. ABAC is implemented with @casl/prisma & @casl/angular. The user's CASL rules are sent from the server to the client and updates the @casl/angular ability. This unifies the permissions across both the server and the client. Fully exploiting CASL's isomorphic capabilities.
• Angular route guards and Angular directives to show/hide content depending on the user's roles or CASL abilities.

🍵 Modern Web Components and Responsive UIs

• SASS chosen as the CSS transpiler of choice.
• Angular Material components & theme.
• Mobile first approach to build the framework's core components (login form, etc).
• Directly import Bootstrap reset, utilities, & grid features through SASS (.scss) imports and exclude the Bootstrap theme and conflicting component styles. These features are missing from Angular Material and greatly simplify the creation of responsive, mobile first applications.
• Bootswatch SASS (.scss) variables integrated for a large assortment of high quality color themes to choose from.

🎏 Optional Tech Integrations

• Electron branch with new npm script start:electron to launch the app within Electron.
• Capacitor branch.
• SocketIO branch demonstrates how to implement a Nest WebSocket Gateway with user authentication.
• Kendo UI branch - which includes @zen/grid. <zen-grid> renders robust and reliable data grids over all of the Prisma models within the project, with minimal configuration needed.
• OpenTelemetry branch demonstrates how to integrate and expose telemetry data for the API server.
• HTML canvas branch demonstrating integration of babylon.js & Fabric.js.
• Internationalization branch with all text extracted into JSON files ready to be translated. @ngx-translate was chosen over @angular/localize due to @angular/localize inability to change languages at runtime.
• Unity branch demonstrating how to compile a Unity WebGL web player as an Angular component.
  • The payload for the Unity app is currently weighing in at ~109MB uncompressed and ~12.8MB compressed with brotli.
  • Custom Nx scripts have been integrated to generate C# GraphQL types for communicating with the API server via GraphQL. This enables end-to-end typings.
  • The user management system has been unified across the entire monorepo and thus simplifies the creation of unique user experiences as a real-time web application. This starter kit now has the ability to render real-time scenes and load in models dynamically at runtime via Unity's Addressable system. It has never been easier to create exceptional enterprise grade metaverse experiences that are wired up to your own fleet of game servers delivering content on-demand.
  • A project management tool and game engine like Unity is necessary for complex projects that scales well as the number of team members grows. Unity is continuing to invest heavily into the web and has recently integrated experimental support for the new WebGPU standard that is nearing completion in being fully standardized. This enables utilizing Compute Shaders to tap into the massive parallelization power of the GPU.
  • The development experience is exquisite via the included recommended set of VSCode extensions and Unity as an Nx C# project. Making for a cross-platform development experience that is extraordinarily simple to set up and maintain.

🍡 Developer Operations

• Nx for project management to allow for the use of Nx Console extensions for VSCode. Nx Console is a GUI interface for monorepos that adds a lot of modern developer conveniences. It also helps to simplify the use of the various Angular & Nest code generation schematics available in the ecosystem.
• Angular Language Service for VSCode for modern IDE tooling.
• npm scripts for versioned releases of the Nest api server as a containerized Docker image. node:22-alpine is used as the Docker container base image and the appropriate tsconfig.app.json configurations are being applied for the Nest app.
• Example Kubernetes deployment scripts.
• Enforced code formatting via Prettier & import-sort, guaranteeing all contributions to the project are standardized with predictable structure and clear legibility.
• Commitizen for standardizing git commits.
• @nestjs-modules/mailer for automated emailing and pre-configured Handlebars e-mail templates for the various web portal's emailing needs. Handlebars has similar double bracket {{contextField}} template interpolation, akin to Angular templates. Custom HTML e-mail triggers within Nest are made very simple by simply passing a JSON context and the template's filename as parameters to the class injectable MailService.