Kanban boards - SPA with React & Django

⚠️ Archived as it's no longer updated 🥲

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 [email protected]
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

• Full Guide to Testing Javascript & React
• Deploying knboard to DigitalOcean with Ansible

License

Licensed under the MIT license.