Skip to content

Online whiteboard app that makes drawing, collaboration and sharing easy

License

Notifications You must be signed in to change notification settings

denbite/online_whiteboard

Repository files navigation

Online Whiteboard - Realtime Drawing

Description

Online whiteboard app that makes drawing, collaboration and sharing easy.

How to use

[DESKTOP, MOBILE]:

  • Click (tap) and move mouse for drawing picture
  • Choose brush color and width on toolbar block
  • Click Clear button to delete all pictures from board
  • Click Share button to generate link that you can share to friends and draw pictures together

About the project.

Frontend

  • It's built with React.js, Next.js(SSR, routes) and Redux(client storage)
  • Draw is implemented with default HTML5 tag - <canvas>
  • All your pictures are stored as arrays of points. This approach uses less memory than built-in canvas functions

Backend -> REST API server

  • It's built with Python 3.7, micro-framework Flask and PostgreSQL as data storage
  • The written code complies with the PEP8 specification
  • API has scalable structure where each folder is responsible for it's own part of the application logic
  • I used PostgreSQL as Database because it allow to store JSON-data
  • Made unit-tests with python library pytest. They are stored here: /backend/api/tests

Backend -> Websockets server

  • It's built with Python 3.7 and websockets library
  • The written code complies with the PEP8 specification
  • It has rooms that divide connected clients by board_url into groups
  • It has validation for receiving messages that reject messages with invalid structure

DevOps

  • I used Docker to build a microservice application
  • List of microservices you can see in file docker-compose.prod.yml
  • I used Kubernetes to deploy production version (all configs you can see in /k8s)
  • I used pre-commit to format python code and check it for mistakes

Project setup

Run project (development):

docker-compose -f docker-compose.prod.yml -f docker-compose.dev.yml up --build

Run project (production):

# create secret key
python -c 'import os; print(os.urandom(24).hex())'

# setup environment variables
cp .env.example .env
nano .env

docker-compose -f docker-compose.prod.yml up --build

Run REST API tests (if container is up):

docker-compose -f docker-compose.prod.yml -f docker-compose.dev.yml exec api pytest

Run REST API tests (if container is down):

cd backend/api
pytest

About

Online whiteboard app that makes drawing, collaboration and sharing easy

Resources

License

Stars

Watchers

Forks

Packages

No packages published