Koplio is a simple clone of Trello, built entirely using vanilla Javascript and Web Components without external libraries. The API server used for the backend is a json-server that is watching a json file: db.json.

Some scripts are added to package.json to allow easy starting and running the application. See Installation for more information.

To start the server on a Mac, run npm start in your terminal console.

For other Operating Systems, see below:

• Mac: npm run startMac
• Windows: npm run startWindows
• Linux: npm run startLinux

To serve the server on your machine, listening to 0.0.0.0, port 8000, run npm run serve in your terminal console. Note: Modify host.js to point to your API server if it is not running on http://localhost:3000

To serve the json-server over network, run npm run startServer in your terminal console.

It will open the index.html file on your default browser, and start the json-server API server. Starting the server might take some time as it is scripted to use npx to download and run immediately so there will be some download time involved.

Trello Columns within a board are implemented in a similar but simplified manner. Basic CRUD operations on the columns are supported.

Parameters of Columns:

• title (required): Title of the column. Empty title will default to 'Untitled Column'

Supported Operations:

• List all columns
• Add/Create card column
• Modify column
• Delete column

Cards can be managed within columns. Basic CRUD operations on the cards as well as some extended operations are supported.

Parameters of Cards:

• title (required): Title of the card. Empty title will default to 'Untitled Card'
• description (optional): Multiline description of the card

Supported Operations:

• List all cards
• Add/Create new card
• Modify card
• Delete card
• Move card to another column (Drag and Drop)
• Search/Filter cards (based on title and description, case-insensitive)

The Title Label for Koplio

The Web component for the searchbar to search and filter cards.

onSearchText:(text) => {}: Callback method triggered on textbox text change.

The body for columns and cards. This container is horizontally scrollable with custom-styled scrollbar.

columns:Array - Array of Container Column components.

search(text) - Search and Filter content within component

A column container to store card data. This container has a width of 250px and expands vertically as more data are added to the container, allowing a seamless view on mobile.

search(text) - Search and Filter content within component

A temporary column used to add new columns.

onAddColumn:(title) => {} - Callback method on column add

Data column with card components inside.

columnId:Number - Id of the column ondelete:() => {} - Callback method on column delete

search(text) - Search and Filter content within component

Title Label for the column. This title comes from column.title.

Component to display card information. This component allows click to expand for card data modification.

card:Object - Card data as obtained by API, see Cards onsave:(card) => {} - Callback method on card information change save ondelete:(card) => {} - Callback method on card delete

searchOk(text) - Search and Filter card content (title and description) within component, case-insensitive

A temporary card used to add new cards

onadd:(card) => {} - Callback method on card add

{
    id: Number,
    title: String
}

{
    id: Number,
    title: String,
    description: String,
    columnId: Number (key for Column object)
}