Clicky

<henri>

Appearance

Holidaze ​

This is an online platform where travellers can find and book venues to stay, while venue owners can advertise and manage the bookings for each of their properties. It consists of a React frontend, using data from a REST API provided by Noroff.

Product ​

Holidaze 1

Holidaze 2

Holidaze 3

Design concept ​

I created an AA-compliant colour palette for this project, inspired by a 1596 painting called View of Toledo, by Domenikos Theotokopoulos. Travelling is the main theme of this painting – the artist was a traveller himself. I found it would be a fitting starting point to develop the visual identity of the Holidaze platform.

colour-palettecolour-palette

Style guide ​

colour-palette

Information architecture ​

Any reasonably well documented project needs an information architecture diagram. I've made this one using Figma.

Tools and libraries ​

  • React
  • Javascript
  • JSDocs
  • StyledComponents
  • StyledIcons
  • ReactAuthKit
  • ReactDatePicker
  • ReactSpinners
  • ReactSpring
  • Yup
  • Hotjar
  • Noroff API

Code snippet ​

The ReactAuthKit library offers a straightforward solution for common functionalities like user registration and login. Here's an example:

js
import { useSignIn } from "react-auth-kit";

useEffect(() => {
  if (isSuccess) {
    signIn({ token: response.accessToken, expiresIn: 86400, tokenType: "Bearer", authState: { name: response.name, email: response.email, venueManager: response.venueManager, avatar: response.avatar } });
    setLoggedIn(true);
  }
}, [isSuccess]);

Gantt chart ​

colour-palette