ProtonNote.md

FE Test: Secure Notes

Develop a secure note application (ProtonNote).

Specification

The user can:

• view a list of notes (left pane).
• view the title and markdown rendered text of a note (right pane - view mode).
• write a title and plaintext markdown text and save it as a note (right pane - edit mode).

View mode

The user can:

• open an existing note and view the markdown rendered note (the composer is not visible).
• click on the Edit button to be taken to the edit mode.
• click on the New note button to be taken to the edit mode and create a new note in the list of notes.

Edit mode

Edit mode is activated either by creating a new note or editing an existing one.

The user can:

• not click on the New note button.
• not click on another note.
• click on the Cancel button to be taken to the view mode.
• click on the Delete button to delete the note.
• click on the Save button to save the note and be taken to the view mode.

Data

• The title of each note is not encrypted (stored in clear text).
• The content of each note is encrypted when saving it. Take into consideration the loading state.
• The content of each note is decrypted when opening it. Take into consideration the loading state.
• Since real encryption/decryption are out of scope, mock the encrypt and decrypt operations with the following functions that do not alter any data.

const wait = async (delay) => {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, 500);
    });
};

const encrypt = async (data) => {
    await wait(500);
    return data;
}

const decrypt = async (data) => {
    await wait(500);
    return data;
}

Note

From this specification, develop a web application in ReactJS (preferred) or any other web framework. Design and styling are not important.

Once done, upload your project on GitHub or GitLab. Then email back the git repository URL or zip the project to the person who sent the task.

ProtonNote_edit_mode.png

ProtonNote_view_mode.png