Nagahama Clinic's website
- Role
- Direction
- Design
- Coding
- Technology Used
- HTML
- CSS
- Sass
- TypeScript
- JavaScript
- Vue.js
- Nuxt.js
- Figma
- Kuroco
Overview
I was responsible for directing, designing, and coding in the website renewal project for Nagahama Clinic located in Ichikawa City, Chiba Prefecture.
Design
In terms of design, I aimed to create a friendly and lively impression for users by adding rounded elements throughout the entire site. Additionally, as the previous version of the website had a lot of text content, I strategically placed more images to make it easier for visitors to understand the clinic's facilities and services.
Technical Details
For this website, I implemented the front-end using Nuxt.js and hosted it on Netlify. As for the Headless CMS, I used Kuroco.
Nuxt.js
In this project, I deployed the site to Netlify and set up two environments: production and staging. Setting up Basic Authentication for the staging environment was necessary, and Nuxt.js provides a convenient library called "Nuxt Basic Authentication Module" to implement Basic Authentication easily. I had experience with Nuxt.js since its version 3 release candidate, so I decided to use it as the foundation for this project when version 3 was officially released.
Kuroco
Considering the client's request for the ability to update nearly all content on the site through a CMS, we explored the option of using a Headless CMS. Among the various candidates, Kuroco stood out due to its pay-as-you-go pricing model, making it cost-effective for projects where APIs need to be created for each page. With the ability to set up caching for each API, we were able to keep costs low while operating the site smoothly, even in cases where APIs needed to be called frequently.
However, we faced some challenges in extracting API type information, and as a workaround, we manually assigned types. (While there was a way to extract type information in Open API format, it was not easily convertible into a usable format on the front end.) Therefore, if you plan to use TypeScript, please be cautious and ensure proper type assignment.
Screenshots
Before the redesign
After the redesign
