AMPLIENCE - GET STARTED GUIDE
Next.js in Action: Building an Interactive Guide Demystifying CMS’s Capabilities
About The Client
Amplience the AI Content company, brings together data, performance insights, and generative AI that helps merchants and developers deliver persuasive content for every shopping context that fuels truly personalized, connected experiences. More than 400 of the world’s leading brands use Amplience including Crate & Barrel, Ulta Beauty, Coach, OTTO Group, GAP, Currys, and The Very Group.
Challenge
Amplience stands as a specialist in the realm of technology, focusing on an API-first, headless content management platform. They understood that the core of its expansion hinged upon enabling effective developer adoption, yet they faced the challenge of explaining how the platform and dynamic content there really worked and how beneficial it was. They knew that for devs, the interactive environment is much more effective than providing another long documentation. To accelerate a top-tier developer experience, Amplience aimed to create an interactive "Get Started" wizard guide for developers.
Amplience, prioritising core product development, had to strategically allocate their developers across the projects. Striving to maintain velocity across multiple high-priority tasks, the company required a swift and efficient solution that would not compromise the quality of the developer guide. And that’s why they were looking for an experienced React JS Development Company.
This strategy is not uncommon among software providers with established, proficient development teams. Often, these teams are fully engaged in advancing the existing product and lack the bandwidth to embark on new projects. Rather than investing in long and risky hiring new developers, these companies seek experienced teams that can exhibit strong performance right from the outset of their collaboration.
Want to Build Your Web App With Next.js?
Tell us about your challenge, and let's get the ball rolling.
Solution
In response to the challenge, Amplience envisioned a proactive solution that aimed to demystify their platform's capabilities for developers. Rather than solely explaining their intricate offerings, Amplience thought of a more hands-on approach. They embarked on the creation of a practical trial environment – where developers could engage with the system directly and comprehend the nuances of dynamic content creation.
This innovative solution contained a three-stage pathway to developing dynamic content, a process integral to Amplience's overarching system. Recognising the potential value in a practical, experiential approach, Amplience provided developers with trial access to a specific segment of their system. This decision allowed developers to interact directly with the platform and experiment with these components, facilitating a comprehensive understanding of how dynamic content operates.
Given our previous successful collaboration during building documentation for their Developer Portal, Amplience turned to us to address this challenge. Recognizing our React expertise, Amplience found a possibility to leverage this experience for streamlined project execution and frictionless development. It's worth noting that after the first project, we had the pleasure of meeting the customer face-to-face! This invaluable interaction provided the opportunity to gather feedback and solidify our compatibility for this project.
How did we make the development frictionless?
We chose the modern and most efficient tech stack: Next.js, Storybook, TypeScript, Tailwind CSS and Jest
We set the progress tracking independently from the Amplience API to prevent changes in the pre-existing solution
We reshaped the custom library components we created at the beginning of the project to meet the rebranding requirements that occurred during the project
We crafted a Next.js web application rooted in detailed designs and a comprehensive working prototype Amplience provided us. This app, seamlessly linked to their expansive platform, is propelled by an API they also provided.
Embracing Amplience's preference for an Agile approach, we structured our work using the Scrum framework. Guided by our experienced Project Manager, who also adeptly served as a Scrum Master, we ensured every aspect of the project flowed seamlessly. This approach empowered us to adapt swiftly, fostering collaboration and delivering results that aligned precisely with Amplience's evolving needs. To this project, we delegated a team of 5:
Adam Chylinski
Senior Project Manager
Scrum Master
Kasia Krawczyk
Front-end Developer
Michal Moroz
Front-end Developer
Daniel Nizynski
React Developer
Rafal Mieczejko
Tester
Development
We built a web app that's a crucial part of the extensive Amplience Developer portal, ensuring it seamlessly aligns with their operational conditions. We developed the app as a microservice that is displayed in the iframe inside the developer portal, and connected it with their CMS by the API, to fit into the complex platform which is based on smaller microservices.
Tech Stack
Since we were building the app from scratch, we were also responsible for choosing the tech stack. We know how technologically advanced our customer is, so we had to choose the best solutions that won’t influence their growth. Our choice was:
Next.js for building a highly efficient web app
Storybook for building the components and gain feedback from the customers simultaneously
TypeScript chosen as the standard in our projects now because of its efficiency and testing capabilities
Tailwind CSS for rapid and consistent styling
Jest for testing to ensure the reliability and stability of the application
For our core technology framework, we opted for Next js, the standout choice for crafting modern web apps. It emerged as the exceptional choice for this project also because of Amplience's existing utilisation of Next js in their other projects, such as their website. This shared alignment within their tech stack made it the perfect choice for seamless integration and ensured a consistent developer experience across their projects. Moreover, Next js's robust features in dynamic content rendering further reinforced its suitability.
We began development by reviewing the designs and acquiring two dedicated libraries, which we had to integrate to facilitate effective communication within Amplience's platform. Additionally, Amplience provided us with a fully functional prototype, which served as an example of how the platform should work.
Taking charge of the complete UI development, we meticulously crafted every aspect to ensure pixel-perfect precision. We recreated UI components and app sections within the versatile environment of Storybook, enabling facilitated isolated testing for our customer’s technical experts, who maintained continuous access to Storybook. By enabling this parallel cooperation, we significantly accelerated the development timeline, fostering swift progress and refined outcomes.
Midway through development, Amplience initiated a comprehensive rebranding of its entire platform. Given that the components we created were initially aligned with their previous branding, they furnished us with the updated designs. We took on the task of reshaping the custom library to mirror the new designs, a process that demanded additional UI development hours. We recognized the paramount importance of this endeavour to our client, so we swiftly embraced the challenge, aligning our efforts to deliver in accordance with their evolving vision.
All of the content in microservices available on the Amplience platform needs to be managed via the Amplience CMS, connected to the apps through the API. Their API, while not custom-tailored for our specific project, introduced some complexities in efficiently tracking user progress. In response, we devised a resourceful strategy. By assessing completed content pieces during user login, we dynamically recognised their advancement. This approach eliminated the necessity for any modifications to Amplience's pre-existing API, putting the task of adjustment firmly in our capable hands. The Get Started wizard application we’ve built seamlessly integrates into the Amplience CMS, streamlining content management within its established toolkit.
“Despite complexities introduced by the API, our strategy dynamically tracks user progress by evaluating completed content during login. This approach streamlined content management and integration of the 'Get Started' wizard app without altering Amplience's API."
Adam Chylinski, Senior Project Manager at Pagepro
As an added option, we conceived a small, supplementary microservice. It provides developers with a dynamic preview of their content in a real-time context, offering an enriched developer experience and streamlining the validation of content.
Results
The recently launched Get Started guide has swiftly generated positive results for the Amplience business within the initial few weeks and secured 8 subscriptions in just a few days.
Accompanying this achievement, the acquisition of several prospects and 3 promising leads underscores the guide's efficacy, particularly given its recent promotional efforts and forthcoming campaign plans.
33 accounts have been successfully established, predominantly by partners who will further disseminate the guide to clients.
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
Pagepro was excellent from a project management perspective, thanks to their budget flexibility and timely adherence to our deadlines.
Nick PiperDirector of Product, Amplience
- the form
- the form
- the form
- the form
- the form
- the form
- the form
- the form
- the form
Build your own app with React!
Tell us about your challenge and get help with your next moves in 24 hours.
Book a Meeting With Our Expert
If something seems unclear, it's always good to talk to an expert. And it's free!
Book a call with our Client Partner and get all the answers you need.
Julia Supcarel
Client Partner
[email protected]