https://github.com/dnyaneshwargiri/strabag-coding-challenge

CRUD operations on data table using AgGrid & Material
https://github.com/dnyaneshwargiri/strabag-coding-challenge

aggrid angular angular18 angularmaterial datagrid employee-management-system grid-layout jest material rxjs

Last synced: 12 days ago
JSON representation

CRUD operations on data table using AgGrid & Material

• Host: GitHub
• URL: https://github.com/dnyaneshwargiri/strabag-coding-challenge
• Owner: dnyaneshwargiri
• Created: 2024-12-04T16:35:49.000Z (21 days ago)
• Default Branch: main
• Last Pushed: 2024-12-05T14:56:51.000Z (20 days ago)
• Last Synced: 2024-12-05T15:33:36.954Z (20 days ago)
• Topics: aggrid, angular, angular18, angularmaterial, datagrid, employee-management-system, grid-layout, jest, material, rxjs
• Language: TypeScript
• Homepage: https://dnyaneshwargiri-employee-app.netlify.app/
• Size: 590 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Employee Document Manager

  Table of Contents

  


    


      About The Project

      


        
Built With

      

    

    


      Getting Started

      


        
Prerequisites

        
Installation

      

    

    
Live Demo

  


## About The Project

A document management web app built with Angular 18, Angular Material, and AG Grid, featuring CRUD functionality with modal-based forms and a responsive data grid. It follows best practices using standalone components and reactive forms.

### Built With

Below are frameworks/ libraries used to bootstrap this project.

- ![Angular](https://img.shields.io/badge/angular-%23F442D8.svg?style=for-the-badge&logo=angular&logoColor=%23FFFFFF)

- ![RxJS](https://img.shields.io/badge/rxjs-%23B7178C.svg?style=for-the-badge&logo=reactivex&logoColor=white)

- ![Material](https://img.shields.io/badge/-Material-%230170FE?style=for-the-badge&logo=Material&logoColor=white)

- ![AgGrid](https://img.shields.io/badge/-AgrGrid-%230170FE?style=for-the-badge&logo=aggrid&logoColor=white)

- ![Pnpm](https://img.shields.io/badge/pnpm-%232C8EBB.svg?style=for-the-badge&logo=pnpm&logoColor=white)

- ![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white)

- ![Jest](https://img.shields.io/badge/jest-%23C63D14.svg?style=for-the-badge&logo=jest&logoColor=%23FFFFFF)

## Getting Started

Below are instructions on setting up your project locally.

### Prerequisites

- Node 21

- Pnpm 9.14.4app

- Typescript: ~5.5.2

- Angular: ^18.2.0

- AgGrid: ^32.3.3

### Installation

1. Clone the repo

   ```sh

    git clone https://github.com/dnyaneshwargiri/strabag-coding-challenge.git

   ```

2. Go to project directory

    ```sh

    cd employee-app

   ```

3. Install NPM packages

   ```sh

    pnpm install/ yarn install

   ```

4. Compile Angular app

   ```sh

   pnpm build

   ```

5. Run

   ```sh

   pnpm dev /* dev mode */

   ```

## Test and Lint

Run test cases

```sh

pnpm test

```



Check for linting Warnings, Error

```sh

pnpm lint

```

## To run application via Docker Image

1. Build application for production

   ```sh

     pnpm build

   ```

2. Build Docker image

   ```sh

     chmod +x ./docker.build.sh

   ```

   ```sh

    sh ./docker.build.sh

   ```

3. Run Docker image

   ```sh

     docker run -p 4000:4000 employee-app

   ```

Please be informed commits are intentionly not squashed.

## Open issues

1. Non-breaking, Non-functional: Observed console error for modal ==> Blocked aria-hidden on an element because its descendant retained focus.