---
title: A brand new Funda | Webdevelopment by De Voorhoede
description: >-
  We developed a uniform workflow for the biggest, most responsive and modular
  housing site of the Netherlands. Read more about the project on our website.
language: English
url: 'https://www.voorhoede.nl/en/cases/a-brand-new-funda/'
---

Case study

# A brand new Funda

## Case summary

### Expertise

Development

### Platforms

Nunjucks and Unit testing

### Deliverables

Website and Front-end guide

### See result

[www.funda.nl »](https://www.funda.nl/)

## A uniform website created by multiple teams

### The challenge: a uniform website created by multiple teams

Funda recently gave its website a new look and feel. With almost 30 million visits and 390 million page views a month Funda is one of the most popular websites in The Netherlands. De Voorhoede was responsible for building a completely responsive front-end. Our challenge was to ensure individual product teams could work seamlessly on the same front-end.

![Show case of funda.nl on different devices](https://www.datocms-assets.com/6524/1622106712-funda-macbook-tablet-iphone-mockup-white-bg.png)

Show case of funda.nl on different devices

### So, what's key?

#### Transparency

When it’s always clear what’s being done by each team, you prevent them doing the same thing twice. Transparency also allows you to review and improve each other’s work.

#### Communication

All developers use the same vocabulary for all parts of the website. Designers, back-end developers and other stakeholders understand and use this terminology as well. The same goes for coding conventions (guidelines on how to write your code).

#### Independence

All teams should be able to work and make progress independently of each other. This also applies to all disciplines within a team.

#### Reuse

Each team is responsible for a different part of the website. For example, a search field is used in many places within the site. Each team should be able to find and use the code for this search field easily. Reusing components provides consistency for end users and speeds up development.

### The solution: component based development with the front-end guide

Our *front-end guide* is a custom made component library.

Each component in the front-end guide is a small bundle of HTML, CSS and/or JavaScript code. Front-end developers build these components independently. Some examples of components are a search field, a contact form and a navigation menu. We use them to compose pages, like the home page or search results page.

We always develop and test components in isolation. This way we make sure that subsequent changes will not affect the rest of the website. When a component is delivered but not ready to use, you can implement it at a later stage without any hassle.

![A component for search results with dummy data](https://www.datocms-assets.com/2651/1501076804-funda_search_result_component_dummydata.jpg)

A component for search results with dummy data

A front-end guide provides an overview of all components and pages. Everyone has access, including product owners, designers and back-end developers. Components are carefully documented and combined with an live example usages. This helps with a smooth handover between developers. Another benefit is that the client and stakeholders always have access to the latest version of the front-end. Especially useful for feedback and demos.

Automatic syntax and style validation are all integrated in the front-end guide. When a developer makes a mistake or delivers sloppy work, they will immediately be notified. The front-end guide also improves the performance by optimizing images and minifying CSS and JavaScript files.

* [← How we helped others](/en/cases.md)
* [Bouwen is Macht →](/en/cases/bouwen-is-macht.md)

## Let's discuss what we can do

Flip van Eijndhoven

Business Director

<post@voorhoede.nl>

Don't fill this out if you're human:My name isMy business isYou can email me atYou can call me atMy question or project isGet in touch

[Return to top](#top)