waterrmalann/kards

🗒 A simple cards-based kanban board app inspired by Trello in pure vanilla JS.

Hey 👋, I'm Alan :)

I'm a self-taught developer with nearly 7 years of experience, excited about crafting immersive web experiences and scalable apps, dabbling in various creative projects, among other silly things. Beyond web, I'm also into game development and 3D modeling. Tools of the trade are Python, JavaScript/TypeScript (MERN/MEVN/Svelte), and C# (.NET, Unity, Godot).

🚀 Me

• ⌨️ I'm working on a competitive coding platform.
• 📚 Learning CI/CD, unit testing, and general devops.
• ✒️ I sometimes write on my blog.
• 🎬 Occasionally, I also put stuff on my YouTube.
• 💬 Ask me about Python, JS/TS, and C#. I'd love to help!
• 📫 You can reach me on Discord (@waterrmalann), Telegram, or via E-Mail

🛠️ Stack

• JavaScript x TypeScript
  • React (Next.js), Vue, Svelte (+ SASS / TailwindCSS)
  • MongoDB (Mongoose), SQL (SQLite, MySQL)
  • Express (Node.js), Elysia (Bun.js)
  • Ionic Framework, ElectronJS
• Python
  • Flask, FastAPI
  • Discord.py
• C#
  • Unity, Godot
  • WinForms, WPF
• Microservices
  • Docker (+ Compose)
  • Kubernetes (+ Helm)
  • RabbitMQ, Kafka, NATS
  • Redis

⏳ Stats

Check out some of my repositories. Show some ❤️ and maybe leave a ⭐ or two 😅.

---

kards's Issues

card scroll bar

card scroll bar taking extra space

Data Import/Export

Importing/Exporting Data

This issues discusses the possibility of exporting card data from the app as a local file as well as importing files containing card data in the app. This could be really useful when you wish to share your kanban boards with someone else or to import other's boards or even if you wish to transfer your boards between devices as Kards does not have a backend.

Implementation

The app data is already stored as a JavaScript object which is easy to serialize into JSON format, so the obvious choice is to use .json files for the export and import of data files. Another format like .csv could have also been considered, however it is quite difficult to store multiple boards along with all the settings of the app. Perhaps in the future, there could be a way to export/import individual boards as/from .csv files.

Importing

Importing can be implemented using the File Reader API. Perhaps a button in the settings menu of the app could prompt the user to select a JSON file, which will then be parsed and loaded by the app. There could be additional options whether to overwrite the existing boards or to load the boards from the file as additional boards.

Exporting

Exporting can be implemented using the Blob API. The app data will be JSON stringified and downloaded locally.

Performance Optimizations

Performance Optimization

Not really a bug but should still be given the priority of a bug.

All cards are rendered each time the board updates (a card is added, removed, edited). This is extremely inefficient, can lead to a lot of potential head aches, and will especially be noticeable in large boards with lots of cards and items.

Fix

The easiest fix is to redo the rendering parts of the code to support individual re-rendering and insertion/replacement. This would however require rewriting some major parts of the already messy codebase but it is the only right way to fix the issue permanently.

Local Storage Key Collision

Issue

A save file collision issue that's practically waiting to happen.

App data is stored as appData in local storage. This has the possibility to collide with other web apps that may use the same key for local storage like Webpad used to do at one point.

Fix

Can easily be fixed by renaming the "appData" as local storage key from L658 and L662 with something like "kards-appData". This should fix the issue.

Themes

Themes

This issue discusses the implementation of themes functionality which can enhance the visual appeal and the UX of the web app.

Implementation

Themes could easily be implemented by manipulating CSS root variables used to set the color via JavaScript.

Proposed Root Variables Structure:

:root {
    --primary-color: #ffffff;  /* The main color used for the background. */
    --primary-color-alt: #ffffff;  /* A darker version of the --primary-color */
    --primary-text-color: #ffffff;  /* The color of the text used above the --primary-color background. */ 

    --secondary-color: #ffffff;  /* Color used for the background of the sidebar */
    --secondary-color-alt: #ffffff;  /* A darker version of the --secondary-color */
    --secondary-text-color: #ffffff;  /* The color of the text used above the --secondary-color background. */

    --accent-color: #ffffff;  /* The color used for buttons and small elements. */
    --accent-color-alt: #ffffff;  /* A darker version of the --accent-color used when hovering/selected. */
    --acent-text-color: #ffffff;  /* The color of the text used above --accent-color backgrounds. */
    
    --card-color: #ffffff;  /* The color used for the task cards. */
    --card-color-alt: #ffffff;  /* A darker version of the --card-color used when hovering/selected */
    --card-text-color: #ffffff;  /* The color of the text used above --card-color backgrounds. */
    
    --item-color: #ffffff;    /* The color used for individual items of the cards. */
    --item-color-alt: #ffffff;  /* A darker version of the --item-color used when hovering/selected */
    --item-text-color: #ffffff;  /* The color of the text used above --item-color backgrounds. */

    /* additional variables for shadows could be added. */
    /* even more variables for custom fonts can be added. */
}

A few themes could be predefined such as a light theme and a dark theme, and the classic blue theme, perhaps even some more like cherry, a cream/pastel palette, etc...

Themes would be set through a settings menu, with support for definition of custom themes. They can be saved alongside kards-appData as an object named "theme" in the following format.

{
    "primaryColor": "#ffffff",
    "primaryColorAlt": "#ffffff",
    "primaryTextColor": "#ffffff",

    "secondaryColor": "#ffffff",
    "secondaryColorAlt": "#ffffff",
    "secondaryTextColor": "#ffffff",

    "accentColor": "#ffffff",
    "accentColorAlt": "#ffffff",
    "accentTextColor": "#ffffff",

    "cardColor": "#ffffff",
    "cardColorAlt": "#ffffff",
    "cardTextColor": "#ffffff",

    "itemColor": "#ffffff", 
    "itemColorAlt": "#ffffff",
    "itemTextColor": "#ffffff"
}

Smooth Theme Transitions

Some CSS transition properties on the background and card elements would make the transition of different themes look pretty neat, creating a smooth fade.

Board Specific Themes

A really cool idea is the setting of custom themes for individual boards. This would help easily distinguish between many boards that a user might have and takes personalization a step further. I don't think this is a necessary feature however and it might just end up raising the complexity of the already complex app. Still, it could be considered.

inconsistent width when dragging

width of task div is not fixed while dragging it

App is not working if the Untittled Board is deleted.

The App stops working if the Untittled Board is deleted.

Settings Menu

Settings Menu

This issue discusses the implementation of a settings menu that lets the user customize and adjust the in-app configuration, set themes, or export/import data.

Implementation

As a modal.

There is a button for this menu already in the top bar of the app. The idea is for a modal window to open up as an overlay when the button is clicked detailing all the things that can be done.

Available options.

• An autosave toggle/checkbox. [#1]
  • An autosave interval slider that range from 1 minute to 10 minutes. (Disabled if the autosave checkbox isn't checked)
• A theme selector with 3 to 4 themes. [#2]
• Buttons to import/export data from/as a JSON file. [#3]
• A button to erase all boards and related data.

UI Update

UI Revamp

I personally feel like the current interface is a bit suffocating, with not enough spacing. It also doesn't feel modern or that smooth in the UX department.

This could easily be done by maybe:

• Brightening the color palette (or via the introduction of #2)
• Adding more padding, margins, and spacing between elements.
• Adding some minor animations.
• Changing up the fonts, perhaps using something like Roboto or Poppins.

Autosave functionality

I think I didn't implement this in the first place due to potential performance implications but it's an extremely necessary feature as people (myself included) often forget to hit the save button. At the very least, a warning prompt to indicate unsaved changes when a user attempts to close the tab would also work.

Autosave timer could be adjusted in the settings panel (not implemented yet).

Snackbar & Pop-Ups

Better Alerts

This issue proposes an enhancement to the user experience of the app in two ways.

• Replace the regular JavaScript alert() alerts with much more user-friendly custom styled snackbar notifications instead.
• Add a pop-up confirmation box when the user wishes to do something destructive like delete a board.

Snackbar

Toast-like notifications that doesn't disrupt the flow of the app while providing warnings, alerts, and other information.

Potential Implementation: A parent element has to be defined that is positioned at the bottom left/right or top left/right corner of the screen. It should have a flexbox flex-direction of column to align downwards. When an alert is sent, a notification element is appended to the parent element with a timeout set to 2 or 3 seconds to automatically dispose the element and removes it from the DOM.

Pop-Up Confirmation

Simple pop-ups to get a confirmation from the user prior to destructive activities that may have been initiated accidentally.

Destructive activities include:

• Deleting a board.
• Deleting a card.
• Clearing a card.
• Changes in preferences (not implemented yet, will be after #4 )

Potential Implementation: A modal could be used to show the pop-up with the buttons passing the information back to whatever function that called for the pop-up. An alternative is to use JavaScript's confirm(), it is quite ugly but way better than no confirmation at all.