Purpose.
Website for a co-working space & café. The goal was to create a modern and inviting website that would attract new customers to the co-working space.
Key Features.
Website concept and design, React.js development.
Challenges and learnings.
Implementing the contact formular logic with Next.js server actions took some iterations to get right.
Technologies used.
Figma, React.js, Next.js, Tailwind, Motion
A deeper dive
And a few project highlights
About the SOLA project
I was approached by a friend who owns a café and co-working space to create a new website for them. They wanted a modern and inviting design that would attract new customers to their co-working space. Based on information from the target audience about what they were looking for in a co-working space, I created the website with a focus on showing the community, facilities and backstory of how SOLA came to be.
Community section sketch and final design
Creating the vibe
I wanted to create a section that showed the community aspect of SOLA. I used images to show the people and the vibe of the place. To give it a unique touch, I implemented custom made illustrations that became a part of the SOLA brand, both in the digital interface, but also in the interior design of the café and merchandise.
Custom page transition
I made a page transition with the setTimeout webAPI. It works by adding a CSS-animation to the body HTML element to animate the color change, then setTimeout for a reasonable amount of ms, change the URL-route and remove the animation from the body.
Contact formular logic
I wanted to create my own contact formular logic without any unnecessary overhead of a third party service. I added client-side validation with Zod and a server action with Next.js to send the email via a provider called Resend. I did that to make sure it was safe and to catch the mail in a database, so that it didnt get lost if any error occured. It was a fun challenge to get it right.