Quality MVP Development Services: How We Helped Popr.ai design, build, and launch its MVP with Node.js
For entrepreneurs, MVP software development is a more budget-friendly way to test a product, attract early adopters, and validate its market potential.
Early adopters are risk-takers in any industry: they test products they know aren’t perfect but may revolutionize the market. For your product to take off, you need a minimum viable product (MVP) that can impress those early adopters and get them raving about it to everyone they know.
GIF tool Popr.ai wanted to design and build an MVP after validating some initial prototypes with potential users. But its founder, Jeff Hatten, didn't have the technical background or the resources to do it alone. So, he turned to NaNLABS to help get his product ready for the market, attract early adopters, and validate its market potential. Here’s how we did it.
Ready to build your own custom software with a team that cares about you and your processes? We’re not code monkeys, we care about you.
Meet Popr.ai, a tool for creating slide-based GIFs at scale
Popr.ai is an easy-to-use software as a service (SaaS) web app that helps users create slide-based GIFs. Each GIF can be personalized with messaging unique to both the sender and the recipient.
Popr.ai is particularly helpful for
Sales teams engaging with prospects and new leads
Success teams staying on the radar of customers
Recruiting organizations looking to wow top talent
Anyone wanting to provide a great first impression to new connections on LinkedIn
Jeff Hatten, founder of Popr.ai. said
With his app, Jeff wants to help users tell a story, share a message, attract attention, and trigger engagement in a crowded market.
Popr.ai enables users to create personalized GIFs.
The brief: Design the minimum viable product (MVP)
Jeff wanted to transform Popr.ai’s proof of concept into an MVP and add new functionality to:
Provide a user-friendly platform experience
Scale as the user base grows
Keep everything backed up by a reliable technology stack
Reduce user waiting time when generating GIFs
Automate systems and reduce manual processes
Enter NaNLABS, MVP app development experts
Since he didn’t have a tech background, Jeff was looking to partner with an MVP app development company, but the expensive options within the US didn’t appeal—some companies even wanted a million dollars for the project.
But outside the US, the agencies Jeff found didn’t meet his expectations when it came to engineer talent. Compared to NaNLABS, he said, “the level of competency and their interest in my product vision was night and day.”
When Jeff found NaNLABS, he knew it was the right fit for Popr.ai.
As Jeff found out, you don’t just outsource your project to NaNLABS and never hear from us again. We become an integral part of your team to evaluate your project, make improvements, manage the custom software development process, and reduce your time to market.
The challenge: Manual processes, limited resources
The initial product idea and proof of concept that Popr.ai was testing relied on manual processes and was fairly basic. In the early days, this worked just fine, but it wouldn’t be scalable for any influx of users. Plus, a personalized GIF took up to 15 minutes to generate, which was making it tough for Popr.ai to really win users over.
As his clientele grew, and his business goals expanded, Jeff needed automated enterprise level software to streamline his workflows. There were a few other key technical challenges that defined his partnership with NaNLABS:
Direct copy and paste functionality within Google Chrome
Easy extraction of a contact’s information from LinkedIn
Generating hundreds of high-quality animated GIFs on demand
Launch a successful MVP product in a 90 days timeline
On top of that, Jeff was going from solo entrepreneur pitching to our sales team, to effectively working with an in-house development department. From setting clear timelines, budgets, and expectations on resources and deliverables, our teams needed to coordinate closely.
The solution: A user-focussed software for easy adoption
To help Jeff build his custom MVP, we set up a team of 3 full-stack developers, an UI/UX designer, and a project manager. Our tech stack comprised:
ReactJS for front-end coding
NestJS for back-end development
MongoDB for the database
AWS Lambda functions for generating high-quality GIFs
S3 buckets to store the generated GIFs
Once the team and tech stack were in place, it was time to get started. Here’s what we did to overcome Popr.ai’s unique development challenges.
1. Seamless handover to the NaNLABS development team
To make sure Popr.ai’s handover to the development team at NaNLABS was smooth; we created a proposal document to outline important information like:
The client's name and background information
The type of service we would provide, including the specific technologies we’d use
The timeline for the project, roadmap, and the due date
The team members (and their expertise) who will be working on the project
The documentation process and the client's roles and responsibilities
It was important to us that all communication with our client was clear, but this document was just the start, said Jeff.
2. Using Google Chrome extension to extract information from LinkedIn
Personalizing GIFs is only as good as the data it has to work with. Jeff wanted his users to be able to personalize GIFs with the recipient’s information without having to enter the data manually. It was also important to him that the GIF could match the receiver’s own company branding, rather than just the sender’s (or Popr.ai’s).
We found that Popr.ai couldn't extract LinkedIn users' information to personalize GIFs because the social media platform's security features prevented it—and LinkedIn offers no API for sharing user data in this way.
So, NaNLABS found a way to pull data like a person’s name, profile picture, and place of employment from their LinkedIn profile using a Google Chrome extension. Once the extension was ready, users could easily extract data from LinkedIn with just one click. The extension also connects to the Brandfetch API, easily replicating the recipient's company logo and brand colors.
3. Reusing code among different modules with NPM workspaces
“One of the things I envisioned was that it would be super easy for the user to copy a GIF from the Popr.ai dashboard and paste it to your email or LinkedIn messages,” said Jeff. But he soon found that Google Chrome doesn't allow users to copy and paste an animated GIF. Instead, GIFs are pasted as thumbnails or just one frame from the GIF—making it a regular image.
Since we had already created the Google Chrome extension, this helped us overcome the issue. We copied the IMG TAG (HTML) format and pasted it into every site that reads HTML, such as Gmail and G Docs. This helped improve the user experience and make Popr.ai available across browsers.
We wanted to keep the same look and feel in both the web app and Chrome extension. So we reused the code and created a library in Node Package Manager (NPM) workspaces that could be used in both projects. That meant we didn’t need to duplicate code to create the visual components.
Popr.ai allows users to personalize GIFs unique to the recipient.
4. Using Remotion to generate GIFs on-demand
During the proof of concept phase, Jeff had to create GIFs manually using tools like Adobe. Each GIF had to be created manually, so it would have been difficult (if not impossible!) to scale as the number of users increased.
Drawing on our experience with Node.js development services, NaNLABS introduced Remotion, a framework that creates videos programmatically using React.js. Each GIF is created using a library called emotion—generated in AWS lambda functions, and stored in an S3 bucket.
Using Remotion reduced Popr.ai’s GIF generation time to between 6-15 seconds (depending on the duration of the GIF) and eliminated any need for manual intervention.
5. Implementing Agile to launch the MVP product within the timeline
The whole purpose of having an MVP is to test your product with stakeholders, see how it works, and make changes accordingly. For that reason, we needed to make sure Popr.ai’s MVP was ready for market quickly without compromising quality.
At NaNLABS, we live and breathe Agile principles because they help us work more efficiently. To get Popr.ai off the ground fast, we implemented the following Agile practices:
One-week sprints to refine the product development process
Daily team meetings to ensure that the product design was on track
A continuous delivery process to ensure that the product was always available and up-to-date
Working in sprints allowed us to deliver working software from the get-go. Popr.ai could give us feedback on product design definitions, early versions of the product, test integrations as we went. This allowed us to refine the new product quickly, fix bugs, and keep the team focused on priority tasks while creating something that was both functional and user-friendly.
The results: Early adopters and validation
Since the delivery of the MVP, Popr.ai has been able to start scaling up its user base without any hiccups. It has now launched the beta version of the app and is in the maintenance and support phase.
Using software development services, Popr.ai:
Attracted a waitlist of beta users for testing its successful MVP
Reduced GIF generation time from 15 minutes to under 15 seconds per GIF without manual intervention
Developed a custom Google Chrome extension for easier data extraction from LinkedIn profiles
Integrated with the Brandfetch API to include the recipient’s company logo and primary brand color in every personalized GIF
Achieved early validation of its MVP among beta users
Popr.ai is in the process of gathering customer feedback from real users and creating a backlog of improvements and new features to develop during a second iteration.
Do you need MVP development services?
Every SaaS business needs an MVP to launch quickly, get feedback from early adopters, and iterate quickly to improve. The Agile software development model is ideal when building an MVP because Agile developers can work quickly to deliver high-quality software in a short space of time.
Consider hiring an MVP development company if:
You lack the technical know-how to design and develop your product
You need a reliable tech stack but don’t know where to start
You want to save time and resources through automated processes
You’re looking to launch quickly with a limited budget
You’re not familiar with Agile principles or need support bringing them to your team
At NaNLABS, we develop custom software solutions for fast-growing startups and SMEs. Our team will work closely with you to turn your product vision into reality, giving your software the scalability and robustness it needs to succeed. Let’s work together!
Ready to build your own custom software with a team that cares about you and your processes? We’re not code monkeys, we care about you.
Frequently asked questions about MVP development services
What is MVP development?
MVP development is the process of designing, building, and testing a product or business idea with key features in the shortest time. It’s used to satisfy early adopters and validate the business concept. This is done with minimal cost and risk, enabling businesses to gather user feedback and make improvements quickly.
Why is MVP development important?
MVP development is important for validating user's interest in your product and helps you:
Save time and resources as you can test your ideas without making a huge investment
Identify product-market fit and understand user needs quickly
Gather feedback from users and make improvements
Reduce the cost of development by releasing features in phases.
Acquire a potential user base and attract early adopters
Gather valuable data which can be used to refine your product
How long does MVP development take?
The MVP development process can take anywhere from a few weeks to several months, depending on the complexity of your project, feature set, team size, and budget constraints. Some sources state the average duration is between 3 to 6 months for SaaS applications. However, at NaNLABS, we recommend limiting the design and production of any MVP to 90 days—otherwise you could end up designing something more advanced than a minimum viable product before you’ve had a chance to test the market.
What is the difference between MVP and a prototype?
The difference between a minimum viable product (MVP) and a prototype is that an MVP is a production working application that contains the core features necessary to launch the product to the market quickly. A prototype is a simulation that demonstrates a software's functionality. Prototypes are deployed into the production environment to create MVPs which are then released to the public.
Is MVP development more economical than other development types?
MVP development is more economical than other types of development because it only includes the key features necessary to launch a product, reducing the costs associated with building the entire feature set and allowing for faster time to market. Additionally, the feedback from early adopters can help you focus on cost-efficient solutions to improve your product or service.
What do MVP developers do?
MVP developers design, build, test, and deploy the initial version of the product to allow early adopters to evaluate it before committing resources to further development. MVP developers are responsible for ensuring that all the features necessary for an acceptable user experience are included at launch and that any issues discovered during testing are rectified.