https://github.com/carlossanabriam/web-frontend

Web frontend of my final degree project
https://github.com/carlossanabriam/web-frontend

angular bootstrap compodoc docker frontend spa

Last synced: 2 days ago
JSON representation

Web frontend of my final degree project

• Host: GitHub
• URL: https://github.com/carlossanabriam/web-frontend
• Owner: CarlosSanabriaM
• License: mit
• Created: 2019-06-06T06:36:35.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-08-04T14:06:54.000Z (over 5 years ago)
• Last Synced: 2024-02-15T22:34:48.385Z (12 months ago)
• Topics: angular, bootstrap, compodoc, docker, frontend, spa
• Language: TypeScript
• Homepage:
• Size: 1.13 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Web Frontend



  

  



## What is it?

This project is an Angular application that represents the web frontend of my final degree project.

This application consumes the REST API served by the [web_backend](https://github.com/CarlosSanabriaM/web_backend).

It's deployed in Heroku in the following URL: 

[http://topics-and-summary-web-front.herokuapp.com](http://topics-and-summary-web-front.herokuapp.com)

## Main features

* **Uses Angular Material 7.3.7 and Bootstrap 4, and NG Bootstrap.**

* **Uses Angular Reactive Forms.**

* **Uses Chartist to create the histogram.**

* **Uses the HTML5 File API to drag and drop a text file in the textarea.**

* **Uses Compodoc for generating the documentation.**

* **After pressing a button, the page automatically scrolls to the card, and shows a loading spinner.**

* **Shows error messages in Angular Material Snack bar.**

* **It's completely adaptable, changing the layout and other small details depending on the screen size.**

* **Contains a Dockerfile to create a Docker image to execute the frontend in an isolated environment or deploy it.**

* **Deployed on Heroku.**

![Coverage badge documentation](images/coverage-badge-documentation.svg)

## Dependencies, Installation and Usage

All this information and more is present in the **documentation**.

To generate the documentation and visualize it, follow this steps:

1. Install compodoc 1.1.8 via npm: `npm install -g @compodoc/[email protected]`

2. Render the documentation, and serve it with compodoc: `./generate-and-serve-documentation.sh`

3. Access the HTML page in [http://127.0.0.1:8080/](http://127.0.0.1:8080/).

Compodoc 1.1.9 has a bug that fails to render source code blocks in Markdown files, 

so for the moment better install compodoc 1.1.8. 

See this [issue](https://github.com/compodoc/compodoc/issues/750) for more info.

The generate-and-serve-documentation.sh executes the following command: 

`compodoc -p tsconfig.json -s --assetsFolder images --includes additional-documentation-sources`.

For more info about compodoc, visit the [Compodoc Usage page](https://compodoc.app/guides/usage.html).

## Angular default info

### Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. 

The app will automatically reload if you change any of the source files.

### Code scaffolding

Run `ng generate component component-name` to generate a new component. 

You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

### Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 

Use the `--prod` flag for a production build.

### Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

### Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).

### Further help

To get more help on the Angular CLI use `ng help` or go check out the 

[Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).