This is a 'little' example of how an app constructed using Functional-reactive patterns (FRP)
You can access the demo here using the following user:
Email: admin@admin
Password: admin
P.S: the users repository is cleaned each 2 hours
Run npm run serve:www and npm run serve:api to be able to run locally. Navigate to http://localhost:4200/. The application will automatically reload if you change one of the source files.
P.S: You can go to http://localhost:3333/api/ping to check if the api is working properly, it's should return a pong message with 200 status
We have to follow some principles to achieve a clean and very well structured project, in resume the patterns are:
- Immutable Data - All the data should be unique, what means in the practice that we don't to things like:
let someValue = 'mutable'object.someValue = 'new-value
We are using an file structure inspired in the Josh Article, he structure use a more readable way to organize big projects. Looks at the following structure:
app/
└─ pages/
├─ auth-page/
└─ auth-form/
└─ auth-header/
Follow this pattern can be confuse to search by a specific component that we not know, besides also will fill the imports with sub-folders very very faster. Instead, we can always group the files by functionality:
app/
├── components/
│ ├── auth-form/
│ └─ auth-header/
└── pages/
└── auth-page/
You will always know which place search by something
The final structure will look like:
src/
├── app/
│ ├── components/
│ ├── constants/
│ ├── directives/
│ ├── guards/
│ ├── helpers/
│ ├── guards/
│ ├── interfaces/
│ ├── pages/
│ ├── pipes/
│ ├── routes/
│ ├── services/
│ ├── stores/
│ └── utils/
├── assets/
└── styles/