asincole / frontend-developer-test

Front-end developer test for the Sterling Product Org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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 your 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 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

Stack

  • Yarn (for package management)
  • React + redux || 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

Submission

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!

About

Front-end developer test for the Sterling Product Org


Languages

Language:TypeScript 80.0%Language:CSS 13.5%Language:HTML 5.0%Language:JavaScript 1.4%