https://github.com/imranr98/frontload

Angular based Web App to be used as a template or starting off point for frontend projects. This is designed to work with https://github.com/ImranR98/Backdraft; see that project for more details.
https://github.com/imranr98/frontload

angular authentication bootstrap bootstrap5 client frontend i18n internationalization webapp

Last synced: 3 months ago
JSON representation

Angular based Web App to be used as a template or starting off point for frontend projects. This is designed to work with https://github.com/ImranR98/Backdraft; see that project for more details.

• Host: GitHub
• URL: https://github.com/imranr98/frontload
• Owner: ImranR98
• License: mit
• Created: 2021-09-07T14:22:09.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-04-14T03:52:25.000Z (almost 2 years ago)
• Last Synced: 2023-10-20T20:20:45.313Z (over 1 year ago)
• Topics: angular, authentication, bootstrap, bootstrap5, client, frontend, i18n, internationalization, webapp
• Language: TypeScript
• Homepage:
• Size: 1.11 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 🧺 Frontload

Angular based Web App to be used as a template or starting off point for frontend projects.

[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=ImranR98_Frontload&metric=security_rating)](https://sonarcloud.io/summary/new_code?id=ImranR98_Frontload) [![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=ImranR98_Frontload&metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=ImranR98_Frontload) [![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=ImranR98_Frontload&metric=reliability_rating)](https://sonarcloud.io/summary/new_code?id=ImranR98_Frontload) [![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=ImranR98_Frontload&metric=vulnerabilities)](https://sonarcloud.io/summary/new_code?id=ImranR98_Frontload) [![Bugs](https://sonarcloud.io/api/project_badges/measure?project=ImranR98_Frontload&metric=bugs)](https://sonarcloud.io/summary/new_code?id=ImranR98_Frontload)

***This is designed to work with [Backdraft](https://github.com/ImranR98/Backdraft); see that project for more details.***

## Features

- Frontend to all Backdraft endpoints/features.

- Angular Material UI.

- Dark mode (automatic; follows system).

- Internationalization.

## Setup/Usage

1. Use `npm i` to install required dependencies.

2. Build the project for production or run it in a development environment using the scripts defined in `package.json`.

## Project Structure

### Components and Pages

The `components` directory contains all Angular components, except the page components (accessed via routes).

The `pages` directory contains all page components.

### Models and Services

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. 

### Everything Else

The remaining files in `/src` include:

- The `app-http.interceptor.ts` contains 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 `locale` directory contains language translation files for internationalization. For more info on this, read the official [Angular internationalization docs](https://angular.io/guide/i18n-overview).

## Typical Flow for Implementing New Features

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.

## Notes

1. Note that the boilerplate code files for unit tests exist (`.spec.ts` files) as they are automatically generated by Angular. However, automated testing has not been implemented.

## Screenshots

Login Page:

![Login Page](./screenshots/login.png)

Internationalization (Swahili example - incomplete):

![Internationalization (Swahili example - incomplete)](./screenshots/i18n.png)

Account Page:

![Account Page](./screenshots/account.png)

Login Revocation:

![Login Revocation](./screenshots/revoke.png)

Email Verification Code for Signup or Password Reset:

![Email Verification Code for Signup or Password Reset](./screenshots/otp.png)

Dark Mode:

![Dark Mode](./screenshots/dark.png)

Responsive UI (Mobile View):

![Responsive UI (Mobile View)](./screenshots/mobile.png)