Proofed
MVP development for the leading professional proofreading and editing services company
About The Client
Proofed is a US-based company, with a mission to be the world’s leading provider of business editorial services (proofreading and editing services for human and AI-generated content).
They do this by curating teams of editors and proofreaders and specifically training them on their client’s unique editing requirements. Helping their partners scale content creation and effectively communicate.
Proofed has been featured on the 2022 and 2023 Inc. 5000 list as one of the 5000 fastest-growing private companies in North America and announced as one of the top 50 inspiring workplaces in North America.
Challenge
Being a tech-led services company has meant that the technology that underpins Proofed’s operational processes is paramount to the business's success.
They need to execute content editing at scale and must maintain consistency and quality across thousands of content pieces a week whilst ensuring a seamless work experience for their editors.
One of the main challenges was the traditionally manual nature of order management, which was time-consuming and could hinder process efficiency and scalability. The previous version of their Order Management System (OMS) relied on several human processes. To enable rapid partner onboarding and operational scale, they needed to automate complex order creation workflows and improve order management visualisation.
A streamlined system was designed that could automate manual processes, and reduce manual intervention, enable seamless end-to-end order management. Proofed expects a new system to manage 100x more orders, than the current one.
Additionally, Proofed aimed to create a state-of-the-art design-focused, user-friendly interface. They wanted to design a platform that both reflected their professionalism and desire for perfection in their work product. Therefore, creating an intuitive and visually appealing interface became a priority, aligning with their established brand and catering to the needs of both editors and clients.
These challenges are not exclusive to editorial proofreading services. Many high-volume B2B service providers encounter similar obstacles, including process streamlining, task automation, developing tailored platforms, and building user-friendly interfaces. By addressing these challenges effectively, businesses can boost operational efficiency, deliver exceptional services, and ultimately achieve success in their respective industries.
Ready to build your new web platform?
Tell us about your challenge, and let's get the ball rolling.
Solution
To improve the efficiency of processing B2B orders, Proofed created a proprietary platform tailored to their service delivery team and editors. The platform would effectively support the unique requirements and workflows of their partner businesses, equipping them with the necessary tools and functionalities to deliver best-in-class editing services.
Proofed was looking for a partner who could not only provide frictionless front-end development but also guide their internal team through the product’s future growth. They went through a procurement process and selected Pagepro due to their stellar reputation. Adam Harvey (CEO at Proofed) said:
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
Pagepro came recommended to us, and we immediately saw them as a partner rather than a service provider. We had very specific requirements on UX and design and the Pagepro team has consistently delivered excellence in Front-end development.
Adam HarveyCEO, Proofed
We deployed a dedicated and battle-tested team comprising experienced several front-end developers, a Project Manager, and a QA. Alongside the team augmentation, we provided additional insights through consultations and the development of established coding and working standards. This ensured a unified approach and efficient collaboration with the internal Proofed tech team.
How did we make the development frictionless?
We used future-proof technologies to provide a scalable solution ready for further growth.
We implemented coding and technical process standards to develop and deploy consistently and efficiently.
We ran problem-solving sessions between the teams to increase the development velocity.
We openly engaged in dialogue with Proofed’s designer team to proactively resolve UI issues before development.
Middleware Layer with Next.JS
The project required a unique approach to developing a dedicated middleware layer, aimed at improving security and fortifying the platform’s technical architecture. The customer had an enterprise-grade backend implementation, which required a comprehensive front-end architecture. This involved developing a middleware layer into the front-end architecture.
A middleware layer acts like a bridge between the back-end and front-end systems. Its primary role is to handle application logic, and data processing, and to manage communication between the different system layers.
For this crucial component, we opted for Next.js, a leading React framework known for its functionality and versatility. The choice to use Next.js was driven by several key considerations that not only helped us to improve security but also delivered a host of other benefits.
Our foremost requirement was the ability to segregate code execution between the server and client to mitigate risks associated with client-side manipulation, to ensure processes were not exposed to end users. Next.js enables us to define code that runs exclusively on the server side. By utilizing this server-side processing approach, we could significantly reduce the potential vulnerabilities of the system, offering an extra layer of security that can't be tampered with from the client side. This feature was instrumental in fortifying our application’s security.
To do this, we used one of Next’s main features - API routes. In a typical client-server model, the client-side code makes API calls to the server to fetch or manipulate data. These calls usually hit endpoints that are defined on the server, and the server responds based on the request. The code that runs when these endpoints are hit is server-side code.
In Next.js 12, which we used in this project, API routes provide a straightforward solution to build your API (with server-side code) within the Next.js app. We can easily create a new file under the "pages/api" directory, and Next.js will automatically treat it as an API endpoint, with the file path corresponding to the URL of the endpoint.
Inside each API route file, we can write server-side code that runs when the endpoint is hit. The code can connect to databases, fetch data, manipulate data, and more. Most importantly, because this code runs on the server, it's not exposed to the client side and thus is more secure.
As a result, the new platform works differently than similar applications. The backend built by Proofed doesn’t directly communicate with the front end. It communicates with the middleware layer, which in turn communicates with the application. The whole process is fostered through the APIs.
One crucial benefit of the Middleware Layer is the additional layer of security it provides. By implementing it, we enforced security measures and protocols to safeguard sensitive data and protect against potential vulnerabilities. The Middleware Layer acts as a gatekeeper, validating incoming requests, enforcing access controls, and ensuring data integrity throughout the application.
Thanks to the Middleware Layer, the customer achieved higher security measures and improved overall system architecture. Additionally, it enables the seamless integration of front-end and back-end components, ensuring efficient data processing and enabling the delivery of secure and reliable services.
Tech Stack
Why React.js?
Proofed wanted to provide a pixel-perfect and user-friendly interface for their customers. React.js was an excellent choice for the project due to its strong emphasis on layouts. Here are some reasons why:
React.js' component-based architecture aligns perfectly with the need to create a platform based on the detailed designs provided by Proofed. By breaking down the user interface into reusable and modular components, React.js enables efficient web app development and further maintenance.
The virtual DOM in React.js plays a crucial role in optimising performance, one of the key challenges highlighted by the customer. React's virtual DOM efficiently updates and renders components. It minimises unnecessary re-rendering by selectively updating only the parts of the UI affected by changes in state or props. It ensures smooth interactions for both editors and clients.
The declarative syntax of React.js simplifies the process of mapping designs in a pixel-perfect manner. By describing how the user interface should look based on the application's state, developers can focus on achieving the desired outcome without the need for manual manipulation of the DOM. React takes care of updating the UI to match the specified state, allowing the customer to achieve a visually stunning and precisely aligned user interface as per the provided designs.
React.js incorporates performance optimizations, such as virtual DOM diffing and efficient rendering techniques, that directly address the customer's need to improve the velocity of processing B2B orders. By minimizing unnecessary re-renders and efficiently updating the UI, React ensures faster and smoother user interfaces. This optimization is crucial in maintaining high processing speed and meeting tight timelines for managing orders, resulting in higher customer satisfaction and retention.
"The client's emphasis on aligning everything against the design and the thoughtful UX pushed us to overcome any challenges that initially seemed impossible. We always managed to find solutions that stayed true to the original vision without compromising on quality or user experience."
Marek Jakimiuk, React Developer at Pagepro
Why Next.js?
One of the primary goals of this project was to improve the efficiency of order management. But Proofed also puts a huge emphasis on providing the highest security of the solution, since their customers are often large enterprises, requiring the highest safety standards. So in this project, the integration of Next.js into the development stack serves multiple purposes, including addressing the customer's requirement. Here's how Next.js contributes to achieving them:
Stronger Security: Next.js offers built-in protection against common web vulnerabilities, through automatic sanitization and server-side rendering. This helps to safeguard sensitive user data and protect against potential attacks, ensuring the highest security standards for the customer's platform.
Server-side Rendering (SSR): It not only improves the performance and user experience by reducing the time required for the initial page load but also provides an additional layer of security. With SSR, critical content is rendered server-side, which helps prevent potential security risks associated with exposing sensitive data on the client side.
API Routes: Next.js provides a convenient feature called API routes, allowing developers to define serverless endpoints within their applications. This enables secure communication between the front-end and back-end by abstracting away direct client-server interactions. By using Next.js API routes, the customer can establish secure and controlled access points for their editors and clients, ensuring that data transmission is protected and limited to authorized users.
Why React Query?
We decided to use React Query to fulfil UX requirements. Thanks to the powerful data-catching capabilities and Optimistic UI technique, each user experiences the highest website performance.
Optimistic UI: It enhances user experience by immediately updating the user interface with an optimistic response before receiving the actual server response. This approach gives users the perception of instant feedback and responsiveness.
Powerful data-catching capabilities: React Query automatically caches the responses from API calls and optimises subsequent requests by serving the data from the cache instead of making redundant network calls. This caching mechanism significantly improves the speed and efficiency of data fetching, resulting in a smoother user experience.
Optimised Data Fetching: By using React Query's data fetching capabilities, the customer can improve the velocity of processing B2B orders, ensuring efficient and timely delivery of proofreading and editing services.
Server State Management: It’s particularly beneficial when dealing with complex order management and real-time updates, as React Query provides a seamless and reactive way to handle and propagate changes across the application.
Integration with React Ecosystem: React Query seamlessly integrates with the wider React ecosystem, including React components and hooks. This allows developers to leverage existing React knowledge and easily incorporate React Query's functionality into their components. The smooth integration enables the customer's internal team to quickly adopt and utilise React Query, streamlining collaboration and productivity.
Why Storybook?
In development projects, utilising Storybook provides several advantages.
Storybook allows for the isolated development and testing of UI components.
It provides a dedicated environment where developers can create, showcase, and iterate on individual components independently.
Its modular approach enables faster development, as changes made to one component do not affect the rest of the application.
Storybook serves as a living style guide, showcasing all the UI components and their variations, making it easier for developers and designers to collaborate and maintain design consistency.
The utilisation of Storybook in this project was particularly unique due to the extensive customization of all components. Unlike other projects where components may be more standardised, in this case, every component was tailored to meet specific requirements.
For example, when selecting an editor for a task, it’s not just the name that is displayed (what you can meet in most task managers). Instead, the customised option included the number of tasks currently assigned to the editor and their average rating for the last 5 tasks.
This level of customization provides significant time-saving benefits for users as they can quickly identify the right person for the task without the need to click on multiple profiles for more information. By leveraging Storybook, the team was able to meticulously design and fine-tune these customised components, ensuring a seamless and efficient user experience throughout the platform.
"The extensive customization and comprehensive nature of the Storybook in this project allowed us to easily onboard the customer’s internal team and maintain a consistent design language throughout the platform. What’s more, the opportunity to work on such a highly customized project was truly rewarding, as it showcased the power and flexibility of the Storybook in bringing unique design concepts to life."
Marek Jakimiuk, React Developer at Pagepro
We developed a highly comprehensive Storybook, containing (almost) all reusable components utilized in the project. This significantly simplified the onboarding process for new developers and ensured the project's maintainability by eliminating repetitive elements.
Additionally, Storybook provided the capability to control the properties of components. This feature allowed for easy manipulation and testing of component behaviour by adjusting different properties and observing their impact in real-time. This level of control and flexibility streamlined the development and debugging process, ensuring the seamless integration of components into the overall platform. And of course, we developed all of the components, those most complicated and detailed too.
Why Theme UI?
Each component in the project includes its own styles that leverage a shared theme configuration, while the use of Theme-UI for placing components on pages allowed developers to easily utilise existing components and add styles without accidentally disrupting other elements on the page. This approach ensured a seamless and collaborative development process while maintaining consistency across the platform.
Why Formik?
We chose Formik for creating forms within generic tables. Its seamless integration with React components and validation libraries makes it a powerful tool for creating dynamic and interactive forms. What’s more, it’s a highly secure tool and allows for easy further feature development.
Delivery
The project followed a dynamic and task-based approach, where the customer provided specific tasks to be completed, and the development team promptly jumped into addressing them. Of course, it was all supported by task prioritisation, ensuring that the most crucial assignments were tackled first.
By forgoing a traditional to-do list and directly working on the assigned tasks, the project welcomed a flexible and adaptive workflow. Upon receiving a task, the team members mobilised their expertise and skills to analyse, plan, and execute the necessary steps to complete it. They worked in a coordinated manner, leveraging their technical knowledge and problem-solving abilities to overcome challenges and deliver high-quality solutions.
By embracing this task-based approach, our team could demonstrate agility and responsiveness. They effectively translated the customer's requirements into actionable tasks and executed them in a timely manner. This process fostered collaboration, transparency, and a shared sense of progress, resulting in the successful completion of tasks and the continuous advancement of the platform.
Unifying standards between the teams
Due to the dynamic nature of the customer's internal team and desire for a scaleable approach to development, we started the partnership by preparing three documents which formed the basis of our cooperation:
Unified Coding Standards
Ways of Working
Testing Plan
“In everyday work, we follow high code standards that are imprinted in our company culture, but on the customer requests we set supplementary standards that answer their internal protocols and provide them with an additional protection shield.”
Jakub Dakowicz, CTO at Pagepro
Established coding standards help ensure that the development process runs smoothly and minimise the risks of budget overruns and bugs in the final product. They can also guarantee that the code is readable, maintainable, and scalable.
The implementation of unified coding standards played a significant role in our cooperation with the customer. By creating a comprehensive document that outlined the agreed-upon coding practices, we equipped the customer with a valuable resource to ensure the consistency and readability of the codebase. This document served as a reference point for their internal development team, enabling them to easily follow the established standards and maintain code quality throughout the project.
Ways of working
To streamline the development process, we prepared a comprehensive document outlining clear guidelines for creating tasks in Jira. This document served as a reference point for the entire team, providing step-by-step instructions on how to effectively create and manage requirements within the platform.
It provided guidelines on how to structure requirements, specify acceptance criteria, and attach relevant documentation or assets. By following these standardised practices, both teams aimed to streamline the requirements-gathering process and facilitate effective communication.
Testing Plan
To ensure all stakeholders have a clear understanding of the testing approach and methodology, we present the comprehensive testing plan, including:
test strategy,
execution strategy
test management.
We also defined the scope of testing and listed the people involved in the process to prepare the whole team for this task.
Problem-solving sessions
To ensure smooth cooperation between the teams, we run a problem-solving session. We divided it into two stages. During the first one members from both teams could report concerns they fell into during the development, and together we were looking into them to find the heart of the problem.
The second stage started with the anonymous survey where everyone evaluated the problems pointed out during the first session. Together we decided which of them was the most urgent and we were looking for the solution.
“This session helped me realize that there are some burning issues in the cooperating team that we didn’t even discuss internally. Thanks to that I could change the way I work to avoid them in the future”
Daniel Nizynski, React & React Native Developer at Pagepro
Problem-solving sessions help build a strong and motivated team that is willing to take on new challenges and push the boundaries of what is possible. By encouraging a culture of experimentation and learning, the team can become more innovative and agile. And that can help the company stay ahead of the competition.
Results
The implementation of the MVP for the proofreading and editing services provider yielded significant results and achieved the desired objectives. Here are the key outcomes of the project:
Pixel-Perfect Design: The development team successfully created a pixel-perfect design that closely matched the provided designs. This attention to detail ensured a visually appealing and consistent user interface, reflecting the professionalism of the brand.
Improved Order Management Efficiency: The dedicated platform designed for editors effectively streamlined the order management process. Automation features reduced manual intervention, resulting in faster order processing and increased overall efficiency. This improvement improved the customer experience and, subsequently, their satisfaction.
Clear Coding Standards and Ways of Working: By establishing clear coding standards and providing a documented "ways of working" guide, collaboration and development processes were greatly improved. The unified coding standards promoted consistency, readability, and maintainability of the codebase. This alignment within the development team facilitated better collaboration, reduced errors, and higher overall productivity.
Middleware Layer for Stronger Security and Communication: The implementation of a middleware layer acted as a bridge between the backend and frontend systems. This layer strengthened the platform's security and enabled efficient communication between the customer's existing backend and the new frontend. The secure and smooth interaction between the two systems ensured data integrity and the smooth functioning of the platform.
Overall, the results of the project showcased the successful development and implementation of an MVP that met the customer's requirements. The pixel-perfect design, improved order management efficiency, the establishment of clear coding standards, and the introduction of a middleware layer all contributed to a high-quality, secure, and user-friendly platform.
In-person meeting, May 2023, London.
HAVE A PROJECT?
LET’S TALK ABOUT IT!
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
Tell us more about your project
Please provide detailed information about your challenge, and our tech team will promptly review your submission. Expect to hear from us within 24 hours with tailored next steps and insights based on your request.
Book a Meeting With Our CEO
Upon receiving your form, we typically recommend a briefing meeting with our CEO to explore the specifics of your project. Schedule your meeting now to kickstart a tailored approach.
Chris Lojniewski
CEO & CGO