Hiperbarica del Sur Peru is a website for a clinic that offers hyperbaric oxygen therapy (HBOT) for various diseases and conditions. The website aims to inform and educate the potential customers about the benefits and effectiveness of HBOT, as well as to provide them with an easy and convenient way to book an appointment online.
The website has the following features:
- A blog section that contains articles and news about HBOT and related topics, gathering the latest research on HBOT and its effectiveness on multiple diseases.
- A server-side content search algorithm that allows the users to find blogs not only by their title but by their content too.
- An interactive map that uses the user's current location to show directions on how to get to the clinic, using Google Maps API.
- A chatbot that implements AI that has been trained in the whole knowledge of this website to assist the users in everything they want to know about HBOT, such as the treatment process, locations, diseases it can treat, effectiveness, etc.
- An appointment system that integrates with Cal.com for making appointments directly from the website, using a simple and user-friendly interface.
The website is built with the following technologies and tools:
- Next.js 13 - A React framework for building fast and scalable web apps and static sites.
- Tailwind - A utility-first CSS framework for rapidly building custom designs.
- Vercel - A platform for deploying and hosting Next.js apps with zero configuration.
- Contentlayer - A library that turns any content source into a GraphQL or REST API at build time.
- Cal.com - A platform for scheduling meetings and appointments online.
- Botpress.com - A platform that provides an intuitive interface and powerful tools for building conversational agents with NLP.
- Google Maps API - A web service that provides maps and directions data.
To run the website locally, follow these steps:
- Clone this repository:
git clone https://github.com/yourusername/hiperbaricadelsurperu.git - Change to the cloned directory:
cd hiperbarica-clinic - Install the dependencies:
npm install - Run the development server:
npm run dev - Open http://localhost:3000 in your browser.
You can see a live demo of the website here: https://hiperbaricadelsurperu.com/
Here are some screenshots of how the website looks on different devices:
Some of the challenges and learnings that I faced while working on this project are:
- Using server components in Next.js 13 to render parts of the website on the server and reduce the JavaScript sent to the client, enhancing performance and user experience.
- Training a chatbot in company copy and all blog posts using botpress.com, a platform that offers an intuitive interface and powerful tools for building conversational agents with NLP.
- Developing a fast, reliable and server-side content search algorithm for the blog and treatments pages using plain JavaScript that runs on the server at runtime.
- Optimizing performance using Lighthouse, Web Vitals, which are tools that measure and improve the quality of the website in terms of loading speed, interactivity, accessibility, SEO, etc.
- Implementing a fast and performant interactive map using Google Cloud platform, which provides me with APIs and services for working with maps and location data, such as geocoding, directions, places, etc.