Brief description

• How long did it take?

It took around 24h. I did it intermittently in my free time, with continuous work it might take less time.

• Which part was the hardest to implement?

The hardest part was creating file uploading.

• What functionalities are you most proud of?

File uploading, reusable component, test coverage

Used libraries:

• React
• Redux
• Redux-saga
• reselect
• styled-components
• react-intl

Changes in API:

• save category

Additional implemented features

• drag and drop for receipt loading
• receipt's category editing
• currency filter based on loaded expenses currencies

What I would like to improve:

• add a full preview for receipts
• increase test coverage
• add routing for expense view and edit
• add TS (I have basic knowledge, but would like to improve it)

Run app

open ./api folder and run

yarn install
yarn start

or

npm install
npm start

open ./client folder in separate window and run

yarn install
yarn start

or

npm install
npm start

Front-end challenge

Implement an expenses list fetching all expenses from the provided API. Allow the user to add notes and upload receipt pictures to each expense.

See the API details for implementation.

Functional requirements

• User can list expenses
• User can add a comment on an expense
• User can filter on expenses (client side filters)
• User can add a receipt image on an expense

General requirements

A single page application using a modern JS library/framework including:

• 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.
• 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?

Nice to have

Want to go the extra mile? Here's few suggestion of things we'd like to see (or go crazy and implement what you think will impress us).

• Responsive design
• Implement with a state management library (Redux, Mobx, VueX, ...)
• 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)
• Showing your work through your commit history
• Polish and visual creativity
• Pride in craftsmanship

A few last things 👇

• Please note that while you are free to use libraries of your choosing, we encourage you to write at least some your own code. This is your chance to really impress us with your skills.
• You are welcome to make changes to the API code if you think it will improve your solution