Code Monkey home page Code Monkey logo

kanbandb-app-template's Introduction

KanbanDB App

Kanban Mockup

Pre-interview Assignment Instructions

Greetings!

Hello potential future team member! :D

We're looking forward to having some great days working on creating new projects, debugging issues, planning applications, solving problems, and all of the other fun things we do here in - together with you!

But before that, let's see if you can demonstrate some stock skills you'll need to be successful in this position :) we will discuss this code with you during the hiring process, and it will be tremendously helpful for us in evaluating your skills.

Note: if anything isn't specifically called out here, feel free to be as inventive as you like - no pressure to adhere to any strict rules. Our primary goal is to know that you generally understand web application principles.

Have fun!

Task

Create a Kanban Board application in React - using this template, which is based on create-react-app default template - that meets the below criteria.

You can find instructions and source code for KanbanDB here on Github. This is a "fake" database that uses local storage to emulate something like an ORM, which you can use to perform CRUD operations on Kanban tasks.

  1. Fork this repo on Github
  2. There should be three columns with headers: Todo, In Progress, and Done
  3. Use KanbanDB to perform all "database" operations (KanbanDB is a fake database that uses localStorage, but emulates asynchronocity of a real client, like Firebase)
  4. Cards should have a title/name, a description, and a status
  5. The user should be able to change the status of a card between TODO, IN_PROGRESS, and DONE, and changing the status should cause them to render in their respective columns (i.e. all cards with TODO status should be in column with Todo header)
  6. There should be an Add button that lets you add a new card to the board. Whichever status is chosen, it should show up on that board.
  7. Each card should have a delete button which deletes just that card

BONUS: A card can be edited and saved (.updateCard()).

Note: This project was bootstrapped with Create React App.

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.