Challenge Overview
CHALLENGE OBJECTIVES
PROJECT BACKGROUND
TECHNOLOGY STACK
API INTEGRATION
Although the API is not ready yet, you need to implement all actions/services required to fetch the data showing in the app from JSON files and storing the data in the Redux store. We should be able to replace the JSON files with actual API calls to integrate the app with the backend without much effort.
SCREEN REQUIREMENTS
Only the following screens from the marvel app are in scope of this challenge, the others will be done in the next challenge(s). We’ll provide design source file which contains full design.
In summary these are the screens to be implemented, but double check the design to make sure you have included all of them in your implementation.
GENERAL REQUIREMENTS
CODE REQUIREMENTS
JAVASCRIPT REQUIREMENTS
LICENSES & ATTRIBUTION
BROWSER REQUIREMENTS
- Build the desktop admin prototype for the IFA Onboarding app.
PROJECT BACKGROUND
- Our client is a financial service provider which is planning a strategic move towards increasing collaboration with independent financial advisors (IFAs). The idea is to let the clients of IFAs to use the infrastructure of our client. The admin tool for IFAs can be used to facilitate all the tasks they need to perform concerning the onboarding process of the end users.
- The admin tool is similar to google forms, in which IFAs can create different kinds of forms to be filled out by end users.
- In this challenge we are just building the admin tool prototype which is to be used by IFAs, the prototype to be used by end users will be built in subsequent challenges.
TECHNOLOGY STACK
- ReactJS
- Redux
- HTML5
- Javascript
- CSS
API INTEGRATION
Although the API is not ready yet, you need to implement all actions/services required to fetch the data showing in the app from JSON files and storing the data in the Redux store. We should be able to replace the JSON files with actual API calls to integrate the app with the backend without much effort.
SCREEN REQUIREMENTS
Only the following screens from the marvel app are in scope of this challenge, the others will be done in the next challenge(s). We’ll provide design source file which contains full design.
In summary these are the screens to be implemented, but double check the design to make sure you have included all of them in your implementation.
- Login (screens 00 to 02)
- We have a simple login form for the IFA. We assume that they are already users of the system, so no sign-up feature is needed for now.
- Forget Password is out of scope for now.
- Form List (screens 07 to 13)
- You’d see lists of created forms in different statuses along with some other statistics. And from this page you can duplicate / edit / delete / add / sync forms, features like search / filter / assign form to customer etc also needs to be functioning.
- Form Creation (screens 14 to 51)
- The IFA should be able to create forms with different content.
- The forms can contain different input controls like textboxes, selects, dropdowns, etc. Make sure all the controls shown in the design are supported during form creation.
- There should be two buttons: Save and Publish. Save will save the form as draft and Publish will make the form finalized and ready to be assigned to customers.
- Form creation using drag and drop is not in scope for now.
GENERAL REQUIREMENTS
- Must use ReactJS and follow the provided design.
- The main content should have fluid width to fill all the available space, the minimum supported resolution is 1280*800.
- Pagination should work whenever applicable.
- Filtering/pagination happens on the server side so you need to pass the query parameters and the server is expected to return the pagination info (pageSize, total etc).
- Implement popup for confirmation and warning messages. Do NOT use browser alerts, but use custom styles popups like the ones we have in the prototype
- Show loading spinners when populating data from API / local JSON to UI
- Implement validation errors (for example: login error as shown in design)
- No linting errors
- No errors with prod builds
- You are expected to create a detailed README file including information on how to setup, run and verify your application.
CODE REQUIREMENTS
- ES6 syntax is preferred, as Babel has been setup to handle transpiling the syntax to the current JavaScript standard.
- Use .jsx extension for React components; using PascalCase for filenames. E.g., ComponentName/index.jsx.
- Do not create a single .css/.scss file for the whole app. Each component should have its own stylesheet file.
- Ensure that there are no lint errors.
- You’re free to choose between CSS & SCSS but you need to use flex instead of float.
- Follow a clean folder structure.
- Create reusable components.
JAVASCRIPT REQUIREMENTS
- All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- Use typescript and linter for code quality
LICENSES & ATTRIBUTION
- Third-party assets used to build your item must be properly licensed and free for commercial use. MIT and Apache v2 licenses are ok, for any others please check with us to get approval first.
- Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.
BROWSER REQUIREMENTS
- Windows: IE 11+, Chrome Latest, Firefox Latest
- Mac: Safari Latest, Chrome Latest, Firefox Latest
Final Submission Guidelines
FINAL DELIVERABLES- Full code that covers all the requirements.
- A detailed README file including information on how to setup and run your application.