As web standards evolve and user expectations rise, a site's underlying technology and design can become outdated.
This was the challenge we faced with our previous website, which had been running on an aging codebase for several years. Recognizing the need for an upgrade, we decided to rewrite our website, focusing on both design and maintainability.
The benefits we got from our new website
1. Primary goal of web rework - Enhancing code maintainability
One of the primary goals of the rewrite was to improve the maintainability of our codebase. The old website had become increasingly difficult to manage, with design inconsistencies and a lack of reusable components leading to inefficiencies in development.
To tackle this, we introduced two key changes:
a) CSS variables and SCSS mixins
By standardizing our design language through CSS variables and SCSS mixins, we created a more consistent and maintainable codebase.
This approach not only made the process of creating new components more efficient but also made it easier to ensure design consistency across the entire site.
b) React components
React components drastically improved maintainability.
We reduced the amount of redundant code by breaking down the UI into reusable components. This modular approach made development more efficient and will make future updates and maintenance easier.
2. Optimizing blog management with Strapi CMS
One of the old website's most significant pain points was managing blog content. Without a content management system (CMS), every new blog post required a developer to manually push the content to the site’s codebase and redeploy the entire site. This process was not only time-consuming but also slowed down the publishing process.
To address this, we integrated Strapi CMS into our new website, which is backed by a PostgreSQL database to store the blog posts. This solution gave the people in charge of blogs complete ownership, allowing them to create, edit, and publish posts without any developer intervention, for which, of course, our marketer Tina is very grateful. She learned a little bit of HTML and can now publish the posts herself.
Additionally, this change eliminated the need for site redeploys when updating the blog, ensuring a more agile content management process.
In terms of blog post design, we carried over the CSS files from the old website, adapting to the new design. This allowed a safe and effortless migration of existing blogs, with minor design enhancements and fixes where needed.
3. Automating job postings with Greenhouse API
Another challenge we faced with the old website was the manual updating of our careers page. Similar to how blog management worked, any changes to job postings had to be made by a developer, who would then update the codebase and redeploy the site.
This was not only inefficient (the same content was copy-pasted on Greenhouse and our codebase) but also delayed the job post's publication on the web while it was already live on LinkedIn.
To solve this, we integrated the Greenhouse API into our new website. Since our TA team was already using Greenhouse to manage job posts, this integration allowed us to automate the process. Now, any updates made in Greenhouse—whether it’s creating, updating, or deleting a job post—are automatically reflected on our careers page.
The integration also supports custom sections, meta titles, and descriptions through simple HTML elements, giving the TA team more flexibility without needing developer assistance.
What were the technical challenges?
One of the technical challenges we encountered during this integration was related to caching.
Next.js 14 cached these dynamic pages, which led to delays in displaying newly published blogs or job posts. Given that we were already using Cloudflare for caching, we disabled Next.js caching and developed a script to manage cache purging and repopulation.
This script, connected to both Greenhouse and Strapi webhooks, ensured that content updates were immediately visible on the site.
Ensuring consistency and simplifying maintenance on the new website
1. How we ensured consistency in the design
Consistency was a key priority in the development of the new website. To achieve this, we worked closely with our Product Designer, Tisa, to define a clear style guide and establish design standards from the very beginning. This included defining all of the variables and styles that we would use throughout the project, from font sizes and colors to spacing and button styles all the way to the more complex components.
We defined these standards early on in the project, so we were able to ensure that all our components were consistent in design.
Using reusable components further ensured that new pages we build would automatically follow the established design, as they rely on the same predefined variables and styles.
2. How variables are driving consistency
The variables we defined with the design team are stored in Figma design and in global files in code, making them easily accessible throughout the project.
Each variable is given a meaningful name that reflects its purpose, making it easy for developers to implement the correct styles in code. For example, spacing variables might be named according to their intended use, such as padding-large or margin-small. This system allows us to quickly and efficiently apply consistent styles across the entire website.
These variables are also reflected in our design style guide, ensuring that both developers and designers are on the same page when it comes to how elements should look and behave.
3. Easier maintenance through variables and components
Maintaining the new website is much easier because of our use of predefined variables and reusable components. These components allow us to quickly make changes without writing much code.
For example, if we need to change the color scheme, we can simply update a variable in the global styles, and the change will be applied across the entire site.
This makes it easier to manage the site over time, as we no longer need to update each component when making design changes manually.
Content management is also faster and more streamlined. Adding new content no longer requires extensive styling, as our components are already styled consistently. This has significantly reduced the time and effort required to update the website.
Why use NextJS - Speed, SEO, and accessibility
As web standards and best practices continue to evolve, our old website’s codebase struggled to keep pace. The lack of flexibility in the outdated code made it difficult to implement necessary updates, particularly concerning page speed, SEO, and accessibility.
By adopting Next.js, we were able to leverage one of the most advanced frontend frameworks available today. Next.js handles much of the complexity surrounding page speed and SEO out of the box, including server-side rendering, which significantly enhances performance and search engine visibility.
Furthermore, the extensive documentation and active community support around Next.js proved invaluable as we navigated the challenges of modern web development. With these resources, we ensured that our new website not only meets today’s standards but is also able to adapt to future changes.
