Crewmeister coding challenge - Frontend (React)

📜 Description

This project is a simple solution for company owners to manage sickness and vacations of employees

🌐 Links

• Deployed application on Heroku
• Api (mock server) - digitalocean

🎯 Product Requirements And Features

• I want to see a list of absences including the names of the employees
• I want to see the first 10 absences, with the ability to paginate
• I want to see a total number of absences
• For each absence I want to see:
  • Member name
  • Type of absence
  • Period
  • Member note (when available)
  • Status (can be 'Requested', 'Confirmed' or 'Rejected')
  • Admitter note (when available)
• I want to filter absences by type
• I want to filter absences by date
• I want to see a loading state until the list is available
• I want to see an error state if the list is unavailable
• I want to see an empty state if there are no results
• (Bonus) I can generate an iCal file and save it
• (Feature) As an admitter I want to confirm or reject an absence request

💻 Tech Requirements

• React
• Tests: Jest + react-testing-library / enzyme
• Code Linter
• Redux is a plus
• Typescript is a plus
• CSSinJS is a plus: styled-components, styled-system

UI

I want to see the absences list with pagination

I want to see an error state if the list is unavailable

I want to see a loading state until the list is available

I want to see an empty state if there are no results

Pre-requisites

• Install Node.js

🔨 Running Code (server)

To run program, run the following command.

1. Use the terminal to execute the following commands (Run mock server):
   • cd api to go to directory api (folder) (mock server)
   • npm install or yarn install to install the dependencies for mock server
   • node server.js to run mock server

🔨 Running Code (react)

To run program, run the following command.

1. Use the terminal to execute the following commands:

   • npm install or yarn install to install the dependencies for react application
   • npm start to start the the application

2. Open your browser on http://localhost:3000 to see the page

🔨 Running Test (react)

1. To run tests, run the following command.

  npm run test

Author

• @Ismail Hocine

✔️ Prerequisites

• Node.js 16