My new app ‘r.note’ and the value of keeping a side project
Try r.note at: http://rnote-alpha.herokuapp.com/
Why start a side project now?
While working through a software development program like Launch School you learn a lot. With so many new technologies and development patterns thrown your way over a lengthy period of time, it can be easy to get a bit rusty with some of the earlier concepts you learn.
In Launch School there are two core curriculums when it comes to learning the fundamentals of programming: back-end development and front-end development.
Back-end development is primarily concerned with the main program logic, reading and writing data from a database and orchestrating the flow of data between the server and one or more clients (ie. browsers or mobile apps). The style of programming required for this work tends to be very logical and algorithmic in nature.
Front-end development requires a completely different headspace. Here we’re primarily concerned with the presentation of data to the user. Where are things positioned on the screen? What colors and fonts will be used? What are the optimal workflows and how dynamic should the user interface be? The style of programming here tends to be significantly more declarative. For example, it’s less about giving the computer instructions on how to make an object look red and more about explicitly stating that the object’s color is red.
Needless to say, your brain is required to think in very different ways depending on which side you’re working on.
As I completed the back-end curriculum at Launch School and began to work on the front-end curriculum, I realized that my logical back-end chops (including knowledge and proficiency in the Ruby language, Sinatra framework and PostgreSQL database language) might start to wane if I didn’t keep practicing. However, there’s only so much benefit to repeating the basic exercises, that you’ve already gone through, over and over again. After a while, it’s just not that interesting anymore. Plus, in the real world, you need to be able to build stuff that people want to use, not just solve contrived practice exercises. I realized that I needed a side project.
After giving it some thought, I determined that for a side project to be a meaningful and valuable use of my time that it would have to meet three key requirements:
- The project would have to make use of most or all of the skills and technologies I had become proficient with so far. Not only would this force me to practice what I already knew, but I would need to combine technologies in ways that didn’t have a ‘happy path’ already provided by the course if I got stuck.
- The project would need to result in a tangible, fully functioning product that could be useful to other people (even it wasn’t overly sophisticated or designed to scale to millions).
- The project would need to be something that could inspire me to keep pushing through the challenges and self doubts of learning to code online. Ideally this project would result in an application that I could use myself and that I could personally get passionate about.
With those ideals guiding me, I set out to come up with a project concept that would be a suitable fit.
The origin of ‘r.note’
Prior to starting Launch School I had a 14 year career in corporate sales. For most of that career I worked with large, multi-hospital health systems in the US. These were some of the most politically and organizationally complex entities you can imagine working with.
To move an enterprise level deal forward often required that I identify and engage with stakeholders at all levels in an organization; across departments/hospitals and across stratums of administration (corporate and regional). Deals also take a lot of time to push forward to completion. In some cases as much as two years would pass between my first communication with a client and finally getting the contract signed.
With so much to keep track of (notes, opportunities, contacts, stakeholder goals/challenges, relationships, next steps, deliverables, etc.) you need a good system to organize all of this information. Typically this system comes in the form of a Customer Relationship Management system, also known as a ‘CRM’ system. The most well known CRM system comes from the company, Salesforce. (You might have heard of them; they’re a pretty big deal.) CRM systems like Salesforce are incredibly sophisticated and do an amazing job of organizing all of this sales related data so that it’s easy to track and report on. However, if you ask just about any salesperson that works on large, complex deals, you’ll discover that almost none of them actually use their CRM system to track this information. In fact, there is actually a term for this problem among sales executives: ‘CRM hygiene’. It is a constant struggle for sales team leaders to get their sales teams to update the company’s CRM system with up to date information. Why is that?
From first hand experience, I can tell you. The flip side to all that sophistication that CRM systems offer is complexity and poor UI design (from a salesperson’s perspective). The problem is that these CRM systems are primarily designed to organize and store data in a way that is optimally designed for reporting. Sales leaders and company executives need these reports to monitor their deal pipeline and forecast revenue to shareholders. As such, it’s not hard to see why these systems are designed more towards the needs of executives and less towards the comforts of the individual salesperson.
Given that, as humans, we generally prefer our lives to be easy, rather than hard, it’s not a great leap to imagine why a busy sales professional would eventually get tired of using a system for managing their day-to-day notes that is slow and cumbersome to navigate. Some salespeople gravitate to a system of folders and Word documents while others to applications such as Evernote or OneNote. These applications are specifically designed to be user friendly and are much faster to navigate than a CRM system. In just a few seconds I can open Evernote (or a folder on my desktop or Google Drive) and find the file I’m looking for. A quick scan of my notes will tell me what I need to know and I’m ready for my call/meeting/presentation, etc. It’s just as easy to add new notes.
From a salesperson’s perspective this is definitely an improvement. However, with simplicity and ease of use you sacrifice some of the benefits that a CRM provides, namely the ability to relate records to each other in a meaningful way.
For example, if I’m working with a health system that has a main administrative office, multiple regions, multiple hospitals under each region, and each of these entities could potentially have their own contacts, sales opportunities, customer status, etc., how can I possibly model these relationships (for quick reference) with a bunch of Word documents or Notebooks? Perhaps I could come up with an elaborate folder system or maybe write out all these connections in yet another document, but that’s cumbersome and difficult to maintain and salespeople are impatient.
It was this challenge that I struggled with throughout my entire sales career, and ultimately, what lead me to the idea of ‘r.note’.
Designing a better way
For years I had envisioned an application that could bridge the gap between the complexity of an enterprise CRM system and the simplicity of a note taking app. I had an idea, but unfortunately, I didn’t have the skills necessary to implement that idea. Regardless, I decided I’d try building out a simple prototype just for fun.
Here’s a few screen captures of my initial prototype, built in PowerPoint back in 2013:
It’s pretty ugly, I admit, but it does capture some of the essence of what I wanted to create: An easy way to take notes that included a flexible way to link those records together.
A couple of years later, I decided I was going to take a run at becoming a software developer and joined Tealeaf Academy (now Launch School). Unfortunately, I lost my momentum about six months in, but before I stopped, I made an attempt to create a version of a CRM system based on that earlier vision. Here are some screenshots from that application:
This application was built using Rails for the application server, PostgreSQL for the database (although I did all database work through Rails and didn’t actually write any SQL code) and Bootstrap for the front-end (as I didn’t really understand how to build my own layouts at the time).
I was pretty proud of what I had created, although stepping back, it was clear that the design was too rigid. I could only create records from a list of pre-defined options and that wasn’t going to be flexible enough for what I had in mind. This application would basically be a watered down CRM system without the advantages of a note taking app.
So, not quite what I had hoped for. None-the-less, it was a fun challenge and a good exercise to work through at the time.
Flash forward to the present day and I’m back at Launch School, this time determined to complete the program and start a new career as a developer. With my tuned-up programming skills, I decided this long desired vision I had for a flexible information management application could be the perfect fit for my side project. It had everything I was looking for:
- It would definitely make use of all the skills I had learned before, without requiring me to know everything about front-end development (or Javascript) just yet.
- The project would result in a fully functioning product that was useful to me (and hopefully others).
- Realizing a multi-year vision I had for an application that could make my life as a salesperson better was very motivating (even if I had no plans to return to that career path).
Now, sold on this concept as the project I wanted to work on, I got started on a new prototype for the application.
Here’s what I came up with (this time designed in Google Slides):
Definitely an improvement over the previous prototype. Based on this new design you could easily create folders of any ‘type’ (ie. account, contact, opportunity, etc.), create and save notes in those folders, and crucially, link folders together in any combination you like. In fact, my vision for a salesperson friendly note taking app had evolved into an application that could be used in a variety of different situations: project management, brainstorming, flowcharting and planning events (to name a few ideas).
From there, I started work immediately on building the application. I would use the Sinatra framework for the application server, PostgreSQL for the database (all coded by me this time) and plain HTML/CSS (with a sprinkle of JQuery) for the front end. I specifically wanted to avoid using a framework such as Bootstrap for the front end in order to ensure I was sticking as close to practicing the fundamentals as possible.
About two months later I completed what I refer to as the ‘alpha’ version of the app. It has a landing page, users can create new accounts, all of the core functionality works and most of the bugs have been ironed out. There’s a long way to go between this version and a production quality application ready for the world, but this felt like a critical milestone on the path.
Here is what the ‘r.note’ looks like today:
All combined it took me about two months to get r-note to this point, working on it part-time while simultaneously pressing on with the core Launch School curriculum. And throughout the development cycle I used pretty much every concept we were taught in Launch School.
This presentation and UX, I think, comes much closer to realizing the vision of my original concept: ease-of-use and flexibility. There’s more that I could do to improve usability for those who are unfamiliar with this type of application, but for now I think I’ve got a pretty good base to work from. Enough, at least, to get the app out there into the hands of others and to start collecting usability feedback.
Going forward there are a number of enhancements I’d like to introduce including: rich text editing (which I should be better equipped to implement once I complete the Javascript courses at Launch School), use-case based tutorials (to help users better understand how the tool’s design can support a variety of applications) and general UX/UI enhancements. Ideally this can be a side-project that grows with me as my skills improve.
Things I’ve learned from this project
When you go off-road and start building your own applications, you learn a lot. Here’s a few key lessons that I took away from working on ‘r.note’:
Programming is like riding a bike (that has no wheels, a monitor and a keyboard)
Almost as soon as I started working on this project I felt the impact of time on my proficiency with Ruby, Sinatra and PostgreSQL. The most notable challenge for me initially was remembering how to write SQL queries. At first it was a bit intimidating. I wasn’t sure if I’d be capable of writing the queries required for the application or if I’d be able to design the entity relationships correctly. However, after re-visiting the Launch School lessons, the PostgreSQL documents and my own notes, it all started to come back pretty quickly. Google in general, and online forums like StackExchange were incredibly helpful as well.
So don’t feel too intimidated if you’ve gone a while without practice. The great thing about Launch School is that with the focus on fundamentals, repetition and circular learning, those core concepts are lodged in your brain better than you might think. That said, you should make sure to jump on the bike once in a while because it’s good exercise :)
Take good notes in class
Further to the previous point, your own notes are a fantastic resource. I relied on my own notes from the course during this project A LOT. Assuming you understood the material the first time through, there’s no better documentation than that which was written by your own hand, in the way you think.
If you don’t already take copious notes while working through the Launch School program, I would highly recommend you start now.
Your project as a future resource
One of the best outcomes of working on a project like this is that it becomes a reference and guide for future you. Having an application you built that combines all of the skills you currently have will make it that much easier to jump into your next project. Having done the hard work of taking those new skills and technologies and combining them into a working application will make it so much easier to repeat the process in the future. Especially because you now have a code base to reference in case you forget exactly how widget A connects to widget B.
Deploy early and often
I would recommend launching to Heroku (or whichever platform) as quickly as possible (and occasionally thereafter) just to make sure it works. There’s all kinds of oddities that can occur when you’re launching an app that wasn’t carefully designed for students to use in a course.
For example, I had made some changes to a project folder name along the way, not thinking of how that could impact my app on Heroku. The next time I tried to push to heroku master everything exploded. Eventually I was able to reason out that I needed to re-alias heroku master, so no big deal, but situations like this can be really confusing and frustrating to encounter, especially if you’ve done a lot of work and then can’t actually launch your app!
Also, on a previous project, I got all the way to the end only to find that I had built my app with a file system that was not fitting with Heroku’s deployment model. That was a bummer, and something I could have designed around had I discovered it by testing my app on Heroku earlier.
You can and will figure it out with enough time and effort
Along the way there were a few times where I encountered a challenge that I didn’t think I was going to be able to overcome at this stage in my journey as a programming student. In one case I wasn’t sure how I was going to be able to scrape links for previews when a user added a link as a note. In another case I couldn’t figure out how to get the screen to jump down to the note the user was editing after failing a form validation. And in yet another, I couldn’t get a pop-out box to z-index correctly or display the right data from a list. In all cases I considered designing around the problem (ie. not implementing the feature), but that felt like a cop-out. So I stuck with the problems, researched some more online, and eventually found elegant solutions to all. The first issue I solved with a Ruby Gem that scrapes metadata (including images) from links, the second issue took just a few lines of JQuery, and the third issue took revisiting the Launch School course on creating pop-out boxes.
If you stay with the problem long enough, you’ll eventually work it out, no matter how complex or insurmountable it feels at first. And if that fails, just ask someone smarter!
Stay focused on Launch School
When you’re working on something your passionate about, it’s easy to want to focus more of your time on that something. Assuming you are a student at Launch School (or some other school/bootcamp), and if you do decide to start your own side project, make sure you don’t get too carried away with it and forget to continue progressing your way through your school’s core curriculum. It feels great to build something of your own design, but it’s equally important to continue learning new concepts.
Conclusion
Getting r-note from a prototype on Google Drive to its current state has been a really interesting and rewarding journey. It’s also been a great confidence booster to know that I can use my newly acquired skills to produce a real working app that other people may find helpful.
Working on this project has done wonders to help drive the concepts and programming patterns further into my brain. There’s something about applying knowledge to new, uncharted challenges that just really helps to make it stick and I can easily say that I feel much more comfortable with Ruby, Sinatra, PostgreSQL and Heroku now.
Overall, this project has been enormously helpful to me. I’m also pleased to share that working on this project did accomplish the three goals I had originally identified. Most of all it’s been a lot of fun to apply my programming skills to a project I’m passionate about. It feels good to build something of your own, and those feeling can help buoy your spirits and carry you forward through the challenges of learning how to be become a developer. I would highly recommend the experience to everyone else.
If you’d like to checkout r-note, feel free to make your own account and play around with it. And, if you have any feedback you’d like to share, I’d love to hear it. Currently it’s optimized for a desktop experience in Chrome.
Try r.note at: http://rnote-alpha.herokuapp.com/
Thanks for reading and happy coding!
