Developing the Yamaha Virago Service Manual app

While I love tinkering on my motorcycles, I’m a web developer first. I’ve been looking into somewhat new technologies that allow web apps to blur the line between a website and a native application, and I’ve been looking for ways I can experiment with that by developing my own app.

I found inspiration to do so when I was able to get my hands on a scanned PDF copy of Yamaha’s dealership service manual for the “gen 1” (1981-1983) Yamaha Viragos (Thanks Brian!). While 3rd party manuals exist that can be purchased (Clymer is a popular one), they’re usually not as accurate and for the Virago specifically tend to not be as detailed. When you’re rebuilding a Virago, you end up Googling or searching Facebook groups for answers as much as using the manual.

My issue with the PDF copy is that it’s extremely difficult to navigate compared to the mobile manual offered by Haynes, or even just a physical book copy. The text isn’t searchable, it’s difficult to find chapters, and there are no bookmarking features if you want to go back to a section you were looking at earlier. That’s when I came up with the idea of transcribing all 284 (53,000+ words!) pages into a web app that’s easily searchable, mobile friendly, and available offline.

Taking the paint points of the Clymer manual into consideration, I have three primary goals:

  • Make each chapter easily found by splitting them into sections and their own pages, making the contents of each page relevant to what the user is actually trying to accomplish in the moment
  • Make chapters and sections found easily with a search functions that search by preset keywords in sections in addition to basic text search
  • Design using a mobile-first approach, by being both responsive and conformant to slow or even offline mobile connections by making it available offline.

The app is being developed from scratch in React, using Google’s Material UI library for elements. The app is served using an ExpressJS server, complete with Server Side Rendering to offer an SEO-friendly website.

In addition to the three primary goals above, I have some additional improvements I’d like to add:

  • Updated high quality images (I’m currently using the original images in the manual, which are grayscale and low quality)
  • Additional info – common mods, videos, 3rd party wiring diagrams, and other resources
  • The ability to bookmark and annotate pages, for example to keep track of where you’re at while following step by step instructions

I’ve published a first version of the app, it can be found at At the time of writing, the Engine and Maintenance Schedule sections have been completed. Because I’ve been following a mobile-first methodology, at the time of writing it may not be desktop friendly.

Leave a Reply

Your email address will not be published. Required fields are marked *