xocomil / fullstack-dinos

FullstackDinos

A demo library that shows how to build an application using Nx, NestJS, Angular, Apollo Angular, @ngrx/component-store and @ngrx/signals.

The application is a simple backend server running on NestJS using Prisma. The frontend is built using Angular 17, Tailwind CSS and daisyUI. It is a simple CRUD application showing how to use Apollo with the different component level state management from NgRx.

How To Set Up FullStack Dinos

1. FullStack Dinos relies on a database for persistence. In the stream we use PostgreSQL, you will need to have a database ready before you begin.
2. Clone the repo: git clone https://github.com/xocomil/fullstack-dinos.git
3. Follow the documentation from Prisma for creating a .env file. An example can be found below.
4. You will need to edit the prisma/schema.prisma file to set up your db connection. You need to change the provider in the datasource db object to use your database. Example below.
5. Run prisma migrate
   • npm: npx prisma migrate dev
   • yarn: yarn prisma migrate dev
   • pnpm: pnpx prisma migrate dev
6. Start the api server
   • npm: npx nx s dinos-api
   • yarn: yarn nx s dinos-api
   • pnpm: pnpx nx s dinos-api
7. Start the angular dev server
   • npm: npx nx s angular-dinos
   • yarn: yarn nx s angular-dinos
   • pnpm: pnpx nx s angular-dinos

Example .env File

DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"

Example prisma/schema.prisma File

datasource db {
  provider = "postgresql"    // You should only change this line
  url      = env("DATABASE_URL")
}