Skip to content

Latest commit

 

History

History
99 lines (64 loc) · 4.74 KB

README.md

File metadata and controls

99 lines (64 loc) · 4.74 KB

Taipei Trip 台北一日遊

Screen Shot 2021-09-14 at 11 29 1

Taipei Trip is a travel e-commerce website. With more than 300 attractions information, click on the photos of the attractions to view more information, and make reservations and payment.

台北一日遊是一個旅遊電商網站。擁有超過 300 筆的景點資料,點擊景點資照片可以訊查看看更多資訊,並預約行程、付款。

Catalog

Live Demo

Due to high AWS fees, the website is currently closed 🥲 .

http://3.129.202.152:3000/

Test Account

- -
Account test@test.com
Password 12345678

Credit Card for test

- -
Card Number 424242442424242
Valid Date 01 / 23
CVV 123

Skills Structure

台北一日遊-技術架構

After the weekly development is completed, will sent Pull Request to the Reviewer, and after obtaining consent, the develop branch will be merged into the main branch, and the code will be synchronized to the EC2 computer update website.

每週開發完成後,會向 Reviewer 發送 Pull Request,取得同意後將 develop 分支合併到 main 分支,並將程式碼同步到 EC2 的電腦更新網站。

RESTful API

RESTful-API

The project adopts a development method that separation of front-end and back-end. Through the RESTful API, different data is obtained from the back-end according to the Request method sent by the front-end.

專案採用前後端分離的開發方式,透過 RESTful API,根據前端發送的 Request 方法,向後端取得不同的資料。

⚠️ Developed according to the specification of RESTful API(Not involved in planning)

Features

1️⃣ Lazy Loading & Infinite Scroll

Use Javascript Intersection Observer API to practice Lazy Loading and Infinite Scroll . By delaying, the required resources are loaded when needed, which reduces the loading burden of the browser and improves the user experience.

使用 Javascript 的 Intersection Observer API 實踐 Lazy LoadingInfinite Scroll。透過延遲,在需要時才載入所需資源,降低瀏覽器載入負擔,提升使用者體驗。

Webp net-gifmaker

2️⃣ Keyword Search & Filter

Use keywords or regions / topic filters can quickly find the attractions you want.

使用關鍵字、地區或主題標籤搜尋可以快速找到想要的景點。

Webp net-gifmaker

3️⃣ Member System

⚠️ The user needs to become a member to use the function of booking itinerary and payment.

⚠️ 使用者需要成為會員才可以使用預約行程與付款的功能。

Webp net-gifmaker

4️⃣ View Attractions

Click on the pictures of attractions on the homepage to see more information.

點選首頁的景點圖片可以看到更多資訊。

  • Slide Show 圖片輪播
  • Weather Infomation 一週天氣(中央氣象局 open API
  • Map Information 地圖資訊(JS library Leaflet

Webp net-gifmaker

5️⃣ Scheduled Route

Use TapPay to connect to a third-party cash flow system. After the credit card is successfully authenticated, the user completes the payment.

使用 TapPay 串接第三方金流系統,信用卡認證成功後,使用者完成付款。

Webp net-gifmaker

6️⃣ Responsive Web Design (RWD)

Webp net-gifmaker