Kanban Board Demo

Motivation

This was a learning project to get reacquainted with backend technologies after working purely in the frontend space for so long.

Tech stack

  • Backend:
    • Node
    • Express 5
    • Sqlite
    • Knex.js (querybuilder, migration/seeds)
    • Zod (request/response schema validation)
    • Pino (structured logs, correlation ID's)
  • Frontend:
    • React
    • Vite
    • React Router
    • Radix UI components
    • Storybook
    • dnd-kit (drag and drop library)
  • Both:
    • Typescript

The project structure is a monorepo hosting both the client/ and server/ code.

How to access in prod

  • Go to https://kanban-board-client-unf4.onrender.com/login
  • The site is hosted for free on Render so there will be a cold start when first loading, but everything after should be snappy.
  • Create a user to sign in and then play around.
  • The database gets purged whenever Render spins down the app instance due to inactivity and then re-seeded with default data when starting back up again (since this is a demo and was for learning purposes).
  • GitHub repo is here: https://github.com/QuinnMcHugh/KanbanBoard

Main takeaways

  • Defining database schemas, primary/composite/foreign keys, joins, transactions, junction tables
  • User account registration / user auth strategies
  • Schema enforcement via Zod (and free autogenerated documentation via Scalar OpenAPI docs)