Wallis Family Mediation (previously Wallis Consultancy)
Tags: showdev, javascript, react, nextjs
Published: 2021-02-01 22:09:37

---
description: "Wallis Family Mediation is a mediation company run solely by Mike Wallis. I recently rewrote its website using Next.js, Tailwind CSS and EmailJS for the contact form."
---
Wallis Family Mediation is a mediation company run solely by Mike Wallis, a retired senior banker and was a Magistrate for 20 years. Before he moved into mediation, Mike's company was known as Wallis Consultancy, a financial claims management company which he ran from his home. 

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/s10wb4hqhr5xu7pbnmjw.png" alt="Wallis Family Mediation home page">
  <figcaption>The home page</figcaption>
</figure>

##Task
The original Wallis Consultancy website was made in around 2010. Mike wanted me to revamp and update his website to bring it to the standard of his competitors, and to provide a better user experience which in turn would generate him more business. After discussing design with him, it was apparent that he wanted the website to be clear, well laid out and easy to maintain. In addition, he wanted to be able to edit and create pages so that he wouldn't need to rely on me to make changes - a pain-point with his old website.

I conducted some research on other competitor's websites and after receiving the consent to proceed with the design from Mike, I began work on the project. Originally I rebuilt the Wallis Consultancy website over the summer of 2016 using HTML, CSS and Bootstrap 3, but in 2020, I rewrote it from scratch once again using cutting-edge technologies such as Next.js and Tailwind CSS. I documented my process recreating Wallis Consultancy as a modern Next.js static site as [a series of articles on my blog](https://wallis.dev/blog/wallis-consultancy-rebuild-intro).

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/ip01inkujuzj85ccakrx.png" alt="The about Mike page">
  <figcaption>The about Mike page</figcaption>
</figure>

##Technical Details
The website for Wallis Family Mediation is written using the React framework [Next.js](https://nextjs.org/), which enables functionality such as generating static websites, and [Tailwind CSS](https://tailwindcss.com/) for styling. Combining these technologies allowed me to build the website efficiently whilst maintaining a well-written React app. Each page of the website is dynamically created at build time from Markdown files using [Next.js dynamic routes and the `getStaticPaths` function](https://nextjs.org/docs/basic-features/data-fetching). In addition, I used two external Next.js plugins called [next-seo](https://github.com/garmeeh/next-seo) and [next-optimized-images](https://github.com/cyrilwanner/next-optimized-images) to ensure that the website has good SEO and all images are compressed and resized to make the page load time as fast as possible. The contact form is powered by [EmailJS](https://www.emailjs.com/) and uses reCaptcha to stop spam mail. Finally, I added [Netlify CMS](https://www.netlifycms.org/) so that Mike can make his own changes to the website. Netlify CMS uses Markdown files so it integrates seamlessly with the existing Markdown pages utilised.

If you want to learn more about how I developed Wallis Consultancy, take a look at the following articles:
1. [Introducing the project](https://dev.to/jameswallis/modernising-an-existing-bootstrap-website-using-next-js-and-tailwind-css-c2g)
1. [Setting up Tailwind CSS, Google Fonts and React Icons with Next.js](https://dev.to/jameswallis/using-tailwind-css-google-fonts-and-react-icons-with-a-next-js-application-50l5)
1. [Using EmailJS to run the contact form](https://dev.to/jameswallis/using-emailjs-with-captcha-verification-in-a-next-js-application-1g1g)
1. [Adding SEO and Image Optimisation](https://dev.to/jameswallis/seo-and-image-optimization-with-next-js-23m9)
1. [Deploying a Next.js static site onto GitHub Pages](https://dev.to/jameswallis/deploying-a-next-js-app-to-github-pages-24pn) but honestly [just use Vercel](https://dev.to/jameswallis/deploying-a-next-js-project-on-vercel-in-less-than-three-minutes-with-a-custom-domain-568o) (they're both free)

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/j181cmkb7xqluvwsx5x8.gif" alt="Wallis Family Mediation contact form submission">
  <figcaption>The contact form submission using EmailJS</figcaption>
</figure>

[The source code for Wallis Family Mediation (Wallis Consultancy) is available on GitHub.](https://github.com/james-wallis/wallisconsultancy)

[Visit wallisfamilymediation.co.uk](http://wallisfamilymediation.co.uk)