A performance-focused resort web application built to present resort facilities, experiences, and booking-related information in a modern, lightweight interface. I was involved from the very beginning — from planning and design to frontend architecture and performance optimization.
Overview
The goal of the project was to create a visually engaging yet highly performant resort website that delivers a modern user experience without unnecessary technical complexity. The platform needed to stay fast, cost-efficient, and easy to maintain while still feeling premium.
Tech Stack
Frontend
- Next.js
- React
- Tailwind CSS
- shadcn/ui
Infrastructure
- DigitalOcean (Droplet deployment)
Responsibilities
Project Initiation & Planning
- Participated in early planning discussions for stack selection and architecture
- Designed the initial Figma UI/UX for the project
- Defined frontend folder structure and component organization
Component Architecture
- Built reusable UI components to maintain consistency across pages
- Avoided unnecessary abstraction to keep the codebase scalable and maintainable
- Structured components for easy future extension
Performance Optimization
- Implemented performance-focused practices during development using Next.js production build optimizations
- Structured components to avoid unnecessary re-renders and reduce initial page load weight
- Optimized image usage and asset loading to improve perceived performance
- Ensured smooth interaction and fast content visibility on mid-range and lower-powered devices during launch phase Note: Performance benchmarks were validated during the initial deployment phase. As the live system evolved over time with content and third-party changes outside my scope, current performance metrics may differ from the original release state.
Modern UI Experience
- Implemented smooth scrolling using Lenis for subtle interactivity
- Balanced animation and motion with performance priorities
- Maintained a clean, minimalist visual approach
Deployment & Cost Efficiency
- Selected a suitable DigitalOcean droplet to balance performance and hosting cost
- Ensured the app remained stable under expected traffic without over-scaling infrastructure
Challenges
- Delivering a modern, interactive experience without harming performance
- Keeping the architecture simple while still scalable
- Controlling hosting costs while ensuring reliable deployment
Solutions & Trade-offs
Key Decisions
- Chose Next.js for structure and optimization capabilities
- Kept the system mostly static since content changes were infrequent
- Used JSON-based data instead of a database to reduce backend complexity
Trade-offs
- No authentication system due to the static-first approach
- Limited dynamic features to preserve performance and simplicity
- Next.js was more powerful than strictly necessary, but helped maintain clean structure and scalability
Key Learnings
- How to plan architecture from the ground up
- Balancing performance vs. features in real-world projects
- Making practical trade-offs to keep systems maintainable
- Selecting infrastructure based on actual needs instead of trends
Outcome
The project was successfully deployed and remains live. It delivers a fast, modern browsing experience while staying lightweight and cost-efficient. This project strengthened my ability to make architectural decisions that balance performance, scalability, and real-world constraints.