🚀 Crewmeister Challenge

This project was bootstrapped with Create React App. Read the readme for further instructions on running the project, project's conventions, tech stack, tech decisions.

React was picked instead of Next because there was no need for SEO or SSR for this project.

Summary

• Context
• Tech Stack
• Product Requirements
• Enhancements
• Improvements
• Testing
• Git Convention
• How to run project locally
• Folders structure

Context

---

At Crewmeister we like to work closely with our clients, listening to their demands and developing solutions for their problems. One of the most requested features is a way for company owners to manage sickness and vacations of employees.

We decided to implement this feature for our clients and we are calling it the Absence Manager.

Vercel App

Heroku Api

Api Repository

Figma

💻 Tech Stack

---

• React
• Tests: Jest + react-testing-library
• ESLint + Prettier + Husky + Staged-lint
• Redux + RTK and RTK Query
• Typescript.
• StyledComponents
• Mock Service Worker

📝 Product Requirements

---

• 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.
• I can generate an iCal file and import it into outlook. (Bonux)

🪄 Enhancements

---

A list of enhancements made that were not included in the initial product deliverable especifications or tech requirements, but were implemented to enhance the product further.

• Backend implementation with Node.
• Api mock for testing with Mock Server Worker.
• Theme based styles with styled-components.
• Figma first sketch with the color palette, dark/light theme and assets.
• Mobile first responsive implementation.
• Absences filtering through both type and date range at the same time.
• It retrieves all absences when date range is incomplete.
• Login proposal within figma.

💡Improvements

---

A list of nice to haves or technical and functional improvements to enhance the product or module on next iterations.

• Information Modal: Add a modal to show more information about the absence entry upon clicking on it. Specially for mobile.
• Toast: Add a toast for success or error messages.
• Internacionalization: Implement i18n for internatitonalization.
• UI framework: Include either Material UI or Chakra UI to keep a consistent and accesible UI throughout the application and different product modules or build a custom design system with reusable components from scratch with company's brand.
• React hook form: Implemente RHF to better handle table and form states.
• React Query: to manage server state data. It uses a stale while revalidating approach to access cache data while it revalidates it asynchronously making the client state managament small. This reduces the boilerplate that comes with Redux, and it is more efficient when it comes to handling server state data.
• Stylelint: Add a style linter as well for rules and improve code quality.
• Storybook: Add interactive documentation to describe components behaviour.
• React error boundary: Implement react-error-boundary to handle errors within the app and have a smoother UX experience.

💬 Convention

---

Following commitizen convention every commit is in active voice with one of these prefix: chore, feat, fix, docs, tests. For branch names the following convention is set:

feat|fix|chore|tests/#ticket__description

Commit messages have the following structure:

feat|fix|chore|tests: [#ticket-number] summary

For every ticket or task a branch is made and then a pull request open. Once is approved, it is merge through squash a merge to keep the commit tree clean.

🧪 Testing

---

Both unit and integration testing were implemented. As Guillermo Rauch said: Write tests. Not too many. Mostly integration.

Disclaimer: The test time is due to the delay set for the mocked api and endpoints responses. Ideally, all business logic inside the absence service should be in a backend and and then use jest.mock to mock the servers' response.

⚙️ How to run project locally

You need to add an env:

REACT_APP_API_URL=https://absences-api.herokuapp.com

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

🗂 Folders Architecture

---

src
│
└──components
│     └──index.ts
│     └──__tests__
│     └──App
│     └──Input
│     └──Text
│     └──Button
│     └──etc
└──screens
│     └── index.ts
│     └── __tests__
│     └──MyScreenComponent
│           └──assets // Screen specific app assets
│           └──components
│           └──constants.ts
│           └──utils.ts
│           └──index.tsx
│           └──types.ts
│
└───assets // General app assets
└───models
└───interfaces // General app interfaces
└───constants
    | routes.ts
└───store
│      └───user // Specific state for the user
│      └──index.ts // Global state & reducer
│      └──types.ts
│      └──actions.ts
│
└───services
│     └──__tests__
│     └──MyScreenComponent
│           └── utils.ts
│           └──index.tsx
│
└───utils
│     └──index.ts // Entry point
│     └──__tests__