/ng-spanish-menu

Provide a menu in Spanish for customer to choose food and drink

Primary LanguageTypeScript

Netlify Status

Commitizen friendly

NgSpanishMenu

The application shows a Spanish menu and customer has to choose dishes and beverages from it. After each selection, a card is created to display description and price dynamically. Finally, the application calculates the total price that customer has to play before leaving the restaurant.

Install Volta

This project uses Volta manager to pin the version of Node and NPM to 14 and 7 respectively. https://docs.volta.sh/guide/getting-started

  • Run curl https://get.volta.sh | bash install Volta
  • Set the VOLTA_HOME variable to $HOME/.volta
  • Add $VOLTA_HOME/bin to the beginning of your PATH variable
  • Run volta install node@14 to install node v14
  • Run volta install npm@7 to install npm v7
  • Run volta pin node@14 to pin node version of the project to 14
  • Run volta pin npm@7to pin npm version of the project to 7

Version

  • Node 14
  • NPM 7

Setup Netlify function

Manually deploy Netlify function to production

  • Run ntl build to build netify contents
  • Run ntl deploy to deploy to preview site
  • Run ntl deploy --prod to deploy to production site when satisifed

Commit message with Commitzen

  • git add .
  • npm run commit

Todo

  • Translation
  • GraphQL API in Hasura

CSS and UI libraries

  • TailwindCSS

Translation

  • Transloco

PWA

Should we convert the application to PWA?

Articles

Angular and Storybook

  1. Angular and Storybook – Simple Component
  2. Angular and Storybook – Simple Component with inputs and actions
  3. Angular and Storybook – Component with content projection
  4. Angular and Storybook – Publish to Chromatic
  5. Angular and Storybook – Mock Data in Container Component
  6. How to render Tailwind CSS in Angular and Storybook
  7. How to perform accessibility testing in Angular and Storybook

Angular and other open source libraries

  1. Build Angular app with Netlify function
  2. How Angular calls CORS enabled Netlify Function
  3. Tailwind CSS in JIT mode with Angular
  4. Dynamically import module in Angular
  5. Customize template with ngTemplateOutlet and ngTemplate in Angular
  6. Split module into single component angular modules (SCAMs)

Best coding practices

  1. Add value to commit message in Angular application
  2. Improve Angular code with Betterer
  3. Automate release management in Angular

Storybook static app

https://www.chromatic.com/builds?appId=613821be390968003af8c529

Github page

https://railsstudent.github.io/ng-spanish-menu/

  • Note: The application is still a work in progress.

Netlify app

https://mystifying-panini-99633b.netlify.app/food

Development server

Run ntl dev for a dev server. Navigate to http://localhost:8888/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.