DevNoteVault

Maintainers: Miroslav Eric, Igor Kostov

Dev Note Vault is an application designed for managers to log their meetings with developers. It facilitates the adjustment of individual developer skills and enables users to add, edit, or remove notes.

Architecture

The application consists of two main components:

• Backend API: A NestJS-based API connected to a Postgres database, both of which are served locally via Docker.
• Frontend: A Single Page Application (SPA) built with Angular.

What You'll Need

Before starting with the setup, ensure you have the following installed:

• Git Bash
• Docker for Windows
• Node.js v20.11.1 LTS or newer

Setup

Follow these steps to get the application running:

1. Clone this repository.
2. Change directory (cd) into the backend folder and run:

   npm i
   docker-compose build

3. Change directory (cd) into the frontend folder and run:

   npm i

How to Run

To get the application up and running, you'll need to open two terminals in the project root folder. You will find two scripts there; one for spinning up the Docker container with the backend API and database, and the other for starting the Angular development server.

1. In the first terminal, run the backend script:

   ./run-dev-backend

   After the backend is up and running, you'll be able to access the API on localhost:3000 and Postgres on localhost:5432. The credentials for Postgres are user: pguser, pass: pgpass.

2. In the second terminal, start the frontend development server by running:

   ./run-dev-frontend

This setup allows you to work on both the frontend and backend simultaneously, with live updates on your development progress.

Styling and Packages

The application adopts a standard Dashboard-like interface, protected by a login mechanism. For development purposes, an admin user with the username admin and password admin is already set up in the users table.

Design

The overall look and feel we're aiming for is captured in the design mock-up linked below. While the final implementation doesn't have to be "pixel perfect," this serves as a broad idea for the intended user interface. There is no need to install anything here, just use this as a visual guide.

See the example here

Recommended Packages

To achieve the desired functionality and aesthetics, the following packages should be installed and configured (if not already present):

• Angular 17+ features(signals, built-in control flow, deferrable views,...)
• Tailwind CSS for styling
• Font Awesome for icons
• NGRX SignalStore for state management

Type Definitions and Interfaces: With TypeScript, you'll likely define interfaces or types for your props, state, and for the structure of the data returned from your API. These can be defined within their respective feature folders.

API and Database

After initiating the backend, a Swagger documentation interface is accessible at localhost:3000/api. This interface provides a comprehensive overview of the available tables and CRUD operations. It is recommended to use the Swagger-generated data as a basis for creating TypeScript types for the frontend.

Authentication

All routes, with the exception of /api/login, are protected. To access these routes, first authenticate via /api/login using the username admin and the password admin to receive a token. This token must be included in the header of your subsequent requests, formatted as Authorization: Bearer <token>.

Making Changes

If there is a need to alter the backend, please consult with the project maintainers first to ensure consistency and avoid potential conflicts.