Skip to content

Drawing/Whiteboard type Web App -- Group project for high school computer science class (Informatik Leistungskurs)

License

Notifications You must be signed in to change notification settings

JanEuster/q3-project

Repository files navigation

Computer Science Advanced Class Year 12 Project

Expanded-Board

What is this App?

Its a Drawing Application in your Browser or on Desktop. It tries keep the UI understandable and easy while not being simple or rudimentary.
The application is mostly vector-based with the exception of images inserted into documents. Therefore all elements within a document are their own objects and changable.
Documents are called Artboards. There are three different Types of Artboards: Regular -- e.g. A4; Infinite-Scroll; Infinite;
The Tools this program provided include a Move-Tool for roaming the Artboard, a Selection-Tool for selecting, moving and manipulating objects, a Pencil-Tool for drawing vector lines, a simple Eraser drawing in the color of the background of the artboard, a Shapes-Tool allowing you to drag Rectangles, Triangles and Circles onto the Artboard and an Image-Tool for displaying images within the Artboard.
You can Import Images to be opened as Artboards for editing and Export any Artboard to an Image Format.

Students / Team:

  • Jan Eusterschulte - Team Lead, Concept, Programming [ Webdesign, Drawing App ]
  • Lennart Brunn - Programming [ Drawing App ]
  • Friedrich Maagk - Graphics

Logo / Favicon

Software

  • NodeJS
  • ReactJS - using Create-React-App
  • Electron

Want to Test or Contribute?

  • Requirements:

    • Git
    • NodeJS

  1. Clone Repo

foo@bar:~$ git clone https://github.com/janeuster/q3-project.git

  1. Install Node Package Depencencies
foo@bar:~$ cd q3-project
foo@bar:~/q3-project$ npm ci
  1. Start the Live Development Version


foo@bar:~/q3-project$ npm run dev

You will see a desktop application appear. Anytime a file within the repositories directory is changed, those changes will appear in the live development desktop application. The app can also be accessed via the browser(localhost:PORT). BY default the port is set to 3000(localhost:3000).

  1. Build Web App


foo@bar:~/q3-project$ npm run build
  1. Generate Electron Desktop App Package


foo@bar:~/q3-project$ npm run pack-win

or

foo@bar:~/q3-project$ npm run pack-linux


Concept Art

About

Drawing/Whiteboard type Web App -- Group project for high school computer science class (Informatik Leistungskurs)

Topics

Resources

License

Stars

Watchers

Forks

Contributors 5