\ ˈbrēf \ - short in duration, extent or length
Board - minimalisitc app with powerful features to build beautiful moodboards.

Explore the docs »
Download now · Report Bug · Request Feature

Table of Contents

• Table of Contents
• About The Project
  • Features
• Usage
  • Web
  • API
  • Dev
• Contributing
• Contact
• Licenses

About The Project

Have you ever felt the need to send a brief message to someone but not through those unpersonal messager apps? Brief has you covered!

With Brief you can send short messages (30 chars max.) to other people.

Features

• Core
  • Create moodboards
  • Supports many different media types
    • Images
    • Videos
    • Text
    • URL's
  • Export
    • to PNG/JPEG
    • to PDF
• Premium
  • Unlimited cloud backups
  • Remote collaboration
  • Export
    • to Website

Contributing

Feel free to contribute to this project if you find something that is missing or can be optimized. If you do so, please follow the following steps:

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Contact

Maximilian Heidenreich - github@maximilian-heidenreich.de

Project Link: https://github.com/MaximilianHeidenreich/Board

Project Banner: https://github.com/MaximilianHeidenreich/Board/blob/master/static/brief_banner.png

Licenses

The project uses Twemoji for its favicon and banner image.

“Twemoji” by Twitter OSS is licensed under CC-BY 4.0.

TODO:

https://blog.avocode.com/4-must-know-tips-for-building-cross-platform-electron-apps-f3ae9c2bffff

• Auto updater -> probably custom package
• WYSIWYG -> https://svelte.dev/tutorial/tick

Features

Core

• Boards
  • Grid View
  • Map View
• Import media types
  • Import into assets folder / Link external
  • Images
  • Videos
  • Text
  • Websites
  • Auto copy images from clipboard (ask)
• Export
  • Image (PNG/JPEG)
  • PDF

Premium

• Cloud backup
• Remote collaboration
• Export
  • Web

Logging

• https://github.com/adamschwartz/log/blob/master/log.js
• https://github.com/debug-js/debug
• Pass to mainIPC and writeFile
• Wrpper arround common llib?

Menubr

• Default mode always grid
• grey out map viewmode, when enabled gets saved, icon normal color
• lock mode

Media types

• URL (With optional preview?)

• Image

• Video (& GIFS)

Media sources

• File select
• Drag and drop into window
• Screenshot
• URL embedd
• URL download
• CTRL-C/-V

Grid view

https://blog.stackfindover.com/masonry-grid-examples/ https://codepen.io/kattixie/pen/bEYyZb

Map view

https://github.com/rozek/svelte-drag-and-drop-actions

Comments

• svelte:self https://www.youtube.com/watch?v=0rKBt4PSfew&list=PLoKaNN3BjQX3mxDEVG3oGJx2ByXnue_gR&index=68 recursion

Synchronization

https://docs.deta.sh/docs/home/

• Github
• Google drive
• OneDrive?

Export

• Extra export window
• Showing only board grid

⚡ Vite + TypeScript + Svelte + Electron

Special thanks to jctaoo for his original template vite-electron-esbuild-starter.

The electron project stater using vite for renderer process and esbuild / tsc for main process.

Uses Svelte as the framework for render.

Note: CSC_IDENTITY_AUTO_DISCOVERY is set to false by default to avoid the codesign operation in packaging macos (learn more: codesign)

Usage

Create a Project:

• Clone this project directly.
• If you use GitHub, click Use this template at the top of the page or here (do not check include all branch)

Installation dependencies

npm i

Start local development

# Use esbuild to compile the main process Typescript and run the application
npm run dev

Compile/Pack

# Only build the target code and resources of the main process and the rendering process, without packaging (exe, dmg, etc.)
npm run build

# Preview your application in production mode without pack.
npm run preview

# Build and pack as a runnable program or installer
npm run pack:win
npm run pack:mac
npm run pack:linux

# Pack for all platforms
npm run pack # Exclude mac platform, applicable to linux & win
npm run pack:all

Clean up the build directory

npm run clean

File structure

Use two-package-structure

app/                   Electron-Builder app directory and its build directory
├─ package.json        Production dependencies, all stored as dependencies (not devDependencies)
dist/                  Electron-Builder package directory
scripts/               Support scripts for development/build.
src/
├─ common/             Common code
├─ main/               for main process
├─ renderer/           For renderer process
package.json           Dependencies during development, all stored as devDependencies (not dependencies)
vite.config.ts         Vite configurations
electron-builder.yml   Electron-Builder configurations