Quality MVP Development Services: How We Helped Popr.ai design, build, and launch its MVP with Node.js

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.

Get in touch. We don't byte

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.

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:

1. Direct copy and paste functionality within Google Chrome

2. Easy extraction of a contact’s information from LinkedIn

3. Generating hundreds of high-quality animated GIFs on demand

4. 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. 

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.

Get in touch. We don't byte