Project Overview

The Masakali Retreat website is designed for a retreat center in Bali, aimed at attracting visitors and managing bookings. The project began in June 2020 and was my first major project intended for production use. It involved building a website from a design provided by a designer, integrating various APIs for booking and payment, and ensuring a seamless user experience for visitors.

Development Timeline

• Start Date: June 2020
• Rebuild Start Date: May 2023

Key Features

• Dynamic booking system integrated with Smoobu API for real-time pricing and availability.
• Currency conversion for displaying prices in multiple currencies.
• Secure checkout process using Stripe API (later switched to Xendit).
• Google Login authentication with Passport.js.
• Email functionality using SendGrid API.
• State management using Redux and react-query.

Technologies Used

• Initial Build:
• Frontend: React, Redux, React-Query
• Backend: Node.js, Express
• Database: MongoDB
• Authentication: Passport.js with Google Login
• Email: SendGrid API
• Payments: Stripe API
• APIs: Smoobu API, Currency API
• Rebuild:
• Frontend: Next.js, Tailwind CSS
• Backend: Serverless routes with Next.js
• Database: Prisma, PostgreSQL
• Language: Typescript
• Payments: Xendit API

Challenges and Solutions

1. Initial Integration with Smoobu API:
• Challenge: Synchronizing real-time pricing and reservations with booking sites.
• Solution: Integrated the Smoobu API to ensure the website reflected up-to-date prices and availability. Implemented webhooks to automatically update the database with rate and reservation changes.
2. Checkout Process Management:
• Challenge: Complex state management and integration with Stripe for secure payments.
• Solution: Developed custom hooks like useConversionRate, useCurrencyFormat, and useVillaPricing to manage state and reusable functions. Created a smooth checkout process that sent booking information to Smoobu.
3. Rebuilding for Efficiency:
• Challenge: Improving code efficiency and transitioning to a more modern tech stack.
• Solution: Rewrote the site using Next.js, Tailwind CSS, Prisma, PostgreSQL, and Typescript. This improved performance, code cleanliness, and introduced full type safety.
4. Switching Payment Processors:
• Challenge: Transitioning from Stripe to Xendit due to legal and accounting issues.
• Solution: Overcame the limitations of Xendit’s less developed API by developing custom solutions to handle payment processing, ensuring secure and reliable transactions.

Development Process

1. Backend Development
• Built Node.js Express server and integrated MongoDB.
• Implemented authentication with Passport.js.
• Set up email functionality using SendGrid and email-js.
• Integrated Smoobu API for booking management and Currency API for currency conversion.
• Migrated backend to serverless routes with Next.js and switched to Prisma and PostgreSQL during the rebuild.
2. Frontend Development
• Developed the initial frontend with React and later rebuilt with Next.js for improved performance.
• Implemented state management with Redux and react-query.
• Styled the application using SASS and Tailwind CSS during the rebuild.
• Created reusable components and custom hooks for managing pricing and currency conversion.
3. Deployment:
• Deployed the initial site on Heroku and the rebuilt site using serverless architecture with Next.js and Vercel.
• Ensured continuous integration and deployment for ongoing updates and maintenance.

Outcome

• Successfully launched a fully functional website that attracts visitors and manages bookings seamlessly.
• Enhanced user experience with real-time booking and currency conversion features.
• Improved performance and code quality with the rebuild using modern technologies.

Performance

• Lighthouse performance score improved from 90 to 98.
• First Contentful Paint (FCP) reduced from 0.7 seconds to 0.4 seconds.
• Largest Contentful Paint (LCP) reduced from 1.9 seconds to 1 second.
• Speed Index reduced from 1.3 seconds to 0.8 seconds.