Taipei Day Trip

— Full-stack e-commerce

tourism website —

Person browsing a travel website about Taipei on a laptop, surrounded by cups, a bowl of bananas, and a smartphone on a wooden table.
  • Solo implementation based on a provided hi-fi Figma prototype with no instructional guidance.
  • Translated visual design into interactive frontend using HTML, SCSS, and JavaScript, implementing features such as infinite scroll, image carousel, and popup modals.
  • Integrated third-party payment system: TapPay.
  • Built backend with Python, FastAPI and MySQL, including API routing, data management
  • Deployed website on AWS EC2.

Overview

Taipei Day Trip is a full-stack tourism e-commerce website where users can browse and search for attractions in Taipei, explore highlights near MRT stations, make bookings, and complete payments through a third-party service.

The project was based on Figma designs and API documentation provided by WeHelp Bootcamp. I independently developed the entire site according to the given specifications.

As the first complete full-stack project I built after entering the software field, this experience marked a major breakthrough in my journey toward becoming a developer. It laid the foundation for my transition into the tech industry and continues to shape how I approach problem-solving and product thinking.

Website DEMO

Pages

Homepage

  • The homepage features an infinite scroll list of all attractions, allowing users to explore Taipei at a glance.

  • Users can browse by MRT station using the horizontal scroll menu at the top, which categorizes attractions by nearby stations.

  • A search bar enables keyword-based filtering for faster access to specific places.

Booking Page

  • Displays an image carousel to showcase multiple views of the selected attraction.

  • Allows users to select a date and time slot (morning or afternoon) for their visit.

  • Clicking the “Book Now” button triggers a reservation API call and stores the booking data.

  • Booking confirmation is shown on a separate page after submission.

  • The page also displays attraction details, including highlights, address, and transportation options.

Order Page

  • Auto-fills user information using data from registration (name, email).

  • Users can click the trash icon to cancel the booking before payment.

  • Credit card fields are handled securely via TapPay third-party payment gateway.

  • After clicking “Confirm and Pay,” the system sends a payment request and finalizes the reservation.

Booking Confirmation

  • Confirms successful payment and displays a custom order number.

  • Users are reminded to save the number or check their booking history later through the member center.

  • Helps reassure users that their itinerary has been officially recorded.

Sign Up & Login

  • Users can sign up or log in through the navigation bar.

  • Browsing the homepage and attraction pages is available to everyone.

  • When attempting to book a tour without logging in, a login popup automatically appears to prompt user authentication.

Responsive Layout

  • The interface adapts seamlessly across devices—from phones to tablets to desktops.

  • This responsiveness ensures a consistent and accessible user experience on any screen size.

  • Implemented using SCSS media queries, with custom breakpoints for screen widths ranging from 360px to 1200px.

User Flow

Technologies Used