WeJam
Tools
React
Node.js
Python
Socket.io
SASS
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.
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
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