Giter VIP home page Giter VIP logo

frontend-take-home-assignment's Introduction

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.

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.

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 [email protected] and [email protected]

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

frontend-take-home-assignment's People

Contributors

khangnguyen2100 avatar bismuth1991 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.