/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
pip install -r requirements/local.txt

python manage.py migrate
python manage.py createsuperuser --username admin --email a@a.com
python manage.py loaddata avatars
python manage.py runserver
python3 -m venv .venv
source .venv/bin/activate

----- For Windows----
virtualenv .venv
.venv/scripts/activate
---------------------

pip install -r requirements/local.txt

#if failed to import from psycopg:
pip install psycopg2-binary

docker-compose -f services.yml up --d

#if postgres is installed locally, stop its service or uninstall it
python manage.py migrate --settings=config.settings.local
python manage.py createsuperuser --username admin --email a@a.com --settings=config.settings.local
python manage.py loaddata avatars --settings=config.settings.local
python manage.py runserver --settings=config.settings.local

Troubleshooting running the project:

  • Make sure PostgreSQL container is running
  • Make sure Python virtual environment is activated

The Django API is now accessible at http://localhost:8000/api/ with the admin backend 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