Migrated the Traditional Website of a FinTech Startup to a Modular React-Based Web Framework

Team Symv had previously worked with the client to cater to their mobile application development requirements, resulting in earning trust for this subsequent project.

For this project, the client wanted us to complete their website revamp before the launch of new designs by the other team, for it was supposed to be used as the base code.

To cater to this, we deployed our best Lead Engineer to this project. With minimal allied resources or team support, he built a robust and modular NextJS architecture with preview mode support, Prisma ORM support, etc., with their intricate and intelligent approaches. These approaches boosted the overall performance of the application as they skipped the dependency of the backend and directly allowed the front end to reflect the changes done on the CMS by the customers for their posts. It also made the application easy to enhance in case of expansion.

The team faced a couple of challenges during the implementation phase. For instance,

• Handling multiple joins with Prisma ORM - Defining the schema in PrismaORM with the Next.js framework is usually very difficult when defining nested joins.
• Running dynamic SSG routes with multiple source routes using Next.js middleware - There are scenarios where we need to support routes generated originating from multiple source routes. This is usually heavy when it comes to building the whole package as it becomes heavier. The challenge is to keep it light and fast so that the user experience is not affected at any point.
• Integration of CMS with the Next.js application enables the user to utilize the preview mode, which allows them to visualize the draft changes made by them in the actual environment on the runtime before publishing those changes.

The client chose Symv as its strategic engineering partner because of our in-depth expertise in building high-performance SSR B2C applications. Symvoulos’s team took on the challenge of a short timeline head-on to build an all-new website from scratch.

We initiated the project by delving into the research phase, thoroughly exploring the Prisma setup and its seamless integration with the NextJS framework. Our primary objective was to devise a robust schema capable of effectively handling queries involving multiple-level joins and nested queries.

• For the front end, we used the Next.js framework. Next.js is a React-based framework for building web applications. It provided additional structure, features, and optimizations for the website. It helped us configure tooling like bundling, compiling, and more. Furthermore, it enhanced the performance and SEO using server-side rendering and building the components beforehand to reduce the application load time.
• We used Prisma ORM as it allowed us to define our application models in an intuitive data modeling language using the schema provided by its toolkit and reference it with the actual data structure.
• My SQL was our pick for a database dump, which we used as a reference to define the data models in the Prisma schema.
• And, we used ButterCMS for content management. It helped us create, manage, and modify content on a website without the need for technical knowledge. It was used to define and preview the end-user scope in the draft state before the final publication.

Subsequently, we established the architecture that would enable server-side rendering and Incremental site regeneration, particularly tailored to accommodate complex routing requirements. By adopting this approach, we ensured optimal performance and modularization throughout the development process.

Throughout the project, we emphasized maintaining a continuous feedback loop, enabling us to adhere to timelines and uphold the expected high-quality standards of the application. We made sure that the SEO indexing of the client website didn't drop, and in fact, we tried to make it better by reducing load times, better lighthouse scores, etc.

Finally, we seamlessly integrated a content management system (CMS) to enable comprehensive testing of live blog features and previews. Upon reaching satisfaction with the development phase, we promptly handed the codebase to the client.