Welcome to the coding challenge for frontend candidates at Peach Finance! You will find your prompt below, followed by instructions to get you up and running.
PeachyTasks has gained a lot of users and they've started requesting new features and reporting bugs. You are to fix the defects and implement any new features as specified, according to provided mockups.
All work should be done on the frontend only — do not modify the API.
When a user marks a task as "done" it should be shown under "Done" tasks without refreshing the page.
Users need a way to move tasks they don't need anymore to the trash.
- Add "trash" button to each Task; when clicked:
- DELETE
/api/tasks/${id}to move the Task to the trash - Update task lists to reflect new API state
- DELETE
- Add "trash" menu item to the top navigation
- Shows count of tasks in the trash
- On click, show a modal with information about the trash
- List all tasks in the trash
- GET
/api/trashto list tasks in the trash
- GET
- Include "empty trash" button; when clicked:
- DELETE
/api/trashto empty the trash - Update task lists + trash to reflect new API state
- Dismiss the modal
- DELETE
- List all tasks in the trash
- Change frontend code only
- Use styled-components or plain CSS for styling
- Add any (non-styling-related) external libraries you need
- Node.js v14.17.0 or later
- yarn - recommended
yarn setupyarn dev
npm i && npx prisma generate && npx prisma migrate devnpm run dev
If you're completing the Frontend Challenge, you don't need to read any further.
- SQLite is used for simplicity + portability
- Prisma is used for ORM
- Schema updates can be made in
prisma/schema.prisma. See the Prisma schema reference for more information. - Generate artifacts and run migrations after making changes:
yarn prisma generateyarn prisma migrate dev
- For more information, see the Prisma CLI reference