/frontend-developer-test

Front-end developer test for the Sterling Product Org

Primary LanguageTypeScript

Front-end Developer Test

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

Functional requirements

  • 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

General requirements

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)

Nice to have

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 solution in TypeScript
  • Localization: support for multiple languages (English, French, ...)

What we're looking for

  • 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

Our Stack & Styles

We encourage you to be creative. We don't want technology to limit that creativity. What follows is some detail about our stack and style guide

**It is important to note that you are by no means required to use this stack and feel free to use whichever tools **

Stack

  • Yarn (for package management)
  • React
  • Vue + Vuex
  • Sass

Extra Bonus Points

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