/front-end-challenge

Remote front end challenge

Primary LanguageJavaScript

Toolchain

This is a Next.js project bootstrapped with create-next-app.

Run App

Install packages

npm run install
# or
yarn install

Run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 in your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

User story

When the app first loads an empty state is shown. Employees are added by clicking the Add employee link. Added employees show up in the main page table where there is a link for editing. On saving the forms are redirected back to home page.

Routes

The app contains two routes one which shows the list of employees and other one is the form for adding/editing employee

  • /   ⚛️ Home
  • /employee (Add) and /employee/:id (Edit)   ⚛️ Employee

Database

Uses browser based Indexed DB for persisting data.

Tests

Automated tests are in the tests folder.

To execute the tests, first ensure that the development server is up and running, then run

npm run test
#or
yarn test

The tests run in an headless browser by default, but to see it in action change headless on line 17 to false and comment out afterAll(async () => await browser.close()); on last line.

IMPLEMENTATION NOTES

  • The employee table is sorted based on creation time, last added appears on top.
  • On smaller viewports the table will be showing scrollbars.