Skip to content

CodyBontecou/better-big-canvas

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

57 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Better Big Canvas

Worflow Badge License badge

Description

Better Big Canvas is an improved version of Tech Lead's Big Canvas written in Elixir from scratch. It uses Phoenix LiveView for server side rendering and supports real-time pubsub drawing support. For more information regarding how this application was implemented, visit the following post.


Getting Started

To start Better Big Canvas:

  • Install dependencies with mix deps.get
  • Install Node.js dependencies with npm install inside the assets directory
  • Start Phoenix endpoint with mix phx.server
  • Create/Reset the mnesia database by visiting localhost:4000/reset

Now you can visit localhost:4000 from your browser, enjoy drawing to your heart's content!


Drawing Example

Click on any square from the main board, you'll be redirected to a canvas where you can draw anything you want. If you return to the main board, you can preview what you just drew, take a look:

Draw Example

Real-Time Example

One of the main features of Better Big Canvas, is the ability to update the previews of the main board in real-time! Everytime you update a canvas, the changes will be immediately reflected on the correspoding preview canvas of the board. Here's an example of 2 browser windows opened at the same time, if a canvas is edited, the main board will reflect those changes:

Draw Example

License

MIT. See the LICENSE.md in this repository for more details.

About

🎨 Improved version of Big Canvas built from scratch using Phoenix LiveView.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Elixir 65.0%
  • CSS 18.0%
  • JavaScript 8.6%
  • HTML 5.4%
  • SCSS 2.6%
  • Dockerfile 0.4%