khangnguyen2100 / frontend-take-home-assignment

Front-end take-home assignment

Context

You are building UI for a Todo List App that has the following features:

1. Create a new todo
2. See & filter todos based on their statuses
3. Delete a todo

Overview

This take-home assignment aims to assess the followings:

• Your competence in Javascript/TypeScript, React & their ecosystem
• Your HTML/CSS skills as well as your ability to follow the design
• Your ability to follow instructions
• Your ability to adapt to a new codebase
• Your ability to read documentations
• Your ability to learn new things
• Your ability to "Google" & "Stackoverflow" your way to the answers

Set-up

1. Clone the repo to your computer
2. Run yarn install
3. Run yarn db:push
4. Run yarn dev
5. Visit http://localhost:3000

NOTE: Though not compulsory, it's highly recommend that you use VSCode, with the following Extensions:

• ESLint (enabled)
• Prettier (disabled)
• Tailwind CSS IntelliSense (enabled)

Instructions

You will be strictly working on & making changes to the following files below. Do not create new files or make any changes to any other files in the repo.

• src/client/components/CreateTodoForm.tsx
• src/client/components/TodoList.tsx
• src/pages/index.tsx
• README.md

There are 6 questions in total. Though not enforced, we highly recommend that you do them in order. There are further instructions embeded in the questions.

• Question 1
• Question 2
• Question 3
• Question 4
• Question 5
• Question 6

Questions 1, 3, 4 and 6 will require you to build/make changes to the UI base on design on Figma. You can view it via the link below. You must have a Figma account (free) in order to use it effectively.

• https://www.figma.com/file/z0g8tEGAMIooVA0nZjjDDY/Todo-test?node-id=0%3A1&mode=dev

NOTE: if the links to the questions do not work, you can find them in the following files

• src/client/components/CreateTodoForm.tsx (Questions 1, 2)
• src/client/components/TodoList.tsx (Questions 3, 4, 5)
• src/pages/index.tsx (Question 6)

After you finish the test, do a self-assessment by completing the checklist in the Checklist section below.

Finally, publish the finished repo to your Github, then send the url to the repo via email to [e-mail] and [e-mail]

Checklist

• Finish Question 1
• Finish Question 2
• Finish Question 3
• Finish Question 4
• Finish Question 5
• Finish Question 6
• Run yarn lint with no errors
• Run yarn type-check with no errors