ANGULAR CRUD - BEST PRACTICES

💥 Overview

This project is a study system in Angular and implementing using the best practices of reactive programming.

It comes initially with a authentication using FireBase Service and some more important points that are mentioned below. Has architecture was designed to be easy to understand and without use of any palliative programming - Go Horse.

• Use Material Design with adequate customization.
• Component interaction with @Input() and @Output()
• Managing global and local state with NgRx
• Use of implementation classes and dependency injection
• Find and fix problems in TS with ESlint
• Code formatter with Prettier
• Git Automation with Husky - Using commitlint and commitizer

See Demonstration

🏁 Project Requirements

Make sure that you also have NodeJS and NPM installed on your computer.

• $ node --version and $ npm --version

Install dependencies of project with:

• $ npm install

Angular Cli is already part of the development dependencies, so any cli functionality can be used with the prefix npx.

• $ npx ng serve

First Execution - Environment files: In the first execution of the project, it is essential to create the environment files (environment.ts) in /src/environments according to the model that follows inside the folder (environment.exp.ts).

📂 Project Structure

src/                         project source code
|- app/                      app components
|  |- @core/                 core module (singleton services and single-use components)
|  |- @shared/               shared module  (common components, directives and pipes)
|  |- pages/                 pages components
|  |- routes/                route files (private and public)
|  |- store/                 state files (reducers, actions, effects and selectrs)
|  |- app.component.*        app root component (shell)
|  |- app.module.ts          app root module definition
|  |- app-routing.module.ts  app routes
|  +- ...                    additional modules and components
|- assets/                   app assets (images, fonts, sounds...)
|- environments/             values for various build environments
|- theme/                    app global scss variables and theme
|- index.html                html entry point
|- main.scss                 global style entry point
|- main.ts                   app entry point

Workflow

WORKFLOW.md - This project uses the workflow pattern called git flow.

• Atlassian - Comparing Workflows
• Difference between workflows
• Girflow Cheatsheet

Tests

[Need to be implemented]

Deploy

GITHUB ACTIONS - To deploy to a demonstration of project hosted in GitHub Pages.

Contributing

CONTRIBUTING.md - Specifications of how the contribution should be submitted

Changelog

CHANGELOG.md - Chronologically list of changes for each version of a project