Skip to content
Back to projects

Accessia Website

March 1, 2024

Accessia Website
  • NextJs
  • DatoCMS
  • GraphQL
  • Tailwind CSS
  • Storybook
  • Bitbucket
  • Vercel
Live website

Accessia is a cloud platform that helps organizations manage physical security from end to end. It uses modern Ultra-wideband technology to provide touch-free access, location services for safety, and tools like visitor management and booking-based access.

Website

The website was build from Figma designs, using Next.js taking advantage of serverside and clients components. With Next.js compiler and DatoCMS image optimisation the website achieve score over 90 in terms of performance. Accessia website performance

In terms of accessibility the website is following WCAG 2.1 guidelines, with a score of 96 in Lighthouse Accessibility audit. The website is using semantic HTML, proper color contrast, and ARIA attributes to ensure that it is accessible to all users, including those with disabilities.

The content is stored in DatoCMS, which is used as a headless CMS for the website. It is fetched using GraphQL queries and rendered on the frontend using Next.js.The styling is done with TailwindCss.

The website has a news and insight section, which are filtered by category. There is also Customer Stories section and Career page with open positions. The news, insights, customer stories content is written in markdown and rendered using prose styling.

Accessia Product Page

Plans section is created using blocks describing plan features and tags to show which plans includes which feature for easy comparison.

Accessia Product Page

For testing I've used Cypress and Playwright tests. I also created Storybook for components and used it for visual testing and documentation.

The website has CSP (Content Security Policy) through middleware and nonces Managed Google Search Console. For this project I'm using Bitbucket for version control and managing deployments through Vercel.

Forms are created using integrations with Hubspot, which is also used for marketing automation and lead management. The forms are integrated with Hubspot using their API, allowing for seamless data transfer and management of leads generated through the website.

Technologies

  • Next.js: A React framework for building static and dynamic websites.
  • DatosCMS Headless CMS
  • GraphQL used for query data from DatoCMS
  • Tailwind CSS: A utility-first CSS framework for building custom designs.
  • Cypress and Playwright for testing
  • Storybook components and testing library
  • Bitbucket version control platform
  • Hubspot for marketing automation and lead management
  • Vercel: A cloud platform for static sites and serverless functions.