TheVECentre.com
Tags: showdev, javascript, nextjs, react
Published: 2021-04-25 22:22:43

---
description: "Find out how I built the website for The VECentre - a virtual venue designed with user experience in mind to reflect a live show, by artists for artists."
---

The VECentre by Inner Sanctum Design is a virtual venue designed to reflect a live show, by artists for artists. It was created as a replacement for in-person art exhibitions, a major revenue stream for artists, that could no longer take place due to COVID-19 restrictions. Each exhibition is bespoke and results in a 3D tour that a user can navigate around. I was requested to develop a website and implement the tour hosting. [TheVECentre.com](https://thevecentre.com) helps users find out more about The VECentre and provides an interface to access the virtual tours. The website was originally built for the Christmas 2020 tour.

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9hwns4og2o9z5bf37v47.png">
  <figcaption>The homepage</figcaption>
</figure>

## Task
My task was to work alongside Inner Sanctum Design to develop the website and organise the tour hosting platform. As such, the desktop version of the website had already been designed - all I needed to do was design a mobile version and build it in a responsive manner. I made a few usability changes such as making the header reduce in height when the user scrolls (to increase screen real estate). In addition, I was required to find a provider to host the tours and make them display on a `thevecentre.com/tour` URL.

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yeqyfjurmh7qtc16z0df.png">
  <figcaption>The tour selection page</figcaption>
</figure>

## Technical Details
TheVECentre.com is predominately built using [Next.js](https://nextjs.org) and [Tailwind CSS](https://tailwindcss.com/). Two Next.js plugins, [next-seo](https://github.com/garmeeh/next-seo) and [next-optimized-images](https://github.com/cyrilwanner/next-optimized-images), to handle the SEO orientated properties and optimise images for different device sizes respectively. Additionally, [React Icons](https://react-icons.github.io/react-icons/) supplies any social icons, [EmailJS](https://www.emailjs.com/) powers the contact form and [Framer Motion](https://www.framer.com/motion) adds animations to the site. 

The tours are stored on [AWS S3](https://aws.amazon.com/s3/) in a public bucket and are displayed in iframes. As the 3D software used to build the tours creates a social image, manifest and other assets, they are loaded into the website at build time. The result is that Inner Sanctum Design are able to change tour assets and the website will automatically pick up any changes. 

As a separate feature, I was asked to create a "guestbook" to enable visitors to review a tour and see previous visitors comments. The data is both saved to and read from a Google Sheet using the [Google APIs](https://www.npmjs.com/package/googleapis)

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9km1apmrw9vjpdjnyww.gif">
  <figcaption>Scrolling through the homepage</figcaption>
</figure>


[The source code for TheVECentre.com is available on GitHub.](https://github.com/james-wallis/TheVECentre)

[Visit TheVECentre.com](https://thevecentre.com)