How To Make An App Like Trello: Case Study By QArea’s Expert Web Developers

Project Brief

A marvel from web development experts, Strategic Quadrant is a product designed to enhance decision making and team management efforts. While inspired by Trello, the product still delivers certain levels of innovation to the “traditional Kanban” board of tasks and assignments.

Even a single Quadrant allows new possibilities for teams: tasks can be easily organized, tracked, discussed in a sophisticated, collaborate fashion. That noted, the 2X2 matrix greatly enhances better and faster decision making.

After 750+ hours of work our team came out with the following functionality for the product: we’ve implemented the 2X2 matrix design, ensured that documents can be uploaded and downloaded and integrated search mechanics.

We also designed custom reporting as well as visualization mechanics and a personalized assessment formula.

These are the factors that define Strategic Quadrant as a standalone project management platform. Feel free to give it a test-drive.

Technologies behind Strategic Quadrants: React+Redux, NodeJS, MongoDB, JavaScript

The story behind the Quadrants

Andy Sio, a friendly gentleman and an exceptional Agile Coach grew tired of Excel at one point of his career. The tool, despite wide spread and vast availability is too darn plain to provide clients with a truly remarkable, one-of-a-kind level of service.

Apps like Trello, Redmine or Jira are a decent substitution with their own respective strengths and weaknesses. But, more often than not, they don’t do the trick. Or, at least, not in the way users expect they would. In simpler words, a lot of project management tools share the same sin – they lack an edge.

And you know what? It doesn’t even matter! Those tools are already established resources with massive followings and armadas of diehard fans. A lot of people dig Trello or Jira. Let them. You have no right to judge unless you have an alternative to offer.

Andy had an alternative at the moment. He had an idea.

All he needed at the moment was to hire a developer to make an app. That’s when QArea entered the stage. Here’s how our little journey to a better project management app began.

“The idea came to me when I was helping clients to do business modelling. We used excel to do the work. It was difficult to manage over time as teams need to make changes frequent and we also need the ability to share among team members. As a result, I decided to build a tool to do it.”

– Andy Sio

Not to get ahead of ourselves, but here’s what our web development experts managed to deliver, based on Andy’s ideas: A system tailored exquisitely for:

• Efficient communications;
• Near-flawless collaboration.
• Effective decision making;

The difference

Strategic Quadrants re-imagines Trello in terms of UI and basic functionality and yet the app we built is different. Some of you may even say that the Quadrants offer more to it’s users.

Trello has cards and that’s pretty much it. You, as a user, are offered with a canvas, a board of sorts. Our team introduced models – the card’s elder brother -into the equation. They are basically an array of settings you can apply to a card and grade the progress later on. Managing a project whilst keeping an eye on overall progress as well as productivity is now a walk in the park.

That noted, users are also empowered to generate a chart from all the cards to have a look on the bigger picture. The chart is filled with analytics and clearly displays strength and weaknesses of a team or even an entire company.

Not Trello!

Custom, unique functionality was, obviously, the most challenging part of the entire development process.

Making cards is easy. Making them work, on the other hand, is not. Especially if you are expecting massive load and each one of them has to be tied to custom attributes, inputs, and filters.

The choices of our web development team

QArea’s expert web development team had quite a journey in front of them. Let’s start with talking about why we did something instead of how we did it. This mindset is an essential element of clever business-oriented development planning, because it happens to save a lot of time and costs in the long run, because we can afford ourselves to avoid any unnecessary work.

Here’s why we chose React for the project. First and foremost, React is not a framework, but rather a library. Yes, some may consider it a downside, but we do not. At least for this particular project we don’t.

A library topped our odds for a Trello-like app because it offers a declarative method for defining UI components.

That noted, React allows for absolutely separate front-end and back-end development. Andy was particularly picky when it came to the design of his app, hence we needed to make sure tons of upcoming changes won’t be affecting the entire system. React’s presentative layer did just fine.

The level of freedom and flexibility we required for this project was also complimented by the fact we chose a library over a framework. Frameworks have rules that lead to lock-ins, while libraries have a philosophy you can always bend to your will or simply ignore if need be.

More on that notice – we’ve paired React with Redux. Why? Because Redux is simply amazing when it comes to managing data-state as well as UI-State JS apps.

Redux allowed us to store our entire app state in a single place or a “store” if you will.  This way neither of the app’s components had the need to dispatch state changes directly to other components. This is in fact, an important element of the application because we’ve managed to prevent chaos between components in the application.

Now I will say components once again for you to entirely get lost. And once more, just for the bells and whistles: components, components, components.

Obviously text isn’t the best way to highlight how helpful Redux was, really. So here’s an image. Hopefully, it will make for a decent clarification!

All in all, Redux made the data flow easier.

Then there’s NodeJS. We were, after all, making an event-driven application. NodeJS allowed us to create a main loop that’s on a constant lookout for all kinds of events happening in the system. The loop is there to trigger a call-back function once an event is noticed.

The non-blocking I/O API was also one of the major benefits, if not the most important one for Strategic Quadrants, given the application will be under constant, massive use. The API optimized the app’s scalability and it’s throughput.

NodeJS is, well, JavaScript, meaning we could use the same good old language on both front-end and back-end of the app without any second thoughts or additional considerations. This allowed us to save dozens of hours on development because we were empowered to build features, not patches or fixes.

And, finally, there’s MongoDB. Its benefits are well-known and yet I would still like to highlight why it was the best choice for a Trello-inspired application. Our team was gaining clarity in the structure of any given object. There was no need for complex joints or even schemes – in MongoDB, a single database is a collection of different documents.

Endgame

Now that we knew what we needed the time was right to show results. And is there a better way to check if we did well, then compare what was brought to the table by our engineers with relevant benchmarks everyone looking to find web developers for a startup should be aware of?

According to Ruby Garage, the schedule for a project that big of a scale will require a team of six (one designer, two front-end developers, two back-end developers and a single QA engineer) and it will take anywhere from 1,152 to 1,278 hours.

We released the product in as little as 763.8 hours. And it only took three people from our side – one developer, one designer and a Project manager.

How’d that work?

For starters, we were smart about tool choices. The blend of React, Redux, NodeJS and MongoDB worked out seamlessly. The architecture allowed for us to create great designs separately from the app’s back-end, database interactions were smart and consistent and, lastly, we avoided complex joints or hard coding.

We had the most fitting tech on our side, and we also had a little secret – an ace up our sleeve. That ace was a system we developed over 17 years in the business of outsourcing.

Care to learn more about it? Sure you do!

Lean a bit closer, because we are about to show you how to make this

Into this

The procedure that allows us to prevent errors from even happening before wasting any time on fixes is what we like to call the Continuous Success methodology. We will only describe it briefly here, but you can learn much more from an article one of our PMs previously wrote. Learn how to  say a loud “NO” to technical debt.

So how does Continuous Success work for our clients? We start the process from stricks analysis of technical requirements and come up with exceptional architecture choices as well as the most fitting technologies. All of that is already covered above.

The next stage of an endless cycle is constant control. We use automated tests on every single line of code before submitting it into the repository. We enhance automated tests with a static code analysis tool we’ve made from scratch for the sace of more transparent outsourced projects. The tool operates according to SQUALE rating standards.

This way all of the code our developers produce is checked not once, but twice with automated test. Not only do we test it’s functionality, but the complexity of sintaxis, hard coding flaws and much more. It’s even safe for us to state that the code we deliver is mostly bug-free.

Our clients are involved on every stage of development. They clearly see the progress as well as analytical statistics based on issue probability and can (if need be) guide us to safer business decisions.

That’s it!

No, seriously, that’s it. That’s all you need to know to make your own Kanban canvas app. Well, technically, sticking all of the components together, wire-framing, designing and planning takes some additional time, but it’s more of a mechanical thing. Grab a bunch of savvy developers, choose the best of web development firms, show them what you need and how to get there.

The rest, as they say, is history!

But don’t take just our word for it. Here’s what Andy Sio from Strategic Quadrants has to say about our work on his product:

“I’m impressed with your developers. Good talent at affordable rate.” 

                                                                                     – Andy Sio, Strategic Quadrants