/knboard

Kanban boards with React & Django.

Primary LanguageTypeScriptMIT LicenseMIT

Simple Kanban boards

👉 View Live

image

License: MIT PRs Welcome Code of Conduct

CircleCI Maintainability Test Coverage

Quality 💪

  • Auto formatted with Prettier and Black
  • Tested with Jest, Pytest and Cypress
  • Continuous Integration

Built using a Modern stack 💎

Frontend

  • Typescript
  • React with functional components and hooks
  • Redux Toolkit
  • Components & styling with Material-UI and Emotion
  • Drag & Drop using react-beautiful-dnd
  • Unit tests with React Testing Library
  • Integration tests with Cypress

Backend

  • Django REST framework for a powerful API
  • Django ORM for interacting with the database
  • PostgreSQL
  • Unit tests with Pytest

Infra

  • Blazing fast Nginx
  • Dockerized production setup
  • Continuous integration with CircleCI
  • Server setup and deployment with Ansible

Motivation 🎯

  • Code samples for blog posts
  • Implementing Auto DevOps
  • Playing with tools that are free for open source
  • Styling with Emotion

Features ✨

  • Multiple kanban boards
  • Drag & drop tasks
  • CRUD for tasks, labels & columns
  • Edit task descriptions with Markdown
  • Manage board members
  • Update your profile & pick an avatar

Development setup 🛠

Steps to locally setup development after cloning the project.

Note: docker-compose is currently only used for production.

Django

Have Python 3.8 installed and in PATH. Installing Python: https://realpython.com/installing-python/

python3 --version
# Python 3.8.2
cd backend
python3 -m venv .venv
source .venv/bin/activate

# Windows users
# .venv/scripts/activate

pip install -r requirements/local.txt

# Windows users, if you encounter pg_config error:
# 1) Install PostgresSQL and use the solution at https://stackoverflow.com/a/58440598/1262198

# Need to have Docker and Docker Compose installed
# Start PostgreSQL and other services via Docker Compose
docker-compose -f services.yml up --d

python manage.py migrate
python manage.py createsuperuser --username admin --email a@a.com
python manage.py loaddata avatars
python manage.py runserver
  • API root available at http://localhost:8000/api/
  • Admin available at http://localhost:8000/backdoor/

React

node --version
# v12.16
yarn --version
# 1.22.4
cd frontend
yarn install
yarn start

React app is now accessible at http://localhost:3000

Quality tools

Check formatting & quality with eslint

yarn lint

Run Jest tests

yarn test

Run Cypress tests

yarn cypress run

Debug Cypress tests

npx cypress open

Run Python tests

python -m pytest

Check formatting with Black

black --exclude .venv .

Articles

License

Licensed under the MIT license.


👉 View Live