# 拉麵口袋 - iOS
---
## Team members:
1. 105590010 陳威任
2. 105590044 蔣勝弼
3. 105810037 姚韋辰
---
## Problem Statement

  身為拉麵愛好者的我們，常常會為要吃什麼拉麵而煩惱，也常常會在探索的過程中踩到許多的雷；同時對於那些初嚐拉麵的人，常常會不知道該如何選擇適合自己的拉麵，因而躊躇不前，甚至留下不好的印象。可惜的是目前卻沒有任何一個平台滿足這些需求。因此我們集合了身邊拉麵愛好者的痛點，試著去開發一個 App 來滿足這些需求
---
## Description
  你是還在煩惱找不到自己想吃的拉麵嗎？看見轉角處的拉麵店卻既期待又怕受傷害嗎？想知道其他麵友是怎麼評論一家拉麵店的嗎？那就對了！你絕對需要「拉麵口袋」也就是本 App！使用「拉麵口袋」你將能享有以下功能！

---

功能：
- 搜尋拉麵資訊
- 透過條件的選擇與過濾，可以更快速精確地找出適合自己的拉麵！
- 將拉麵標註於地圖上，以便使用者更容易探索拉麵
- 身處人生地不熟的窘境，想舒緩緊張的心情？來碗拉麵吧！在地圖上快速瀏覽附近的拉麵店！
- 申請標註新的拉麵店
- 喜愛的拉麵店不在列表中嗎？別擔心，馬上按下申請新增拉麵店的按鈕並簡單地填寫資料送出申請並等待審核吧！
- 分享已吃過拉麵的心得及感想
- 吃了一碗香噴噴、熱騰騰的拉麵後按耐不住心中想分享給他人的喜悅嗎？想在日後做選擇時多一份參考嗎？很好！留下你的心得與感想造福他人也方便自己吧！
- 規劃吃拉麵行程
- 許多的店家都會推出期間限定的活動與優惠，怕自己會忘記？那就記下來！透過簡單的操作將行程排入計畫，並且可以將所有排定的計畫一覽無遺！
---
## User Interface Design
<div class="demo-images-container">
<div>
<img src="https://i.imgur.com/4TUyPdD.png"/>
<span>探索拉麵介面</span>
</div>
<div>
<img src="https://i.imgur.com/7L4rn68.png"/>
<span>拉麵計畫介面</span>
</div>
<div>
<img src="https://i.imgur.com/EDLNpq6.png"/>
<span>個人頁面介面</span>
</div>
</div>
---
## Technique
### Design
- Adobe XD
### Frontend (iOS)
- SwiftUI
### Backend
- AWS SAM CLI
- AWS Lambda
- TypeScript
- AWS DynamoDB
- AWS API Gateway
- AWS CloudFormation
- AWS Certificate Manager

### CDN
- Cloudflare

<br/>
<br/>
<br/>
<br/>
<br/>

## App's Screenshots
<div class="demo-images-container">
<div>
<img src="https://i.imgur.com/QwVVfh6.png"/>
<span>OAuth2 登入介面</span>
</div>
<div>
<img src="https://i.imgur.com/TcDo98h.jpg"/>
<span>拉麵探索介面</span>
</div>
<div>
<img src="https://i.imgur.com/kjY3Zrt.jpg"/>
<span>拉麵詳細介面 - 1</span>
</div>
<div>
<img src="https://i.imgur.com/vv8PFg8.png"/>
<span>拉麵詳細介面 - 2</span>
</div>
<div>
<img src="https://i.imgur.com/zSsrDgZ.png"/>
<span>留言評論介面</span>
</div>
<div>
<img src="https://i.imgur.com/0hVkML7.png"/>
<span>拉麵圖片介面</span>
</div>
<div>
<img src="https://i.imgur.com/4SbdfMt.png"/>
<span>個人頁面介面</span>
</div>
<div>
<img src="https://i.imgur.com/yVQfJ76.png"/>
<span>個人收藏介面</span>
</div>
</div>

<style>
.demo-images-container {
display: flex;
justify-content: space-between;
padding-top: 1rem;
counter-reset: image;
flex-wrap: wrap;
}

.demo-images-container div {
display: flex;
flex-direction: column;
width: 25%;
justify-content: center;
align-items: center;
padding: 0.5rem 0.5rem;
}

.demo-images-container div span {
margin: 0.5rem;
font-weight: 300;
font-size: 0.75rem;
color: #999;
}

.demo-images-container div span::before {
counter-increment: image;
content: "(" counters(image, "") ") ";
}
</style>