Front-end Challenge
Functional requirements
Build a user interface to view a list of financial transactions for a user. Your approach should be user focused with a simple to use interface that displays all the needed information concisely.
The user should be able to do the following:
- See their transactions for multiple accounts under a single list.
- Filter their transactions by account.
- Filter their transactions by multiple categories.
- Sort their transactions from most recent to oldest and vice versa.
- See their total balance across all accounts.
- Reset all applied filters.
Non-functional requirements
- Your code should be a hosted on Github with periodic commits instead of one large commit. Make sure your commit messages are clear and understandable.
- The UI should be nicely designed and easy to use
API
GET http://demo7235469.mockable.io/transactions
Returns a list of accounts, categories, and transactions. Use this data to construct your UI. We recommend spending a few minutes analyzing the returned data before writing code.
Remarks
- Use this challenge to display your creativity and development skills.
- Feel free to use any boilerplates or frameworks as long as you can explain why you used one. If you have your own proejcts or starter kits feel free to use them.
- Component based code with a functional approach is preferred.
- Don't hesitate to ask any questions regarding the challenge.
Bonus (optional)
- Filter transactions by a "from" and "to" date (ex. January 1st 2017 to January 18th 2017)
- Animations, transitions, other interactivity
- Unit tests applied to your code
- Responsive design
Useful Links
- Create React App starter kit
- Dribbble transactions UI examples for inspiration
Good luck
We wish you the best of luck and can't wait to see what you create!