✨ This workspace has been generated by Nx, a Smart, fast and extensible build system. ✨
To start both backend API and frontend app run npm start. Open your browser and navigate to http://localhost:4200/.
(Or build a docker image using Dockerfile and run it)
To start dep-graph run npm dep-graph. Open your browser and navigate to http://localhost:4211/projects/all?groupByFolder=true.
To build all project run npm build.
Happy coding!
Login credentials:
username: 'admin', password: 'admin'(role: 'admin')username: 'user', password: 'user'(role: 'user')
Angular
- NgRx store
- Angular Material
- SCSS
NodeJs
- Express
- JwT
Nx
- Monorepo
- Jest
- Cypress
- ESLint
VS Code
Docker
The generated Nx graph is synced with the codebase of the project and should ease navigating the project. The npm command for starting a live interactive graph is npm dep-graph.
In the project root folder are located scripts for running multiple targets and in parallel. Nx console extension for VS Code is recommended.
- CRUD functions for managing a 'records' database.
- Search, sort and filter 'records' entries.
- Authentication and authorization for 'user'.
- Angular module lazy loading
- NgRx 'forFeature'
- Routing 'forChild'
- Globally available SASS variables/functions
- Basic form validation
db.json.ts : Contains the generator schema used to generate the records database via https://json-generator.com/
db.json : Contains the mock database generated. The file is served online at https://my-json-server.typicode.com/mppanayotov/Immedis_front_end_internship_2022_hcm_milen_panayotov/. This is the path the app uses when fetching records' data in records.service.ts. API responds but does not mutate the existing database. (Since the existing database is not being mutated, you will get error on update/delete a newly added entry.)
records.service.ts : Service that handles records' data traffic both for the online API and the NgRx Store.
auth.service.ts : Service that is responsible for user's authentication and authorization status. This service handles user's permissions regarding route navigation, localstorage information and communicating with the local backed API.
apps/capital-api-auth/src/main.ts : Provides basic backend functions. Database is string array. Signs and verifies JwT tokens. Returns user role which is used to further define user permissions.
If you happen to use Nx plugins, you can leverage code generators that might come with it.
Run nx list to get a list of available plugins and whether they have generators. Then run nx list <plugin-name> to see what generators are available.
Learn more about Nx generators on the docs.
To execute tasks with Nx use the following syntax:
nx <target> <project> <...options>
You can also run multiple targets:
nx run-many -t <target1> <target2>
..or add -p to filter specific projects
nx run-many -t <target1> <target2> -p <proj1> <proj2>
Targets can be defined in the package.json or projects.json. Learn more in the docs.
Have a look at the Nx Console extensions. It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.
Just run nx build demoapp to build the application. The build artifacts will be stored in the dist/ directory, ready to be deployed.
Nx comes with local caching already built-in (check your nx.json). On CI you might want to go a step further.