GithubHelp home page GithubHelp logo

kyo144 / drawprism Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 588 KB

A real-time online collaborative paint chat website.

Dockerfile 0.74% Python 28.36% JavaScript 69.61% HTML 0.74% CSS 0.55%
aws-ec2 celery docker docker-compose elasticache-redis flask mongodb mongodb-atlas python react redux-toolkit rtk-query socket-io tailwindcss gunicorn nginx react-hooks react-router flask-socketio canvas

drawprism's Introduction

DrawPrism

drawprism-logo

A real-time online collaborative paint chat website

Live Demo

  • This repository is no longer maintained. The live demo is available only as a screenshot 🖼
  • Anonymously, no registration needed but still can sign up if you'd like to ✨
  • Here I also provide a test account for you guys

Main Features

✨ Create a free paint chat room in a second
  • After create the room, system will give you an url to invite your friends in, then you can drawing and chatting together, asynchronously!
  • Communication between client-side and server-side is handled through Socket.IO
drawprism-gif
✨ Pen Pressure Sensitive
  • If you draw by tablet, I have built-in support for pressure sensitivity!
drawprism-gif

System Architecture

drawprism-architechure

Front-End Tech Stack

  • React.js (Hooks)
  • React Router
  • Redux Toolkit / RTK Query
  • Socket.IO Client
  • Html Canvas API
  • Tailwind CSS

Backend Tech Stack

  • Docker / docker-compose
  • gunicorn
  • gevent / gevent-websocket
  • Python / Flask
  • Flask-SocketIO
  • Celery
  • MongoDB Atlas
  • AWS ElastiCache for Redis
  • AWS S3
  • AWS CloudFront
  • AWS EC2
  • JSON Web Token (JWT)
  • MVC Design Pattern
  • Ubuntu 20.04 (Windows Subsystem for Linux 2)

Net-working

  • Nginx (Reverse Proxy / Http & Https support)

Version Control

  • Git / Github
  • GUI: Fork / Git Kraken

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.