Implement an payments list fetching all payments from the provided API. Allow the user to add notes and image-upload a receipt to each payment.
The api/ folder contains more detail on starting up the API locally and its implementation
- User can view a list of their payments
- User can add a comment on an payment
- User can filter payments (client side filters)
- User can upload and add an image of a receipt to an payment
A single page application using a modern JS library/framework (React/Vue/Angular) featuring:
- A visually pleasing experience, you don’t have to be a designer but you must have put an effort into making this look good
- A "componentized" approach, split your code into small building blocks, showcase your clean architecture skills.
- CSS can be written using PostCSS, SASS, LESS or similar higher-level language
- The use of any libraries or frameworks as long as you can explain to us why you chose them. (in your project README.md)
- A brief description of your project. How long did it take? Which part was the hardest to implement? What functionalities are you most proud of? (in your project README.md)
Want to go the extra mile? Here's few suggestion of things we'd like to see (or feel free to just go crazy and implement what you think will impress us).
- Responsive design
- Implement with a state management library (VueX, Redux, Mobx, ...)
- Implement your solution in TypeScript
- Localization: support for multiple languages (English, French, ...)
- Using high-quality existing libraries or small amounts of custom code
- Production grade code (clean, maintainable, reusable code)
- A detailed commit history shows your progress towards your final implementation
- Polish and visual creativity
- Pride in craftsmanship
We encourage you to be creative. We don't want technology to limit that creativity. What follows is some detail about the tech stack we use.
It is important to note that you are by no means required to use this stack and feel free to use whichever tools
- Yarn (for package management)
- React + redux || Vue + Vuex
- Sass
The following items will earn you bonus points. They are not requirements, the challenge is 100% completeable without them.
- Use our stack
- Include animation / Micro-interactions
When you feel you're ready to submit, simply share a link to your github repo with a member of the product org team; or whoever first contacted you. Please make sure your repo is set to public otherwise we won't be able to see all your hard work!
please try to submit the included api/ folder as is, in the root folder of your repo. This let's us start up the API quickly before taking a look at your work.
Finally, we'd like to say Good luck! And have fun!