Memo App

Product Description:

Memo App is a browser based video editing platform that enables groups of people to create memorable video content by collaborating on the same project. In just three simple steps, anyone can use it to create personal or work-related videos.

The platform was a greenfield project. We created a frontend platform for the website, support backend services, authentication with user management, databasing, infrastructure, and some supported automation. The application itself was never completed to production standards, but many cool functionalities do exist and are deployed. The frontend of the platform is responsive and has a tasteful interface on both desktop and mobile devices.

Technologies:

  • Figma
  • ReactJS
  • MaterialUI
  • React Router
  • ContextAPI
  • Google Firebase Authentication
  • Google Firebase Analytics
  • Google Analytics
  • CircleCi
  • Google Cloud Storage
  • Google Cloud Platform
  • Google Kubernetes Engine
  • Docker
  • Golang
  • Shotstack API
  • MongoDB
  • Cypress
  • Nginx

Technologies in coorelation with application features:

MemoMaker’s UI/UX was designed using Figma. The app’s landing page and the entire frontend is built using JavaScript’s ReactJS.

On the landing page, a user is able to operate the app as a guest, or sign in with a user profile. The authentication process is two legged. First it leverages Google Firebase Authentication for the actual user/password and/or 3rd party providers. The 2nd leg leverages our internal services and the Google Firebase Authentication record, allowing us to store information about the specific user, while delegating confidential passwords to Google.

After a user signs up and logs in, they are prompted with the “Project List” page. “The Project List” page allows the user to create, enter, and delete projects in an interactive fashion. Guests do not have access to the “Project List” page since a guest project can be viewed publicly. Instead of the “Project List” page, a guest project can be found with its URL.

The “Project Details'' page enables users to upload, manage, and delete different video and audio clips that are stored in Google Cloud Storage. Both guests and users have access to the “Project Details'' page. The clips can then be added to the timeline section of the editor, allowing for trimming of the clips. Organization of the clips occurs in sequence and overlay audio clips can be added on top of the video clips . Throughout the editing process, users experience the single-app speed of React, while the backend relies on Golang and Mongo technology. The user can then render the video. We consume both Shotstack and Transloatit to render the final video with the edits made by the user. The video renders are then uploaded to Google Cloud Storage with the ability for the user to manage those renders.

MemoMaker enables individuals to collaborate on the same project simultaneously. To collaborate on a video select “Public” when uploading your first clip.

Once your first clip is uploaded a unique URL will be generated. This unique URL is shareable through copy and pasting from your search bar. Similarly, clicking the icon to the right of the “Generate Video” button on the “Project Details Page” copies a project link to your clipboard. Sharing the project’s URL to collaborate on the video editing process lets individuals simultaneously add audio and video clips in real time.

E2e testing is done with cypress and is automated during the deployment process built on CircleCI. All services are exposed to the public via an auto renewing SSL proxy built on Nginx. Databases are not exposed to the public internet to gain an extra layer of security. Google Firebase Analytics is used to track user behavior. All services, the frontend, the backend, proxies, and databases are deployed on Google Kubernetes Engine. This container orchestration system allows us to pull new docker image versions and run the containers as k8 pods. CircleCI pipelines were used for both development and production environments.

BACK

It's time to bring your ideas to life