https://github.com/fanqingsong/draw_guess
with the help of react-sketch2 and django channels library, implement draw and guess game. this repo can be used as boilerplate,due to hot-loading of frontend and backend.
https://github.com/fanqingsong/draw_guess
django react
Last synced: 3 months ago
JSON representation
with the help of react-sketch2 and django channels library, implement draw and guess game. this repo can be used as boilerplate,due to hot-loading of frontend and backend.
- Host: GitHub
- URL: https://github.com/fanqingsong/draw_guess
- Owner: fanqingsong
- Created: 2021-10-22T16:26:05.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-11-12T02:16:41.000Z (over 3 years ago)
- Last Synced: 2025-01-14T13:53:46.810Z (5 months ago)
- Topics: django, react
- Language: JavaScript
- Homepage:
- Size: 1.77 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# draw and guess
based on django_channels_chat_official_tutorial_react project,
create draw and guess game feature.
# requirements
## basics
- [x] draw page, for artist, provide a sketch pad for artist to draw
- [x] guess page, for gusser, display drawing at real time for gusser
## authentication
- [x] display logging pannel if not logged by user, then user can login
- [x] display loggout pannel if logged by user, then user can logout
## gallery
- [x] display all drawings.
## comments
- [ ] every user can give comment on every drawing.
# Technology Stack
| Category | Name | Description |
| ----------- | ----------- | ----------- |
| Backend | Django | web framework |
| Backend | DRF | web framework of RESTAPI |
| Backend | Channels | websocket server library |
| Backend | djoser | authentication library based on DRF |
| Frontend | React | frontend library |
| Frontend | AntDesign | frontend UI library |
| Frontend | react-sketch2 | Canvas Drawing UI library |
# demo
draw page: when you are painting on this page
guess page: guesser can watch the drawing lively.
gallery page: disaply all drawings saved on server db.
# reference
## react-sketch2
https://www.npmjs.com/package/react-sketch2
## django channels
https://channels.readthedocs.io/en/stable/tutorial/index.html
# INSTALL
## prerequiste
| software | version |
|----------|---------|
| python3 | 3.6.8 |
| pipenv | 2020.11.15 |
| nodejs | v14.17.0 |
| yarn | 1.22.10 |
| docker | 20.10.2 |
## install dependency of frontend and backend
```
./bin/install.sh
```
# BUILD
```
./bin/build.sh
```
# RUN
## start react dev server
```
./bin/start_react.sh
```
## start django server
```
./bin/start_django.sh
```
## access page
go to chrome, access the following URL:
http://127.0.0.1:8000/
enter draw page
then open another chrome window, access URL
http://127.0.0.1:8000/
enter guess page
finally, keep two page visible, then draw and guess.
# Dev
## DB migrate
```
pipenv run python3 manage.py migrate
```