Challenge Overview
Challenge Objectives
-
Refactor the existing code based on the requirements below.
-
Implement the second set of screens from the provided storyboard (design) in our existing ReactJs SPA (Single-page Application).
Tech Stack
-
ReactJs
-
TypeScript
-
Less
-
JSON
Supported Browsers / Devices
We are targeting desktop devices and all components are expected to be working flawlessly on the following browsers:
-
Internet Explorer 11
-
Chrome (latest version)
Code Access
Repo: https://gitlab.com/tc-discovery-app/frontend
Branch: develop
The repository is private. You’ll find a self-registration link on the challenge forum that you can use to get access to the repo in case you don’t have already.
Detailed Requirements
As part of this challenge, you need to:
1. Refactor Code (Major requirement)
-
You need to replace the use of Redux for store/state management with the use of Context and Hooks (Ref: https://reactjs.org/docs/context.html. https://hswolff.com/blog/how-to-usecontext-with-usereducer/)
-
CSS Naming must be in BEM style naming convention http://getbem.com/introduction/ Our convention is "ComponentName__Block" "ComponentName__Block--modifier".
-
Please avoid CSS names that describe the style of the element like "grey", "blue", "justify-content" and similar.
-
Replace the use of Axios for API requests with fetch.
-
Refer to the provided document (see challenge forum) for the code styling rules you need to follow and refactor the code based on the provided document.
A sample component has been provided by the client for reference and will be available for download on the challenge forum (available after registration).
2. Implement the second set of pages (Major requirement)
Implement the second set of pages from the provided storyboard.
All screens that are in the scope of this challenge are related to the “Add Related Party” feature (form) of the application. This form gets displayed when clicking the “Add Related Party” button on the existing app.
The storyboard is provided on the challenge forum as a MarvelApp link. Please use the “Handoff” feature from MarvelApp to be able to see the details of each UI element.
-
All screens from the provided storyboard are in the scope of this challenge.
You will find the storyboard (design) attached to the challenge forum.
Please try to match the provided design as close as possible.
Important Notes
-
All components should be created as reusable components.
-
All data should be passed to the components using props. Do not hardcode any data.
-
Action methods should be passed using props.
-
Please use Context and Hooks for state management.
-
Please create sample JSON files for loading data into the application. Do not hardcode anything. We will replace the JSON files with calls to the actual APIs later. You will also find a sample JSON file on the challenge forum that has some example data you need to follow (structure).
-
Follow the best practices for TypeScript ReactJs applications.
-
Make sure you don’t break any of the existing functionality.
-
Properly split your code into containers and components.
-
Use Less for styling.
-
Update any of the existing documentation as needed to reflect the changes made during this challenge.
-
Because our client is using a custom library for various components (eg buttons, checkboxes, select inputs etc), you need to create a custom component for each element so the client will then replace ours with theirs.
Unit Testing
You need to cover the code with unit testing and have a coverage of at least 90%.
What To Submit
Submit a git patch for the latest commit in the develop branch and a txt file with instructions on how to apply your patch file. Make sure to mention the commit you used so the reviewer won’t face any issues applying your patch file.