Zen
Nest + Prisma + Apollo + Angular Full Stack GraphQL Starter Kit
Overview
Zen is a full stack GraphQL starter kit for building web portals as stateful single-page applications. It combines Angular for the frontend, Nest for the backend, and Prisma for data persistence. The project utilizes Apollo throughout the tech stack to enable modern communication between the client and server via GraphQL. It also includes a fully featured authentication and authorization system.
Features
- Nx, Nest, Prisma, Apollo, and Angular: The kit integrates these technologies for a comprehensive development experience.
- Everything in TypeScript: All code, including code generation scripts, is written in TypeScript.
- End-to-end type safety: Code generation is preconfigured to ensure type safety throughout the project.
- 100% responsive design: The web portal built with Zen is fully responsive.
- 100% cross-platform: The code can be developed and deployed on any operating system, including mobile.
- Minimal concepts required: Zen aims to simplify development by unifying as many solutions as possible between the frontend and backend.
- Visual Studio Code extensions: High-quality VS Code extensions are preconfigured, including Nx Console, Angular Language Service, and Apollo.
- GraphQL client for Angular: Apollo Angular is used as the GraphQL client and provides code generation for dependency injection and strict typing.
- Schema first GraphQL server: @nestjs/graphql is used to build the GraphQL server with end-to-end type safety.
- Prisma integration: The kit includes Pal.js Generator to generate the GraphQL API for Prisma and Pal.js Select to solve the GraphQL N+1 problem.
- Purpose-built authentication and authorization modules: Zen provides a full suite of authorization components, guards, and directives for both Angular and Nest.
Summary
Zen is a full stack GraphQL starter kit that combines Angular, Nest, Prisma, and Apollo to provide a comprehensive development experience for building web portals. It offers a minimalistic approach with end-to-end type safety and includes a fully featured authentication and authorization system. With preconfigured Visual Studio Code extensions and a unified approach to frontend and backend solutions, Zen aims to simplify the development process.
- Angular
Angular is a TypeScript-based open-source framework by Google for building dynamic single-page applications and cross-platform mobile apps with MVC architecture and a rich set of features.
- Express
Express.js is a simple Node.js framework for single, multi-page, and hybrid web applications.
- Nest
A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications with TypeScript/JavaScript.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Bootstrap
Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.
- Prisma
Prisma is a server-side library that helps developers read and write data to the database in an intuitive, efficient and safe way.
- Fullstack
A fullstack boilerplate provides a starter application that includes both frontend and backend. It should include database, auth, payments, user roles and other backend services to build a fully featured saas or webapps.
- Apollo
Apollo is an open-source platform for building GraphQL APIs that connects with any data source. It provides a powerful set of tools and features for developers, including client and server-side caching, real-time data synchronization, and a seamless integration with popular frontend frameworks.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Graphql
A website that uses GraphQL as a query language to manage data fetching and state management. This includes features such as a strongly typed schema, client-side caching, and declarative data fetching to streamline data management and optimize website performance.
- Storybook
Storybook is a tool for developing and testing UI components in isolation. It provides a sandbox environment where you can experiment with different props and states to see how your component responds.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.