top of page

부동산 웹사이트 Shopify 2.0

저는 Shopify Liquid, Tailwind CSS, JavaScript 및 jQuery의 조합을 사용하여 역동적이고 시각적으로 매력적인 부동산 웹사이트를 개발했습니다. 이 프로젝트는 부동산 목록을 보여주고 원활한 사용자 경험을 제공하기 위한 대화식의 사용자 친화적인 플랫폼을 만드는 데 있어 제 기술을 보여줍니다.

데모 웹사이트


그림 물감

Technologies Used

  • React: Utilized to create a dynamic and interactive user interface that updates in response to user actions.

  • JavaScript: Employed to add interactivity, handle user input, and manage API data.

  • Material-UI: Used to style and design the user interface components, providing a modern and visually appealing design.

  • Google Maps API: Integrated to display maps and location markers, enabling users to explore different travel destinations.

  • Google Places API: Utilized to fetch location details, images, and reviews for specific destinations.


Project Goals

  • Showcase proficiency in working with Google APIs, demonstrating the ability to integrate map features and location-based information into a web application.

  • Highlight skills in using Material-UI to design and style the user interface, ensuring a visually appealing and user-friendly design.

  • Demonstrate my ability to create a dynamic web application using React, managing state, handling user interactions, and rendering data.

  • Emphasize the importance of responsive design to create a seamless user experience across various devices.

  • Illustrate my capability to create a practical and interactive travel information website that provides users with valuable insights and engaging features.


Project Features

  1. Google Maps Integration: The website integrates Google Maps API to display an interactive map that showcases various travel destinations and points of interest. Users can zoom in, pan, and explore different locations on the map.

  2. Location Search: Using Google Places API, users can search for specific destinations, landmarks, or attractions. As users type, auto-suggestions appear, enhancing the user experience.

  3. Destination Information: Clicking on a location marker or search result displays detailed information about the destination, including its name, description, images, ratings, and reviews.

  4. Material-UI Components: The user interface is built using Material-UI components, providing a visually appealing and consistent design. Components like cards, buttons, and dialogs are utilized to enhance the overall user experience.

  5. Dynamic Filters: Users can filter destinations based on various criteria, such as categories, ratings, or distance from their current location. The website updates the displayed destinations in real-time as filters are applied.

  6. Responsive Design: The website is designed to be fully responsive, ensuring that users can access travel information seamlessly on different devices, including desktops, tablets, and smartphones.

bottom of page