Message Burner

Message Burner is a web-based application designed for secure and temporary message sharing. It allows users to send messages that self-destruct after being read, ensuring privacy and confidentiality.

Website: https://burner.matronator.cz

Features

• Private message sharing with self-destruction
• Share a text an image
• Secure PGP encryption of all shared content
• TODO

Getting Started

Install Dependencies

Run the following commands in the root folder of the project:

composer install
npm install # or pnpm, bun, yarn...

Prepare the Data Layer

1. Create a database named burner.
2. Run the SQL script located at init-db.sql or import it using a database admin tool (e.g., phpMyAdmin, Adminer).
3. Configure the database connection in app/config/config.local.neon by providing the database name, login, and password.

Development

Front-End Development

Run the following commands to start the front-end development server:

npm start # starts the dev frontend server
npm run serve # starts backend PHP server

The serve script will start a server on 127.0.0.1:8000. This is the PHP built-in web server and has debugging panel (Tracy) turned on (if not disabled).

The start script will start a server on localhost:3000. Develop on this if you want hot-reloading and automatic browser refresh on changes.

Admin Module Development

Run the following commands to start the admin module development server:

npm run start-admin
npm run serve

Changes to files in the dev folder (except etc/*) or templates will automatically refresh the browser.

Admin Module Default Credentials

The init-db.sql file includes a default admin user:

• Email: [email protected]
• Password: changeme

Important: Change these credentials before deploying to production.

Build Process

There are two basic modules - front and admin. Use dev and its respective subfolders to create or edit front-end assets. Here is an example of the folder structure:

/dev
|-- admin
|   |-- (same structure as front)
`-- front
    |-- images
    |      |-- photo.jpg
    |      `-- chart.png
    |-- icons
    |      |-- mail.svg
    |      `-- arrow.svg
    |-- css
    |   |-- index.js
    |   `-- contact.js
    |-- js
    |   |-- index.css
    |   `-- contact.css
    `-- etc

All assets are compiled into www/dist folder. For every module subfolder with its name is created.

Keep in mind that files in images and etc preserve their original directory. Other files (css, js, icons) are generated into the root. For example in app/components/Hamburger/Hamburger.css you should reference external images as follows:

.hamburger {
    background-image: url(images/hamburger.svg);
}

Front-End Production Build

Run the following command to create a production build for the front module:

npm run build

Admin Module Production Build

Run the following command to create a production build for the admin module:

npm run build-admin

Asset Management

Assets are compiled into the www/dist folder.

Images

To reference images in templates, use the {asset} tag with the image path relative to the www/ folder.

<img src="{asset 'dist/front/images/logo.png'}">

JavaScript and CSS

Similarly, to reference JS and CSS files in templates, use the |fullpath filter with the asset filename and it will resolve the path automatically:

<script src="{='index.js'|fullpath}"></script>
<link rel="stylesheet" href="{='main.css'|fullpath}">

To add asset from a different module than front, add an argument with the module name to the filter. For example, to add assets from admin module do this:

<script src="{='index.js'|fullpath,'admin'}"></script>
OR
<link rel="stylesheet" href="{='dashboard.css'|fullpath, module: 'admin'}">

License

This project is licensed under the MIT License.