Frontend assessment source code
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. ## Notes
  2. - The app is deployed to test.onyeka.ca
  3. - I updated react and other packages because 16.7 was being used, and hooks are
  4. now the simplified method of managing state in react.
  5. ### TODO
  6. - Add date seperators to calls
  7. - Sort calls by descending dates
  8. - Add missed and voicemail icons to represent status
  9. - Give call entries shine and box shadow. Maybe color them by type
  10. - Add entry transition animation
  11. - Add favicon
  12. - Seperator could be added by putting li renderer in a seperate function from
  13. Feed
  14. ## Summary
  15. The goal of this test is to make you code a small ReactJS app. We have prepared a skeleton app for you, but please change whatever you want (CSS files, HTML structure, JS structure, etc).
  16. The app will have two different components:
  17. - **Activity Feed** - simple list of calls
  18. - **Activity Detail** - detail of a call
  19. - **Archive** - the final user should be able to archive (and unarchive) a call. Archived calls will no longer be displayed on the Activity Feed and should have a separate Archived Tab.
  20. Show us what you can do in 24 hours. You will be assessed on the following parameters:
  21. - Focus on design (Pay attention to the UI/UX and transitions)
  22. - Best React Practices
  23. - Code Readability and Maintainability
  24. ## Submission
  25. After you're done with the assignment, please submit a link to the **GitHub/Bitbucket repository** (make sure it's public) with your code **AND** a deployment link where our recruiters can interact with the live version. You can use freely available tools like **Netlify, Vercel, Heroku, etc** to deploy your React application.
  26. You should email both the links to our recruiters with the subject line **Full Stack Developer Assessment - [Your Name]**
  27. **Note:** Submissions without a valid repository and deployment link will be removed from any further consideration.
  28. To give you an idea, here's what our app looks like:
  29. ![app](https://user-images.githubusercontent.com/630714/29357034-763d7216-8276-11e7-8bcb-e77d9645dfcc.png)
  30. ## Installation
  31. We're using [yarn](https://yarnpkg.com) here (but you can use npm):
  32. ```
  33. yarn install
  34. yarn start
  35. ```
  36. ## API documentation
  37. ### Routes
  38. Here is the API address: https://aircall-job.herokuapp.com.
  39. As you can see, it's hosted on a free Heroku server, which means that the first time you will fetch the API, it will take few seconds to answer.
  40. - **GET** - https://aircall-job.herokuapp.com/activities: get calls to display in the Activity Feed
  41. - **GET** - https://aircall-job.herokuapp.com/activities/:id: retrieve a specific call details
  42. - **POST** - https://aircall-job.herokuapp.com/activities/:id: update a call. The only field updatable is `is_archived (bool)`. You'll need to send a JSON in the request body:
  43. ```
  44. {
  45. is_archived: true
  46. }
  47. ```
  48. - **GET** - https://aircall-job.herokuapp.com/reset: Reset all calls to initial state (usefull if you archived all calls).
  49. ### Call object
  50. - **id** - unique ID of call
  51. - **created_at** - creation date
  52. - **direction** - `inbound` or `outbound` call
  53. - **from** - caller's number
  54. - **to** - callee's number
  55. - **via** - Aircall number used for the call
  56. - **duration** - duration of a call (in seconds)
  57. - **is_archived** - call is archived or not
  58. - **call_type** - can be a `missed`, `answered` or `voicemail` call.