Simple Kanban boards

👉 View Live

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.js v12 or greater
Yarn v1 or greater

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.