MVP Development With React.js: How Our Client Went from Ideation to Scalable App in 3 Months

1. The code needed to be high quality

2. The technologies used needed to still be valid in ten years

Here’s the story of how we exceeded her expectations using React.js to develop an MVP for her personal discovery project—in just three months.

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.

Join Now

Table of contents

• Meet our client: A supplier relationship management expert

• The brief: Develop a scalable MVP

• The challenge: Deliver a high-performing web application

• The solution: Follow a functional programming approach

• The results: A high-performing app with a cost-effective hosting 

• Do you need a React.js development company? 

• Frequently asked questions about React.js web development for enterprise companies

Meet our client: A relationship management expert

For confidentiality reasons, we won’t mention the client’s name in this piece. So, to make this a more appealing read, we’ll call her Olivia. 

Olivia has many years of experience working with big firms in the supplier relationship management industry. She wanted to test out a personal idea: what if she could offer a similar IT vendor measurement service to businesses with around 2 billion in annual revenue?

To test out his hypotheses, she wanted to develop an application that could review the work quality of B2B IT services. Her aim was to create, maintain, and manage healthy relationships between clients and technology vendors. The app helps improve the quality of those partnerships by allowing each party to complete detailed yet easy-to-create and fill-out post-engagement surveys—and analyze the results.

Enter NaNLABS, experts in web and mobile app development

Olivia was looking for a highly knowledgeable software company that could deliver tidy and functional code. Since she was mainly interested in researching and testing out her ideas, she also wanted to work with a team that would listen to them and either implement them or challenge her. That’s when a friend of hers recommended NaNLABS. She chose to work with us because she trusted that we’d be able to deliver a technologically rock-solid web app.

The brief: Develop a scalable MVP

The project requirements were very clear; we needed to turn her very well-defined low-fidelity prototype into a high-quality scalable MVP using technologies with a 10-year arc. Here’s a more detailed description of the brief we got from Olivia. 

1. Build a web application with surveying capabilities

Our client wanted a progressive web app that stakeholders could access from any device through a browser. “I wanted to come up with a very simple methodology so that a person at the end of an IT vendor services engagement could take a quick survey to rate the stakeholders involved in that encounter,” Olivia explains. Users would use the results to track satisfaction levels against goals.

2. Collaborate seamlessly and connect in the same time zone

Collaboration was key to this client, so naturally, she needed a company that’d work in the same time zone as her. She’s based in the USA and had worked with developers in the Philippines and India before. She was pleased with the quality of their work but found it hard to collaborate due to the time difference. She also encouraged us to challenge her ideas or implement them if we agreed with her. 

“I could tell that [the developers at NaNLABS] were invested in learning the things I shared. There were videos and articles that I was reading and would share with them. They’d read or watch the video and then two days later, they’d say ‘I think we could apply it this way…’” - Olivia, Supplier Relationship Management Expert

3. Provide the best technical quality

Although it was just a personal project, Olivia wanted the app to be ready to scale, as though it were a typical MVP. This means she had high expectations and wanted the code to be clean, tidy, and modular—like all good code should be. She felt the app should be easy to maintain and would give “give [users] 80% of what you want, but 100% of what you need.” That meant that the features she chose to develop needed to be flawless. 

4. Use technology with a 10-year arc 

This client encouraged us to use technologies that were projected to still be relevant in 10 years. That way, the software could theoretically work for future audiences without migrating to a different tech stack. “I was very keen on using technologies that have got a 10-year arc in them,” she says. “Technologies that are widely adopted now but have got a very strong forward projection.” 

The challenge: Deliver a high-performing web application

Every project is challenging in its own way. Here are the challenges we faced on this MVP development project:

It was personally funded 

Since Olivia wasn’t building an app for commercial use, the project had to be personally funded. It was challenging for her to determine how much money she was willing to spend on discovery and which things she’d leave out for this first iteration. Our project manager also needed to be very mindful when defining the scope and budget so we wouldn’t exceed the client’s limit.  

The client had high technical expectations 

Olivia also had a technical background, so she was very involved in the development process. We'll always write tidy code and refactor it to make it as modular as possible. But when a client is interested in reading the code and is attentive to how we do it, it challenges us to do our work even better. Olivia really knew her stuff, so it was important to us that we communicated technical decisions clearly. 

We had to choose the right tech stack

It was challenging to determine the right tech stack for the project because Olivia wanted to use Azure as a hosting Cloud. So, we needed to choose development tools that would be compatible with it, get involved with Azure products, and develop a robust app with low technical debt.  

Setting authentication and authorization on Azure

“We needed to handle both authentications from the front end and authorization of actions that reached the backend,” explains Roberto Molina, Full Stack Software Developer at NaNLABS. 

Since Olivia had chosen Azure as the hosting cloud, “we decided to use Azure Active Directory B2C,” continues Roberto. “It allowed us to delegate the management of the users through an active directory—the same model with which Azure manages access, permissions, and cloud resources.” 

Every server has its particularities, so we needed to learn everything about Azure permission management systems and refresh the concepts we were already familiar with.

The solution: Follow a functional programming approach

The team came up with four main development solutions to be mindful of the client’s budget, use an Agile mindset, follow a particular coding approach to make the app scalable, and simplify coding. Here’s what we decided to do:

• Host the app on the cloud for inexpensive maintenance. Since the client was self-funding this project, he needed us to keep to budget and come up with a low-cost maintenance solution. 

• Bring a complete Agile pod. Olivia’s project had five people on the job, including a project manager, a technical leader, a UX designer, and two full-stack developers. We worked in sprints and ensured to implement the client’s comments on each iteration.

• Use functional programming over object-oriented programming. Olivia was used to object-oriented programming, but we prefer to code using a functional approach as it’s better for scalability. She enjoyed this approach because she felt challenged and got to learn new things, plus it made the code much clearer and easier to review.

• Develop the front end using React.js. React.js is a web app development library, we used it to build the front end of the web application following a mobile-first approach so it could be accessed from any mobile device through a browser. We chose to use this technology as it simplifies building interactive UIs. 

“NaNLABS delivered a cutting edge stack using super current technologies like Microsoft Azure. Their coding was also really interesting because I came from an old-school object-oriented programming background and they followed a functional programming approach. I was able to read the code and the more I went through it, the more I could understand how well executed it was.” - Olivia, Supplier Relationship Management Expert

Used technology: For this project, we used React.js for front-end development, Microsoft Azure as a cloud server, and TypeScript as the main language. We also used on the front end: React Hook Form, React Query, Vite, Material UI, Chart.js, Day.js, Zod, and React-Rewards. And on the back-end: Prisma ORM, Azure Communication Services Email, and Zod. 

The results: A high-performing MVP app with cost-effective hosting

With Olivia, we took a mobile-first approach to building a functional web app, which is now being tested with real users. Here’s what we achieved:

• Client satisfaction. We provided a very clean interface and a functional, modular, and easy-to-maintain web application. So, most importantly, Olivia was pleased with the work we delivered and the quality of the code. “NaNLABS exceeded my expectations and doubled them,” she explains.

• Low server costs. Using Azure as a hosting cloud allows the app to run at a minimal cost of around $20 dollars per month.

• Clean design. The UX/UI designer came up with a clean design that makes the application user-friendly and fast to load.

• Turn a prototype into a functional MVP in three months. Olivia wanted a web app that looked clean and was fast-loading. We used the prototype and herinput as a base and delivered a highly functional MVP with no technical debt. 

We also managed to build a long-lasting relationship with the client, thanks to how much we learned from each other in the process. Olivia mentioned that if she ever needed a software agency again, she’d definitely work with NaNLABS. The feeling’s mutual, Olivia!

Do you need a React.js development company?

The client chose to work with a company that offered MVP development and React.js development services because he needed a top-notch app with an interactive user interface. You should consider hiring a company like NaNLABS for MVP development if you have an idea but:

• Don’t have the expertise or development team to do it yourself. If you want your MVP to be scalable and easy to maintain, you should consider hiring a software development company to do it for you. This will reduce the amount of technical debt and future maintenance costs. 

• Are at full capacity. Even if you have the skills to develop an MVP, sometimes you simply don’t have the time to do it. In those cases, you’ll also benefit from finding a company that can code it for you at a shorter development time. 

• Need a particular skill set. You might find MVP development useful if you need a highly-specialized developer or someone who’s an expert on a particular programming technique—like functional programming.

If you’re thinking about building MVPs and have high expectations, we’d love to help you out. If you need to develop digital products but rather have a dedicated team of developers working in a team augmentation model without fully outsourcing your request, we’ve got you.

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.

Join Now