experimental-berlin/muzhack

Web application for publishing music hardware projects.

MuzHack

MuzHack is a Web application for publishing musical instrument designs.

[](https://gratipay.com/~Arve Knudsen/)

Editing

Please install EditorConfig in your editor of choice, since we control the code standard through that (e.g. 2 spaces indentation). Specifically the EditorConfig settings are defined in the .editorconfig file.

Please also install ESLint in your editor, in order to make sure you conform to our code standards. This is configured via .eslintrc.

Development

MuzHack is developed with Node (via hapi.js) on the server and Omniscient (a functional, top-down rendering, React wrapper). The code standard is ES2015 JavaScript. We use Babel to be able to write ES2015 both on the server and on the client.

For the database we use RethinkDB, a NoSQL technology.

Local Installation

1. Enter the MuzHack Git repository.
2. Get Git submodules: git submodule update --init --recursive
3. Install nvm.
4. nvm install.
5. npm install.
6. If you don't have Python 3 already, install it with brew: brew install python3.
7. pip3 install -r requirements.txt
8. Install RethinkDB.
9. ./rethinkdb/setup-rethinkdb.py.

Running Locally

1. In one terminal, enter the MuzHack repository.
2. Run the Node server: ./run-server
3. In another terminal, enter the MuzHack repository.
4. Run the Webpack dev server: ./run-webpack-dev-server. This serves as a front-end to the Node server, which automatically compiles resources via Webpack.
5. Access the Webpack dev server at http://localhost:8080 in your browser. The app will automatically be refreshed when you make changes to the source code thanks to Webpack's hot reload feature.

Deployment

MuzHack is deployed as a set of Docker containers to Google Container Engine (GKE), which is a Kubernetes service for managing Docker clusters. GKE is for all intents and purposes Kubernetes, so read up on the latter in order to understand how MuzHack is deployed.

We are using two different clusters, staging and production. In order to work with each cluster, we use the local kubectl command; to configure which cluster kubectl operates on at any given time, issue the command gcloud container clusters get-credentials $CLUSTER, where $CLUSTER is the cluster in question (e.g. production or staging).

Updating Deployed Resources

In order to update a deployed resource, f.ex. a replication controller, use kubectl apply. For example, if the staging web-controller.yaml has changed, issue the following command: kubectl apply -f docker/staging/web-controller.yaml.

muzhack's Issues

Redirect www.muzhack.com to muzhack.com

www.muzhack.com should be redirected to muzhack.com, probably by configuring nginx.

Support adding files to projects

When creating/editing projects, adding files should be supported.

Add pictures to project tiles

Project tiles should be adorned with pictures in order to improve their appearance. We should strive for something similar to how Thingiverse looks.

Support adding instructions to projects

When creating projects, an instructions section should be mandatory. Correspondingly, it should be possible to edit a project's instructions.

Support searching projects

Need to support searching within projects.

Support choosing between licences

It should be possible to choose between various licenses.

Investigate support for pictures in Markdown format

Investigate whether it's possible to include pictures in Markdown formatted documents.

Fix SEO for instruments

Instrument pages don't seem to be picked up by Google.

Fix editing of pictures

Adding a picture when editing shouldn't replace other picture.

Fix generating of zip when creating project

After creating a project, the zip file's size is shown to be 0 - it's perhaps not generated??

• Generate zip on server and upload to S3
• Save correct S3 URL
• Implement loading view in client while waiting for server to finish

Reimplement Trello authorization

Trello authorization sometimes fails to return a token, reimplement instead.

Replace underscore.string with underscore.string.fp

We should make a Meteor package for underscore.string.fp and migrate to that.

Stop user from creating project twice

Disable project creation button after it's clicked the first time.

Fix updating of Isotope when new projects are added to the database.

Isotope layout looks all weird when in the explore view a project gets added from the server, we must find some way to consolidate collection update with Isotope.

Improve design

Could use some help with the general design.

According to user feedback we should go with a more neutral, GitHub like design.

Implement canceling create view

Implement Cancel button in create view.

Implement frequent cleaning of Docker images

Implement frequent cleaning of Docker images in Tutum stacks, using Cleanup image.

Add forum

Add Discourse forum.

Implement deploying to DigitalOcean (Docker)

Implement deploying a Dockerized version to DigitalOcean, for use as a staging instance. In the future, we'll want to deploy for production in the same way.

• Make Docker image of app
• Define scheme for running app container linked to Mongo container
• Make app use SSL
• Deploy both staging and production instances, so that we can switch between the two

While deleting project, show spinner page

Show spinner page while waiting for server to finish deleting project.

Implement pruning of backups

• After a certain cutoff time, backups should be pruned if their source files are gone
• After a certain cutoff time, backups should be pruned if their source projects are gone

Write acceptance tests

Write acceptance tests, in order to stabilize functionality.

These tests should use data from the production database, in order to ensure that the new version actually works with this.

Fix regenerating of zip when uploading new files

When new files are uploaded to a project, a new zip file should be generated.

• Implement loading view in client while waiting for server to finish

Support adding pictures to projects

When creating/editing projects, adding pictures should be supported.

• Implement uploading pictures to S3 via CollectionFS
• Implement removing pictures from S3 via CollectionFS
• Implement including existing pictures in Dropzone
• Implement not re-uploading existing pictures when saving
• Implement removing deleted existing pictures when saving

Implement backup

Create "stable" site, with backup of database. Probably entails deploying site to DigitalOcean, running database at compose.io or some such.

• Implement DB backup -> Being solved via MongoDB Cloud
• Implement S3 backup - Copy files to another S3 bucket

Replace String.startsWith with _.startsWith

Currently, we've been assuming that String supports the startsWith method natively, but it turns out this is wrong. Therefore use _.startsWith instead.

Switch backups to Glacier

Switch backups to Glacier, in order to save money.

Fix image size in Isotope grid

Image sizes aren't contained height wise in Isotope grid.

Ensure searchability

• Ensure that muzhack.com is crawled and indexed properly
• Ensure that staging.muzhack.com isn't crawled
• Consider structured data to customize Google search results

Implement loading template

Implement new loading template for Iron Router. Should have a spinner ofc...

Make sure that staging site uses own S3 bucket

Make sure that staging site uses S3 bucket of its own, so as not to interfere with e.g. production.

Implement staging and production environment

Add a staging environment in addition to the production one.

Add donation functionality

Add UI functionality for those who would like to donate.

• Flattr
• Paypal

Exit editing mode when switching to another view

When editing mode is active, exit it when navigating to another view.

Make sure that project pages are search optimized

Make sure that projectpages are properly search optimized, so that they show up in Google searches.

• Expose tags to crawlers, so that searches for these will bring up corresponding pages
• Expose description/instructions/title to crawlers
• Expose author to crawlers

Disable project editing for non-owner

SSIA.

Add breadcrumbs

Add breadcrumbs for instance when visiting a project page.

Include SoundCloud links to audio examples

For demonstration purposes for projects, support embedded SoundCloud clips per project.

Support editing of projects

Projects should be editable.

Fix forgot password form

Forgot password on staging server currently fails due to invalid SMTP password by the looks of it:

2015-05-07 10:47:11.165 debug: [Mail] SMTP server URL: 'smtp://arve.knudsen%40gmail.com:[email protected]:587' 2015-05-07 10:47:11.172 debug: [Populate] Found a license: cc-by-sa-3.0 Exception while invoking method 'forgotPassword' AuthError: Invalid login - 435 4.7.8 Error: authentication failed: at Object.Future.wait (/built_app/programs/server/node_modules/fibers/future.js:398:15) at smtpSend (packages/email/email.js:76:1) at Object.Email.send (packages/email/email.js:153:1) at Object.Accounts.sendResetPasswordEmail (packages/accounts-password/password_server.js:421:1) at [object Object].Meteor.methods.forgotPassword (packages/accounts-password/password_server.js:365:1) at maybeAuditArgumentChecks (packages/ddp/livedata_server.js:1617:1) at packages/ddp/livedata_server.js:648:1 at [object Object]._.extend.withValue (packages/meteor/dynamics_nodejs.js:56:1) at packages/ddp/livedata_server.js:647:1 at [object Object]._.extend.withValue (packages/meteor/dynamics_nodejs.js:56:1) - - - - - at SMTPClient._actionAUTHComplete (/built_app/programs/server/npm/email/node_modules/simplesmtp/lib/client.js:826:23) at SMTPClient._onData (/built_app/programs/server/npm/email/node_modules/simplesmtp/lib/client.js:329:29) at CleartextStream.emit (events.js:95:17) at CleartextStream.<anonymous> (_stream_readable.js:765:14) at CleartextStream.emit (events.js:92:17) at emitReadable_ (_stream_readable.js:427:10) at _stream_readable.js:420:7 at process._tickCallback (node.js:448:13)

Implement infinite scrolling for projects grid.

Projects grid should have infinite scrolling implemented.

Show loading view while deleting project`

SSIA

Disable hot code push while user is editing

While user is editing something, hot code push must be disabled.

The following is example code for accomplishing this:

Meteor._reload.onMigrate(function(reloadFunction) {
  // Check to see if you should stop migration.
  if (Meteor.router.templateEquals('templateThatShouldPreventReload')) {
    // Set up an autorun that watches a reactive source. When that changes to
    // a value that shouldnt stop migration, go ahead and call reloadFunction().
    Deps.autorun(function(c) {
      if (!Meteor.router.templateEquals('templateThatShouldPreventReload')) {
        c.stop();
        reloadFunction();
      }
    });
  } else {
    // If you are ready to migrate, just return [true]
    return [true];
  }
});

Fix styling of e.g. forgot password dialog

Ensure consistent styling of application. Currently, e.g. the forgot password dialog is unstyled and the same goes for error dialogs.

Ask users before canceling saves or deleting projects

There should be a dialog asking for confirmation before canceling a save or deleting a project.

Consider transitions between tabs and pictures

Consider implementing content transitions when switching tabs for a smoother user experience. Consider also smoothing transitions between pictures when the user clicks on thumbnails.

Not sure if this can be best implemented via CSS or JavaScript.

Redirect HTTP requests to HTTPS

HTTP requests to muzhack.com should be redirected to HTTPS, probably by configuring nginx.

Don't allow editing by unauthorized users.

Unauthorized users (non-owners) should not be able to edit projects.

Figure out why a project owner isn't found in database

A lot of the time, the evlviolins user isn't found in the users collection of the database. Figure out why.

Implement resiliency wrt failing uploads

Be resilient towards failed S3 uploads.

• Creating projects
• Editing projects