Angular based Web App to be used as a template or starting off point for frontend projects.
This is designed to work with Backdraft; see that project for more details.
- Frontend to all Backdraft endpoints/features.
- Angular Material UI.
- Dark mode (automatic; follows system).
- Internationalization.
- Use
npm ito install required dependencies. - Build the project for production or run it in a development environment using the scripts defined in
package.json.
The components directory contains all Angular components, except the page components (accessed via routes).
The pages directory contains all page components.
The services directory contains all Angular services, such as those used to make API requests. These should be broken into spearate services based on their function.
The models directory contains any TypeScript models (and in some cases, custom classes) used in the app.
The remaining files in /src include:
- The
app-http.interceptor.tscontains the HTTP interceptor used to insert the JWT token (if any) into each request, and to intercept 401 errors when the token needs to be refreshed. - The
localedirectory contains language translation files for internationalization. For more info on this, read the official Angular internationalization docs.
Implementing new functionality in the application usually involves:
- Checking the API spec for relevant endpoints and models.
- Creating a service (or adding to an existing one) with functions to make the relevant requests (along with any related state management).
- Creating or modifying the relevant components and pages to make use of the new functions.
- Adding new routes if needed.
- Note that the boilerplate code files for unit tests exist (
.spec.tsfiles) as they are automatically generated by Angular. However, automated testing has not been implemented.
Login Page:
Internationalization (Swahili example - incomplete):
Account Page:
Login Revocation:
Email Verification Code for Signup or Password Reset:
Dark Mode:
Responsive UI (Mobile View):
