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: about 1 month 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 (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-06-11T19:45:41.000Z (over 2 years ago)
- Last Synced: 2024-08-03T09:12:50.641Z (4 months ago)
- Topics: django, react
- Language: TypeScript
- Homepage:
- Size: 31 MB
- Stars: 665
- Watchers: 16
- Forks: 186
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Kanban boards - SPA with React & Django
⚠️ Archived as it's no longer updated 🥲
[](https://opensource.org/licenses/MIT)
[](http://makeapullrequest.com)
[](https://github.com/rrebase/knboard/blob/master/CODE_OF_CONDUCT.md)
[](https://circleci.com/gh/rrebase/knboard)
[](https://codeclimate.com/github/rrebase/knboard/maintainability)
[](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.