My Spanish app in PANNG stack

Intention: I am learning Spanish from a Spanish teacher and I cannot read my own notes due to my horrible handwriting. My resolution is to build a full-stack app to store new Spanish vocabulary.

Stack: PANNG (Prisma, Angular, NestJS, Nx, GraphQL)

Repo: https://github.com/railsstudent/nx-apollo-angular-course

Characteristics:

  • Nx Monorepo
  • GraphQL module in Nest
  • Apollo GraphQL
  • Angular Apollo
  • TypeScript GraphQL code generation to generate GraphQL services
  • Tailwind CSS

Features:

  • Cursor-based pagination in course, lesson and sentence lists respectively
  • Add and retrieve course
  • Add and retrieve lesson
  • Add, delete and retrieve sentence
  • Add, delete and retrieve translation
  • Speak Spanish texts

Local graphQL playground

http://localhost:3333/graphql

Use Github Action to deploy Angular app to github page

  • Generate a personal access token and create ACCESS_TOKEN variable in Settings -> Secrets.
  • Keep the personal access token in a safe place and do not lose it
  • Go to Actions tab of the github repo
  • Create main.yml under .github/workflow
name: CI
on:
  push:
    branches:
      - master
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
        with:
          persist-credentials: false

      - name: Install
        run: |
          npm install
          npm run github-page-deploy
      - name: Build and Deploy Repo
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          BASE_BRANCH: master
          BRANCH: gh-pages
          CLEAN: true
          GIT_CONFIG_NAME: <author name>
          GIT_CONFIG_EMAIL: <email address>
          FOLDER: dist/<repo name>

References:

Projects built in July, 2018

Angular

Vanilla JS, SCSS, HTML

Import bootstrap, ng-bootstrap and font-awesome in angular app

1) yarn add bootstrap @ng-bootstrap/ng-bootstrap font-awesome

yarn add bootstrap @ng-bootstrap/ng-bootstrap font-awesome

2) In style.scss, import bootstrap and font-awesome

  1. @import "~bootstrap/scss/bootstrap";
  2. $fa-font-path : '../node_modules/font-awesome/fonts';
  3. @import "~font-awesome/scss/font-awesome";

4) type ng serve to launch application in development mode. Index page should open at url http://localhost:4200.

ng serve