Skip to content

Mario-659/doc-tracer-frontend

Repository files navigation

Document Analysis App

A sample full-stack application for managing document analysis measurements, samples, spectra, and user administration. Project made in scope of engineering thesis. Backend part available at doc-tracer-backend.


Table of Contents

  1. Overview
  2. Features
  3. Technology Stack
  4. Prerequisites
  5. Setup Instructions
    1. Install Dependencies
    2. Run the Mock Server
    3. Run the Angular App

1. Overview

This project demonstrates a Document Analysis App allowing users to:

  • Register/login (authentication)
  • Manage measurements and samples (create/read/update/delete)
  • Explore measurement details, sample details, and spectral data
  • Visualize spectral data in a chart
  • Administer users and roles (in an Admin Panel)

The mock server provides local endpoints simulating user authentication and example data for measurements, samples, and spectra. The Angular frontend consumes these endpoints and renders the UI.


2. Features

  1. User Authentication:

    • Login and registration pages
    • Role-based access control (viewer, editor, admin)
  2. Measurements Management:

    • Create, edit, view, and delete measurements
    • Assign materials, device, conditions, and additional comments
  3. Samples Management:

    • Create and edit sample data, including spectral data (JSON or CSV import)
    • Sample details with chart visualization
  4. Admin Panel:

    • Manage users (active status, roles) via a grid interface
  5. Spectral Data Comparison:

    • Compare multiple samples’ spectral data on a chart with zoom and pan features

3. Technology Stack

  • Frontend: Angular (standalone components, TypeScript)
  • Backend (Mock): Node.js + Express
  • Styling: Bootstrap, SCSS
  • Charting: Chart.js with ng2-charts and zoom plugin
  • Data Grid: AG Grid

4. Prerequisites

  • Node.js >= 16.x
  • npm >= 8.x (or yarn >= 1.22.x)
  • A modern browser (Chrome, Firefox, Edge) for viewing the app

5. Setup Instructions

5.1 Install Dependencies

From the root of the repository (where package.json might live for the Angular app), install the required dependencies:

npm install

If you have a separate package.json for the mock server, also run npm install in mock-server/. However, this project can usually run the mock server with only express, cors, body-parser, and morgan installed — which are already in the snippet.

5.2 Run the Mock Server

  1. Navigate to the mock-server/ directory:
    cd mock-server
  2. Start the server:
    node server.js
    • The server runs by default on port 8080.
    • Available endpoints are prefixed by /api/....

5.3 Run the Angular App

In another terminal, from the main project directory, run:

npm start

Or to serve in development mode:

ng serve --open
  • By default, Angular will serve at http://localhost:4200.

Note: Ensure your environment.development.ts (or environment.ts) apiUrl property points to the mock server base URL: http://localhost:8080/api.

About

Angular frontend for a document analysis app with user auth and data visualization

Topics

Resources

Stars

0 stars

Watchers

1 watching

Forks

Contributors