SimplQ: How we went from a hackathon project to a fully open source project with contributors
Tags: opensource, react, sideprojects, webdev
Published: 2021-01-16 16:56:59

TLDR; What started a few months ago as a small hobby project is slowly gaining traction as an open source project: [github.com/SimplQ](https://github.com/SimplQ). Key lessons learned:

1. Get a Minimum Viable Product up and running.
2. Iterate over a Design Prototype.
3. Work on a Product Roadmap and create small independent tasks.
4. Use labels to let new collaborators identify easy issues to start with (`up-for-grabs`, `good-first-issue` etc).
5. Add an informative readme and add detailed setup instructions, make the local dev environment easy to set up.
6. Be open-minded when discussing solutions for issues and leave helpful reviews on PRs.
7. List your project on websites where people look for projects to collaborate on
8. Invest in good automation, CI/CD ([TravisCI](https://travis-ci.org/) is free for public repositories).
9. Use affordable cloud hosting. I used [AWS free-tier](https://aws.amazon.com/free) (Got [AWS Activate](https://aws.amazon.com/activate/) $1000 founder's credits).
10. Invest in a meaningful domain name. 
11. Create a Github Organisation, update the description and create a simple logo. It gives your project a professional look... these things matter.

**The key is not to find collaborators, but to make your project collaboratable.**

Now the whole story...

In early April this year, we were four young software engineers locked up in our apartment, with no plans for the weekend, and wondering what to watch on Netflix.

## The Idea

I've always been awed by apps like Splitwise, where technology is used to create a free software that solves some annoyances in our life. That's when my flatmate saw a newspaper article (yeah, he reads the newspaper) about how there are long queues in front of grocery stores, beverage shops etc during the lockdown. Us being reasonably tech-savvy, soon the topic of discussion changed to see if we could build a simple website, which would allow people to enter a queue virtually, without having to stand in a line. And voila, [SimplQ](https://www.simplq.me/) was born. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s1aqqui0pzzp767pt4ds.png)

The idea was very straight forward: If someone wants to manage a crowd using a queue, go to [simplq.me](https://www.simplq.me/), give the queue a nice name and your queue dashboard is created instantly. You can then manage people in the queue, add and remove, notify, call them up etc. A joining link / QR code is generated, which can be stuck onto wherever people used to line up, and now instead of waiting in the line, they can get into the queue by going to the link. 

The database structure, backend, and the screens to be build were quickly finalised on a notebook, and we set out to work developing a basic MVP. Most of the work was completed in a weekend. Weekdays went with us focusing on our day jobs. We didn't want to leave it half done, so we worked on it over the next few weekends. We also enrolled in a Hackathon with this idea, which was very helpful as it gave us a deadline. 

By the end of the hackathon, a fully functional prototype was completed.

## Open Sourcing

Weeks went by, after which we decided that we should productionize it, so we worked on it in our free time to see if we can turn it into something that people would gladly  use. We did two things:

1) Redesigned the UI to give it a more professional look. I got my artistic friend to help out. He learned and work on a new design prototype using Adobe XD.

2) We decided to open source the tool.

By this time, our companies had gone completely remote, we left Bangalore and went to our hometowns. We met online regularly over the weekend and iterated over the design prototype. This exercise gave three benefits:

1. We could finalise on a design, and everyone had a clear picture about what is to be done, and what it's going to look like at the end.

2. We discussed and incorporated a lot of UX improvements which we would have missed while implementing. The cost of iterating over a design prototype is lesser than iterating over an already implemented product.

3. We were able to take the design, and use it to create an implementation roadmap, and then break into small tasks. The design link and screenshots were used heavily in the issues created, and this proved to be very helpful as anyone why was interested in picking up an issue had a clear idea about the task.

Though we used [XD](https://www.adobe.com/products/xd.html) I've also seen [Figma](http://figma.com/) being used a lot for prototyping. We haven’t had a chance to try it out yet, but free plans for both have all that's needed. If you are a creative mind like Akash, there are tons of tutorials for both the tools available online to get you started.

It is very important to have a `Readme.md` for the project, it should have detailed setup instructions to clone the repo and get the code running locally ([ours here](https://github.com/SimplQ/simplQ-frontend#development-environment-setup-instructions)). Also needed is a Contributing section with some instructions([ours here](https://github.com/SimplQ/simplQ-frontend#contributing)). 

Once we had a design, next was a website roadmap. It gives anyone who want to help out an idea about what's been planned, and how they can contribute in a way that their work fits into the project's overall plan. ([ours here](https://github.com/SimplQ/simplQ-frontend/issues/207))

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hsc4p4203x3l02onv99a.png)


The key is not to wait for collaborators, but make your project "collaboratable". One of the biggest learning was to break a problem into independent tasks, and create well-defined issues on GitHub. The XD design that we created paid off. You can find a sample issue [here](https://github.com/SimplQ/simplQ-frontend/issues/264). Someone looking at the issue should get a clear understanding of the task, then they send a PR most of the time.

The code should be easy to maintain and easy to change. We kept this in mind, and had to refactor and iterate till the code became decently [S.O.L.I.D](https://www.digitalocean.com/community/conceptual_articles/s-o-l-i-d-the-first-five-principles-of-object-oriented-design):

{% youtube rtmFCcjEgEw %}

Once you create your well-defined issues, the next step is to label them properly. We use labels like `You can do this` and `Good First Issue` to mark issues that don't have any blockers which someone new can readily work on. People/tools discover open issues on Github through labels.

After this, list your project on sites where people look for open source projects to work on:

https://up-for-grabs.net/#/
https://goodfirstissue.dev/
https://github.com/MunGell/awesome-for-beginners
https://firstcontributions.github.io/

In the last few months, I also finished two books which were really helpful, [The Lean Startup](https://hbr.org/2013/05/why-the-lean-start-up-changes-everything) which speaks the importance of thinking MVPs and [Zero to One](https://www.goodreads.com/book/show/18050143-zero-to-one) which is a good startup myth buster.

Finally it proved very helpful that my good friend [@maaveric](https://github.com/maaverik) was around to review all my PRs. We reviewed each other's code. When your code goes through someone's review, you naturally start structuring your PRs well, and maintain the code quality.

There are some more points in the beginning of the article that I did not cover in detail. Let me know in the comments if there are any specific questions. I will encourage you to give this a try, you will learn a lot along the way. Thanks for reading!

***

If you would like to collaborate with me on SimplQ, do [check it out](https://github.com/SimplQ). Feature ideas, bug reports, feedback and suggestions are all welcome. (You can raise them as issues [here](https://github.com/SimplQ/simplQ-frontend/issues)). Please do comment on the code structure and how we could improve there if you are a seasoned web developer. My CSS is horrible, I think it can be improved.