Documenting the entire process of creating a workflow management web app for Encreators Software and Media Pvt Ltd on the MERN stack entirely using mern.ai and MagicJS.
Project Date: May 15, 2024
Deliverables: Web App Development & Deployment
No. of Hours: 8(per day) x 40(20 days/month) = 320 hours
Project Cost: 320(hours) x $8(hourly rate) = $2,560
Project Overview: We were tasked with creating a Trello clone for Encreators, who have 500+ members across multiple boards. Additionally, we received customization requests and feature updates to better suit the client’s needs.
Contents
Creating a new project in mern.ai
Adding ‘Starter Kit’ to the blank mern.ai project
Adding ‘Kanban Board’ Magic feature
Adding additional user roles with permissions
Card management
Board management
Problem Statement
Encreators is a media company with over 500 members including writers, designers, editors, creators, managers, etc. They have been using Trello as their primary work management tool for over 2 years.
However, in 2024, Trello is changing its pricing model and moving most of its core features to paid plans. Initially, these features were available free of cost for businesses to use.
The paid plans start at $5/month/user and go all the way up to $17.50/month/user. This means that Encreators, with a 500+ team size, would incur an additional cost of at least $2,500/month ($5 x 500) to their operational expenses. This cost can go all the way up to $8750/month ($17.5 x 500) depending on the features they opt for.
The significant burden on their monthly cash flow proved a challenge to Encreators. The team decided to look for a permanent solution that did not require as much expenditure on their end.
Requirement Gathering
Posed with the challenge of overcoming the hurdle they were facing, Encreators approached the Professional Services (PS) department at mern.ai. The requirement gathering was carried out in two separate calls with the CEO and the administrative team at Encreators.
Discovery call: The CEO of Encreators, Mr. Abshar Abdulla, introduced the current workflow and the problem they were facing with Trello. The PS team gathered an understanding of the situation and planned a follow-up call with the administrative team at Encreators.
Subsequently, the PS team did a thorough study of Trello and its features in preparation for the next stage in the requirement-gathering process. A questionnaire was prepared to be put up for discussion in the next step.
In-depth analysis: A detailed look was taken at the workflow and various steps in the process. Rather than analyzing Trello as a standalone tool, the PS team looked at all the nuanced ways in which the Encreators team was using the tool. Additional requirements that were not part of Trello, but the team wanted to be included in the new proposed tool, were also taken note of.
Project Brief
Based on the requirements gathered, the PS team arrived at a project brief that encompassed all the features and spanned over a period of just 2 months.
As per the brief, the new tool would have users across 3 roles:
Super Admin: Users in this role will have complete access to the tool and have right to add/remove/manage all other users as need be.
Manager: This role is assigned to users who will assign/manage work to freelancers and oversee the quality of work produced.
Freelancer: Users in the freelancer role will have access to the cards they are assigned and view where they are on the overall workflow. They can submit their work inside the cards, post comments and change the status once the work is ready for review.
The project would be divided into two phases: 1. MVP Development & 2. Product Enhancement. The inclusions in each phase were as follows:
1. MVP Development
Super Admin:
Super admin will be able to log in and manage all users
Manager:
Can log in to the application
Can create multiple boards & stages
Can create/delete/update a card
Can add due dates & labels inside a card
Can assign members to a card
Can track the activity log of a card
Freelancer:
Can log in to the application
Can view assigned boards & cards
Can add the cover image of a card
Can add/reply-to/delete comments inside a card
Can attach links to comments
Can move a card to another stage
Can search inside a board for cards
Can filter the search based on labels and members
2. Product Enhancement
Manager:
Can add a checklist to cards
Managers will get email notifications on card activity
Can approve a card
Can add due dates & labels inside a card
Can restrict card movement
Freelancer:
Gets email notifications for idle cards
Can only move card after approval
General
Completed card will move into the Archive Board after 30 days
Project Initiation
Once the work plan and timeline were set, a developer was assigned to the project. A person of contact was assigned from the PS team as well as from Encreators’ side.
An understanding was reached to host weekly review meetings every Friday. Updates would be shared, and feedback would be taken for the next week of development at Friday meetings.
MVP Development
It was decided that functionality would be given higher priority over aesthetics in the MVP development stage. The idea was to make the product usable for Encreators as soon as possible.
Creating a new project in mern.ai
The developer signed into his mern.ai account and created a new project with the title ‘Encreators.’ He clicked on ‘Start Development’ to initiate the process and access the IDE. A link was also generated alongside where anyone with access to it can preview the app in real time.
The AI suggested adding a ‘Starter Kit’ as soon as the chat box showed up. The kit included fully functional features such as user signup, account recovery, admin dashboards, user management, user profile, app settings, etc. By clicking on ‘Confirm’ all these features were added to the project in a matter of seconds.
Time saved: 2 weeks
Adding ‘Kanban Board’ Magic feature
The developer selected ‘Kanban Board’ from the list of pre-built full-stack templates available in mern.ai. This template came with functionalities for Kanban board, cards, stages and card moving functionality. The list of functionalities included:
Board management: Adding new boards, deleting old ones and searching and filtering cards inside boards.
List management: Adding new lists, deleting old ones and moving cards across lists.
Member management: Adding new members to boards or removing existing members.
Card management: Adding new cards, setting due dates for cards, attaching images inside cards, assigning members to cards, and basic activity log of cards.
Time saved: 2 weeks
Adding additional user roles with permissions
In the final week of MVP development, an additional user role was created since the starter kit only had two user roles built in. The roles were segregated as ‘Super Admin’, “Manager’ and ‘Freelancer.’ Permissions and actions available to each user role were also defined.
Product Enhancement
Once the MVP was developed and user testing was carried out, it was time to do custom development work on top of it. This phase included a list of big and small development hurdles:
Card management
Due time: In the Kanban board Magic Feature, the card due date could be set, but not the time. The first development effort was dedicated to making that possible.
Enhanced image attachment: The basic image attachment feature in the Magic Feature was made better for contextual relevance.
Activity log: An advanced log of all the activities that were important for Encreators would be shown inside the cards.
Commenting: Adding images as comments inside cards.
Work tracking: Adding checklists inside cards.
Deleting: Moving cards to archive once the use case was fulfilled.
Sharing: Ability to generate links for each individual card and share them outside the app for faster access.
Board management
Real-time updates: Synchronous and real-time updates of card modification for easier and collaborative work management.
Restrictions: User restrictions for moving or editing specific features of cards based on user role.
Bulk movement: Moving a collection of cards together across lists on the board.
Bulk add: Adding multiple cards together to lists inside the board.
Delivery
The tool was put through intense testing internally within the PS team and also by the team at Encreators. Delivery was carried out in multiple phases to ensure bugs, if any, were promptly monitored and resolved. There were 3 phases involved in the delivery process:
Test App: Within 2 days of project initiation, the Encreators team received the test app link, which they could access and view progress every day. They were able to create test accounts and use functionalities as they were built.
MVP Delivery: The Super Admin, Managers and a few users were onboarded in the next phase of delivery at the end of the 4th week of development. They started using the app for their day-to-day activities.
General Onboarding: At the end of the 8th week, as per schedule, the entire team was onboarded onto the new app and the final phase of delivery was concluded.
Client Feedback
The notion we gathered from Encreators’ feedback was that they were extremely delighted with the quality of output produced. The app served its purpose to their fullest satisfaction.
“We engaged with the MERN AI team to develop a customized software based on our specific requirements. From the outset, the team demonstrated exceptional professionalism by creating a detailed work plan with clear deadlines for the primary launch and various development stages. Remarkably, they adhered to every deadline, delivering tasks promptly as agreed.
Understanding the nature of software development, we were informed about potential bugs and glitches in the initial phases. MERN AI team assured us of their unwavering support to resolve any issues that arose during the operation. True to their word, their 24/7 support service has been outstanding. Whenever we reported a glitch, the support team resolved the issue within an hour, ensuring our workflow remained uninterrupted.
Throughout the project, the MERN AI team exhibited remarkable cooperation and dedication. They were always available to clarify our doubts and worked tirelessly to meet all our requirements. Their efficiency and commitment have been instrumental in the successful completion of our software project.
We highly recommend MERN AI for their exceptional service and support.”
- Abshar Abdulla, CEO, Encreators
Conclusion
Developing a Trello alternative for Encreators was both challenging and rewarding. By leveraging the capabilities of the MERN stack, mern.ai, and MagicJS, we delivered a customized workflow management tool tailored to the specific needs of a large, diverse team.
Through meticulous requirement gathering, in-depth analysis, and agile development practices, we successfully created a solution that not only matched Trello's functionalities but also introduced enhancements unique to Encreators' workflow.
The successful deployment of the new Kanban board for Encreators is a testament to our expertise and dedication to client satisfaction. We would like to do the same for your organisation. Contact us today for custom web app development.
Comments