Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/rrebase/knboard

Kanban boards with React & Django.
https://github.com/rrebase/knboard

django react

Last synced: 10 days ago
JSON representation

Kanban boards with React & Django.

Host: GitHub
URL: https://github.com/rrebase/knboard
Owner: rrebase
License: mit
Archived: true
Created: 2020-03-07T13:09:09.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2022-06-11T19:45:41.000Z (about 2 years ago)
Last Synced: 2024-03-01T22:36:59.451Z (4 months ago)
Topics: django, react
Language: TypeScript
Homepage:
Size: 31 MB
Stars: 669
Watchers: 16
Forks: 186
Open Issues: 31
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Lists

awesome-stars - knboard - Kanban boards with React & Django. (TypeScript)
awesome-stars - rrebase/knboard - Kanban boards with React & Django. (TypeScript)
my-stars - rrebase/knboard - Kanban boards with React & Django. (TypeScript)

README

Kanban boards - SPA with React & Django

⚠️ Archived as it's no longer updated 🥲

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![Code of Conduct](https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square)](https://github.com/rrebase/knboard/blob/master/CODE_OF_CONDUCT.md)

[![CircleCI](https://circleci.com/gh/rrebase/knboard.svg?style=svg)](https://circleci.com/gh/rrebase/knboard)
[![Maintainability](https://api.codeclimate.com/v1/badges/1dc1d840640dad52e38f/maintainability)](https://codeclimate.com/github/rrebase/knboard/maintainability)
[![Test Coverage](https://api.codeclimate.com/v1/badges/1dc1d840640dad52e38f/test_coverage)](https://codeclimate.com/github/rrebase/knboard/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/

```sh
python3 --version
# Python 3.8.2
```

```sh
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](https://nodejs.org) v12 or greater
- [Yarn](https://yarnpkg.com/) v1 or greater

```sh
node --version
# v12.16
yarn --version
# 1.22.4
```

```sh
cd frontend
yarn install
yarn start
```

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

### Quality tools

Check formatting & quality with eslint

```sh
yarn lint
```

Run Jest tests

```sh
yarn test
```

Run Cypress tests

```sh
yarn cypress run
```

Debug Cypress tests

```sh
npx cypress open
```

Run Python tests

```sh
python -m pytest
```

Check formatting with Black

```sh
black --exclude .venv .
```

## Articles

- [Full Guide to Testing Javascript & React](https://www.rrebase.com/posts/full-guide-to-testing-javascript-react)
- [Deploying knboard to DigitalOcean with Ansible](https://www.rrebase.com/posts/deploying-knboard-to-digitalocean-with-ansible)

## License

Licensed under the MIT license.