carloslfu / tribe-tech-test

Technical Test Full-Stack Engineering Tribe.

Tribe Technical Test Solution

⚠️ Warning: this is a repository for a technical test I am doing for a company. It is NOT intended for public use!

The test specs are here, and the roadmap is at the end of this document.

Architecture

The system components are:

• Client Side (Desktop app)
  • Main process (electron/ folder): Electron files for the main process. It uses TypeScript and is bundled using Parcel.
  • Renderer processes (ui/ folder): UI built with Angular 9, with routes to support the different Electron windows. The UI uses Ant Design components for Angular.
• Server Side (Firebase)
  • Firebase Storage: used to save the video files.
  • Firebase Realtime DB: used to save video metadata and notify about its changes.

Architecture Diagram, made using asciiflow:

   +------------------------------------+      +-------------------------------+
   | Client Side (Electron desktop app) |      | Server Side (Firebase)        |
   |                                    |      |                               |
   |  +-------------------------+       |      |   +----------------------+    |
   |  | Renderer processes (UI) +<---------------->+ Firebase Realtime DB |    |
   |  +-------------------------+       |      |   +----------------------+    |
   |          |   ^          ^          |      |                               |
   |          v   |          |          |      |   +----------------------+    |
   |  +--------------+       +-------------------->+ Firebase Storage     |    |
   |  | Main process |                  |      |   +----------------------+    |
   |  +--------------+                  |      |                               |
   |                                    |      |                               |
   +------------------------------------+      +-------------------------------+

UI/UX improvements

I made some additions to improve UX:

• User selection is disabled by default on the UI, it is what you expect from a native app.
• In order to support MacOSX cut/copy/paste, and more editing commands, those commands are added to the Electron Menu.
• Keep Main Window state using the electron-window-state package.
• The UI uses Ant Design components for Angular.
• Show the Electron windows only when they are ready. It is implemented by using the Electron BrowserWindow ready-to-show event.
• The Menu "Save Video Message" option is implemented a big button on the main window, because it is the main user action on that window.
• Video recording preview and cancel functionality.

Notes on security!

This MVP do not have authentication, so all the users can read and write to the Firebase Backend services.

Development

• Open a terminal on the ui/ folder and run: npm start
• Open a terminal on the electron/ folder and run: npm start

Production build

• Open a terminal on the ui/ folder and run: npm run build
• Rename the ui/dist/ui folder to ui/dist/dist-renderer
• Copy the ui/dist/dist-renderer folder to electron/dist-renderer
• Open a terminal on the electron/ folder and run: npm run build

UI notes

There is an issue with lazy components that do not load parent dependencies, see this issue. For this reason each lazy module imports the Ant Design Module.

Releases

Binaries for MacOS 64-bits, and Windows 64-bits are available on the Github Releases page.

Known issues

The MP4 format of the recorded video is only openable with a browser (Chrome preferred) in some systems, it is possibly because of the file format. This issue is easily fixable, and it will be fixed on future releases.

Roadmap

• System design and architecture, tech choices
• Document architecture
• Implement initial Electron setup
• Implement UI setup
• Complete roadmap
• Integrate Firebase on UI
• Implement Main window:
  • Create main window
  • A Menu with "Save Video Message" and "Quit" options
  • A "Save Video Message" button
• Implement User Data Window (second window):
  • Create User Data Window
  • Link "Save Video Message" action (menu and button) to the User Data Window creation
  • Create a form with name and email fields, and a "send" button
• Implement the Record Window (third window):
  • Create Record Window
  • Link "Send" button in the User Data Window to the Record Window creation
  • Implement video recording
• Implement video save:
  • The user save the video with a "Save" button on the Record Window and it should be uploaded to Firebase Storage, and close the Record Window
  • When a video is uploaded the Main Window should show a notification message
  • When a video is uploaded to Firebase storage its metadata should be saved on Firebase Realtime Database. Metadata: user name, user email, and video link.
• Implement a video list on the Main Window:
  • Implement video list
  • Implement Firebase Realtime DB subscription
  • Implement download video functionality
  • Implement delete video functionality
• Configure production build
• Create Windows 64-bit binary and publish it on Github Deployments
• Create MacOS 64-bit binary and publish it on Github Deployments