This is an application where user can input employee data (annual salary, super rate, etc.) and get a payslip on a separate page. The application is a single page application made on top of React and Next.js.
The complete task is located here: https://docs.google.com/document/d/1gSB-NJh4yIPLnEMNVBTawo7444rZkfIVyq0icxWEv9s
- Install Node.js.
- Open a terminal and go to an empty directory where you want to install the application.
- Download the code
git clone https://github.com/Finesse/test-task-employee-payslip.git .
- Install the dependencies
npm install
- Start the application
npm run build npm run start
- Open http://localhost:3000 in your browser.
- Press Ctrl+C in the terminal to stop the application.
First name | Last name | Annual salary | Super rate (%) | Payment start date |
---|---|---|---|---|
Andrew | Smith | 60050 | 9 | Match 1, 2018 |
Name | Pay period | Gross income | Income tax | Net income | Super amount |
---|---|---|---|---|---|
Andrew Smith | 01 March โ 31 March | 5004 | 922 | 4082 | 450 |
First name | Last name | Annual salary | Super rate (%) | Payment start date |
---|---|---|---|---|
John | Doe | 130000 | 2 | April 1, 2018 |
Name | Pay period | Gross income | Income tax | Net income | Super amount |
---|---|---|---|---|---|
John Doe | 01 April โ 30 April | 10833 | 2978 | 7855 | 217 |
The application architecture fully inherits the suggested Next.js architecture. The pages root React components are located in the pages directory. All the other React components are located in the components directory. The pure business logic code is located in the models directory.
The form input data is passed to the result page using the React Context API. The pages/_app.js file, which contains a parent React component for all the pages, creates a context provider. The form on the index page consumes the context, calls it's function to set an employee data to the context and just redirects the user. In its turn, the result page consumes the context and uses it's data to display a payslip.
The form component uses the React Form package to control the inputs state.
To start a development version of the application, run
npm run dev
It will enable hot reload so when you edit a file, changes will appear on the browser page without a page reload.