WeJam
Tools
React
React
Node.js
Node.js
Python
Python
Socket.io
Socket.io
SASS
SASS
Figma
Figma
Overview

WeJam is an immersive band experience for groups of up to 6 people who can play popular songs together in sync.

This is made possible by a user interface that simplifies the song score, while still triggering the full track. A bit like Guitar Hero.

Loading...
gifs,wejam-studio-1.1.gif-image
My Contribution

I arrived at the company at a time when the experience was ready for booked sessions, but still bare bones in terms of UI and features. Here are some of the features I developed:

  • Game modes: studio, quick, school sessions, accessible for special needs, accessible for visually impaired
  • Stats Screen, with players' scores and metrics
  • UI Redesign: from a black and white, bare bones UI, to a colourful and dynamic theme, in line with the existing branding.
  • Python script that turns a MuseScore score into the images needed in the game (using Lilypond, a music engraving language)
  • Animated karaoke mode (CSS Animations)
  • Song list for browsing available songs and difficulties
  • Video tutorials and UI
  • Minimised random client disconnections
  • Facilitator controls to manage client tablets remotely
  • Migrated to Redux for more efficient state management (than the context providers)
  • Automating the score creation process in Python, by testing different note patterns for each difficulty
  • Optimising the server for faster loading and better connectivity
  • Adding animations for a more dynamic UI
  • Generating scores directly from code, for faster loading and real-time feedback
  • Side-scroll animation
Loading...
gifs,wejam-play.gif-image
What I Learned
  • Becoming familiar with an existing codebase
  • Coding with consideration for other developers
  • Reusing code and components
  • Complex CSS animations managed by custom classes
  • Git versioning and GitLab
  • Pair programming and pair debugging
  • Workflow automation with Python
  • Improving server logs
  • Using a project management tool
  • Refactoring, evergreening, migrating to better technologies
  • Designing UI in line with a brand
Loading...
gifs,wejam-setUpPlayer-1.1.gif-image
D&M Academy
cloud-1
cloud-2