Teti Residence
Project Overview
Teti Residence is a landing website developed for a boarding house rental business in Jakarta. The website serves as a digital showcase for available rooms, facilities, and property information, helping prospective tenants explore room options and contact the property efficiently.
This project demonstrates my ability to translate a Figma design into a fully responsive and dynamic web application using modern front-end technologies.
Pages & Feature Breakdown
Home
Introduces the property, highlights key selling points, and provides clear navigation to explore rooms and facilities.
Rooms
Displays a dynamic list of available rooms retrieved from Cloud Firestore API. Each room card presents essential information such as pricing and availability.
Room Detail
Shows detailed room information dynamically based on selected data. Implements dynamic routing and structured content rendering.
Gallery
Showcases property images to provide visual insights into facilities and room conditions.
Articles
Integrates WordPress REST API to fetch and display blog content dynamically, allowing the property owner to manage articles through WordPress CMS.
Contact
Provides contact information and inquiry section to help prospective tenants reach out easily.
API & Data Integration
Room data is retrieved from Cloud Firestore, allowing dynamic content updates without redeploying the application.
Article content is integrated from WordPress via REST API, demonstrating external API consumption and data mapping on the frontend.
Technology & Engineering Highlights
Vue.js (component-based architecture & routing)
Tailwind CSS (utility-first responsive styling)
Cloud Firestore API integration
WordPress REST API integration
Responsive design implementation from Figma
My Role
As a Freelance Front-End Developer, I was responsible for translating the provided Figma design into a fully functional web interface, integrating APIs, structuring reusable components, and ensuring responsive performance across devices.
