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
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.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.