neumann-d / join-react-test

Candidate Application & Score Calculator

Context

We love to give visual feedback to the recruiters about where their candidate stand in their pipeline. Proposed solution consists of 2 screens:

1. The applicant screen - filling it in will send the application to the server
2. The candidate list screen - where all existing and new candidates can be viewed (reflecting input from the previous screen)

This app needs to display the list of candidates taken from this API: GET https://candidates.free.beeceptor.com/api/candidate (If API is not available, use file located in this repository under /data/candidates.json) and send a local request instead.

Design

Screens are provided in /data folder for reference, it doesn't have to look identical, just a visual reference, you can use Material or Bootstrap for UI components

Requirements

As a Candidate:

• I want to be able to provide my data in application form without any field being required
• [OPTIONAL] I want to be able to upload my photo

As a Recruiter:

• I want to be able to view a list of my candidates
• For each application calculate score:
  • Up to 10% if full name provided
  • 10% if email provided
  • 10% if password provided
  • 20% if phone provided
  • [OPTIONAL] 50% if image uploaded (calculate accordingly if implemented or not)
• I want by clicking on the "..." menu, be able to "delete" the candidate (hide from display)
• I want by clicking on the "..." menu, be able to change candidate state from "submitted" to "in review" to either "not a fit" or "hired"

Technical Notes

There's no restriction to backend technology, you can e.g.:

• utilize localStorage for candidate data storage (as your backend) and merge it with existing API data
• spin up a NodeJS server

If the external API is too slow, make sure it's not visible or felt by the user, find a way to make load/wait time a pleasure.

Tech Stack

Use ReactJS with TypeScript, test your code with a preferred library of your choice, also feel free to choose either unit tests or E2E tests with Cypress Linter, CSSinJS is a plus

Instructions

• Fork this repo
• Commit early and often. We want to be able to check your way of thinking
• Make the app public. Deploy it using the service of your choice (ZEIT, Cloud Run, Heroku)
• Create a pull request

Disclaimer

You don't have to finish all of that, but we would really love to see a working piece. What's more important for us is to see your way of thinking and priority on tasks during implementation!

Solution

This project was bootstrapped with Create React App.

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.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

npm run deploy

Deployment setup (uses existing firebase.json of this project):

$ firebase login
$ firebase use YOUR_FIREBASE_PROJECT_NAME

This app is deployed to Google Firebase: https://join-react-test.web.app

Candidates Data

All candidates data is stored in local storage of the browser. To refetch initial data from API, just delete the data with key candidates from local storage.