Giter VIP home page Giter VIP logo

screening-test-frontend's Introduction

Screenshot

Project Overview

This project implements Kanban Board as a front-end web app like GitHub's Projects feature. Kanban board has several columns, and there are several cards in each column.

The Task

All of the features in the required features must be implemented. Choose items you want to add from advanced features and implement as many as possible. Focus on implementing the function rather than making it beautiful.

Required features

  • React
  • Built with SPA (Single Page Application)
  • Boilerplate, UI Kit can be customized according to your preference.

Model: Column

  • Required fields: Name, Order

Model: Card

  • Required fields: Name, Description, Created date, Status(Open, Closed), Order

User Stories

  • User can add column with name
  • User can modify column name
  • User can delete empty column
  • User can move columns by drag & drop
  • User can add card to column with name and description
  • User can modify card details
  • User can identify / switch status of card
  • User can move / order card by drag & drop
  • User can archive card

Advanced features

  • Test codes
  • Graceful error handling

Structure

  • Multiple boards
  • More fields such as author, labels, assignee, comments, protected
  • i18n feature

PWA

  • Add to Homescreen with an icon
  • Persistent storage (by any method) to preserve state after refresh
  • Push notification when a new card created

Performance

  • Windowing list (react-window, react-virtualized) when rendering lots of cards
  • Code splitting and lazy loading

Design

  • RWD(Responsive Web Design) for desktop/mobile
  • Show description when list is empty
  • 404 Page if url is not valid

UX

  • Auto focus on initial state
  • Input Validation

screening-test-frontend's People

Contributors

hanjukim avatar gregnuj avatar

Watchers

Kryton  avatar Karim Agha avatar Frank Dai avatar William C. D. Chen avatar  avatar Do Kwon avatar Jesse Chung avatar  avatar Carlos avatar crypto.nomad avatar Lukasz Maslanka avatar sg avatar Jade Kim avatar Terence Lim avatar Djordje Simovic avatar  avatar Lim SangHyun(Blue) avatar Bryce Pratt avatar Vlad J avatar yys avatar CTO avatar  avatar  avatar

screening-test-frontend's Issues

git fatal error "repository not found"

@hanjukim I have trouble to "git push".

Please check the permission.

10:38:32.659: [terra-test-frontend] git -c core.quotepath=false -c log.showSignature=false push --progress --porcelain origin refs/heads/master:master
remote: Repository not found.
fatal: repository 'https://github.com/terra-project/screening-test-frontend.git/' not found

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.