Please, read following instructions and let us know if anything is not clear.
- Use any npm package you find appropriate.
- Ask questions when in doubt what we expect.
- When you are not able to solve something in reasonable amount of time, write an explanation of why (what knowledge is missing, why it needs so much time, etc.), and skip it.
- Follow all code quality principles you know and are used to.
- You should not spend with our assignment more than 6 hours. When this is not doable, choose what to implement and what not to.
- Send us your work preferably as a link to git repository (e.g. GitHub).
- First read the assigment, check the provided code, and make clear you understand what we ask for.
- Try to estimate the time you require to finish it.
- Email us your estimation and a date, where you expect the work to be done. Aim for realistic date and keep in mind all other responsibilities you may have (your current work, family duties, vacation or public holidays)
More information about client are in client/README.md
. Make sure you read them.
Using provided UI components, implement following modifications, bugfixes or new features (you can decide in what order):
- B1: Fix all bugs and visual imperfections you find
- B2: Fix layout of non-empty
List
component - B3: Fix Layout component so the
Footer
is always attached to its bottom - UI1: Style
Header
so the button is aligned on the right - UI2: Style
ListItem
so action buttons are aligned on the right - UI3: Style
ListItem
so the action buttons are only visible when hovering over the item - F1: Modify
Footer
to show 0 when no value(s) were passed - F2: After button in header is clicked, show
Form
component in theHeader
instead of the clicked button. If the Form is submitted, a new list should be saved on backend and list of all items updated - F3: When edit button on todo item is clicked, the row should be replaced by the
Form
component (same as for creating new todo item) - F4: Load items from API
- Implement removing todo item
- Implement saving "checked" state of a todo item when changed
- Persist all changes, additions and removals of todo items on server using API calls
- F5: Sort list of todo items so the done (=checked) items are on the bottom; next sort items by creating date, descending
- F6: Show number of todo/done items in
Footer
- F7: Create a
Button
component and use it instead of allbutton
html elements - SB1: Add story/stories for
Layout
component - SB2: Add story showing
ListItem
with visible buttons (implemented in UI3) - SB3: Add stories showing available
Button
variations
- S1: Implement custom endpoint for marking single todo item as "done". Calling this endpoint sets
done
field totrue
andfinishedAt
field sets to current time. Use this new endpoint on client
- O1: modify the
Form
component (and related ones if needed) so the form field handles not only string, but also number and treat empty string input asundefiened
- O2: limit amount of server calls needed to necessary minimum
- do not modify API (props) of provided components unless achieving required tasks would not be possible otherwise,
- do not use any component library like Material UI; do not use Tailwind,
- feel free to do any other visual modifications that - in your opinion - makes it looking nicer,
- feel free to install and use any public package you may need
- do your best to use atomic commits
- in each commit that solves (fully or partly) one of the tasks above, add tasks id into commit message. For example: B1: fix typo in ...
- We use Storybook format CSF3, but you can use older version of CSF that you are familiar with
- If you are not familiar with Storybook at all: try at least the SB2 task; it should be doable only by copying and modifying the already existing story