Gendac Proficiency Assessment

Tayla Orsmond - 2023

About

This project is a proficiency assessment as part of my application to join Gendac as a graduate developer. It is a simple web application that allows users to view a list of products, add, edit and delete products.

Built With

This project was generated with Angular CLI version 16.2.1.

Features

View a list of products
Add a new product
Edit an existing product
Delete a product (with batch delete functionality)
Filter products by name, id, price and category
Sort products by name, id, price and category

The application makes use of a table to display the products since this makes the most sense for a product dashboard application. The table is paginated, and the user can select how many products they would like to view per page.

Design

The Figma design for this project can be found here.

Project Structure

The project is structured as follows:

src
├── app
│   ├── confirm-dialog      # Dialog component for confirming product deletion
│   ├── product-dashboard   # Main component for the application
│   ├── product-details     # Component for viewing and editing product details
│   ├── product-list        # Component for viewing a list of products
│   ├── message.service.ts  # Service for displaying messages to the user
│   ├── product.service.ts  # Service for handling product data
│   ├── product.ts          # Product model interface
|   ├── ...
├── assets
├── styles                 # Contains _variables.scss and _mixins.scss as well as a reset file
├── ...

Detailed descriptions of each component and service can be found in each component/service's respective .ts file.

Getting Started

Prerequisites

This project uses the latest LTS versions of Node.js and Angular CLI. You will need to have these installed on your machine to run the project. You can download them here:

Ensure that you have the latest version of node installed by running the following command:

node -v

Installation

Clone the repo (or alternatively download the zip file and extract it)

git clone "https://github.com/tayla-orsmond gendac-proficiency-assessment"

Install NPM packages
```
npm install
```
Run the project
```
ng serve
```
This will run the project in development mode.
Navigate to http://localhost:4200/ in your browser. The application will automatically reload if you change any of the source files.

Running unit tests

Unit tests are available for the confirm-dialog and product-details components.

Run ng test to execute the unit tests via Karma. Due to time constraints, only a few basic unit tests have been written for this project. The tests can be found in the each component's respective .spec.ts file in their respective folders.

tayla-orsmond/gendac-proficiency-assessment