Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/anastasia-a-zhivaeva/payment-terminal.front

Test exam on frontend developer vacancy. Payment terminal for the cell providers.
https://github.com/anastasia-a-zhivaeva/payment-terminal.front

angular e2e-testing interview material unit-testing

Last synced: about 2 hours ago
JSON representation

Test exam on frontend developer vacancy. Payment terminal for the cell providers.

Awesome Lists containing this project

README 

        
# Payment terminal for Cell providers



[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)



## Test exam on frontend developer vacancy



After providing the code to the company, I continued working on it to practice development skills.



The guidance for the test task



For resolving the task it is allowed and necessary to use any frameworks and components which would save your time and allow to solve the task optimally. However, we ask you to provide short description of frameworks or libraries that were used and what for.



#### Practical test



- We dont have full detailed requirements to the system functionality here as they are not necessary in this task and you are allowed to make certain assumptions. The purpose of this task is to assess your practice skills of developing and designing the client part of web applications.

- All calls to the API / server-side must be mocked.

- We dont provide design of the screens here, so the level of design / pixel perfect layout will not be evaluated here.

- The layout of all screens must be adaptive - to support different sizes of device screens, including mobile screens.

- Big advantage would be to think through and design corresponding toolset to support future scalability of the project



#### Payment terminal for the cell providers



Develop (HTML/CSS-coding and implement client-side logic) application interface for the terminal providing the service of refilling the balance of cellular operators. The application should have the following screens / basic input and control elements:



1. Main screen



- The list of supported telecom operators: MTS, Beeline, Megafon (implement flexibility to extend list of supported operators).

- Click on certain operator should redirect to the refilling screen.



2. Refill balance form



- Identifier of the selected operator

- Phone number input field (with mask and validation)

- The field for entering the amount of refill in rubles (with mask and validation, min possible amount - 1 rub, max - 1000 rubles)

- Submit button - should wait for a response from the server, show a message about the success or error. In case of success, return to the main screen. Success and error should be implemented randomly.



#### Comments



The result of your work should be published here, on github. You should send us link to github repository with source code and a link to the working version of the app (for this you can use github pages or any other hosting).



This is the [board](https://github.com/users/anastasia-a-zhivaeva/projects/2) of this project where you can check the progress. \

The version 1.0.0 is what was provided as a result of test exam.



This repository uses [conventional commits](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-commit-message-format) and [semantic release](https://github.com/semantic-release/semantic-release).



## Angular CLI README Information



This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.6.



## 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).