MuviCo is a browser-based application designed to provide versatile visual elements and support functions for live music performances. The purpose of the application is to bring an additional dimension to music experiences that can complement and enrich the experience for both listeners and performers.

With MuViCo you can easily add, assemble and edit video, image and audio elements on an interactive interface. Your projects are saved to the cloud, so they can be accessed from any device at any time.

• Node.js
• Express.js

• React
• JavaScript (ES6+)

• Jest

• mongodb

The app can be used by signing up and logging in. The user can log in with a Google account or create a new account to MuViCo. On the home page the user can create a new presentation or view their previous presentations. A presentation in this case refers to a collection of media, which is intended to be used in a performance setting.

Elements are slots in which singular pieces of media are stored. On the presentation page, the user can add elements either by manually clicking the 'Add element'-button, by double clicking on a free spot in the interface, or by drag-and-dropping files directly to the interface. The user can then edit existing elements for example by dragging a new piece of media on top of the element or by double clicking the element to change the position, element name or media. Changes are saved automatically.

Once the user enters 'Show mode' the elements can be activated. Each element is linked to a screen on which the media will be presented. The presentation can also be edited during Show mode and changes will be saved.

The elements are differentiated by their 'screen' and 'index' values. Elements with the same 'screen' are shown in the same pop up window, while elements with the same 'index' are activated simultaneously. This allows the user to control media on several screens independently. A user can delete a presentation or element, which also deletes the media of said presentation / element.

For detailed instructions on how to use the application check out the User Guide

For more information check out the documentation folder.

Follow these steps to set up the project on your local machine:

1. Install Required Tools
   Ensure you have the following installed on your system:

   • Node.js and npm
   • Docker
   • Docker Compose

2. Clone the Repository
   Clone the project repository to your local machine:

   git clone [email protected]:MuViCo/MuViCo.git

3. Navigate to the Project Directory
   Change to the project root directory:

   cd MuViCo

4. Set Up Environment Variables
   Copy the .env-template file to .env and fill in the required values:

   cp .env-template .env

5. Install Dependencies
   Install the required npm dependencies:

   npm install

6. Run the Application in Development Mode
   Start the application in development mode with hot-reloading:

   npm run dev

   This will start the backend server and the frontend development server with live updates.

If you prefer to develop inside a Docker container (to match the production environment), follow these steps:

1. Reset the Docker Environment
   Clean up any existing Docker containers and volumes:

   npm run reset

2. Install Dependencies
   Install dependencies inside the container:

   npm ci

3. Cleaning Up Docker Environment

   To free up space and avoid conflicts with old Docker artifacts, you can remove all unused Docker data, including stopped containers, unused images, and networks, by running:

   docker system prune -a

4. Start the Application
   Start the application in development mode using Docker:

   npm run start

   This will spin up the necessary containers for the backend, frontend, and database.

To simulate the production environment locally, follow these steps:

1. Reset the Production Docker Environment
   Clean up any existing production containers and volumes:

   npm run reset-prod

2. Start the Application in Production Mode
   Start the application using the production Docker configuration:

   npm run start-prod

   This will build and run the application in a production-like environment.

When switching to a new branch, it is recommended to run the following command to ensure that the dependencies are consistent with the branch you are switching to:

npm ci