不再猶豫， 交給吃貨地圖幫你做決定
在這個生活越來越方便，美食越來越多的社會裡，不知道要吃什麼，總是猶豫不決，這是很多人都有過的困擾。
為了能夠快速解決這個問題，只要輸入所在地，除了會顯示附近二十家餐廳外，還有一個好手氣按鈕，隨機幫你選中一家餐廳。吃貨地圖還提供你記錄自己的美食日記，沒有複雜的介面，簡簡單單紀錄你此時此刻吃到的每一口感受。
- 前台
- 使用者
- 輸入位置，顯示附近二十家餐廳
- 好手氣，隨機幫你選一家餐廳
- 查詢餐廳資訊
- 紀錄美食日記
- 觀看他人食記
- 使用者
- 後台
- 使用者
- 編輯、刪除文章
- 查看未公開日記
- 管理者
- 查看所有使用者
- 更改使用者權限
- 使用者
| 測試身分 | 帳號 | 密碼 |
|---|---|---|
| 使用者 | user001 | user001 |
-
登入
-
好手氣
-
新增食記
-
編輯食記 / 將食記設為未公開
-
刪除食記
- 管理使用者
npm install 安裝專案所需套件。
npm run start 啟動專案。
npm build 在資料夾中建立此專案的 production 版本
npm deploy 在 GitHub Pages 部屬專案網站。
- React Hooks
- React DOM
- 套件
- React Router : 使用 HashRouter 建立路由
- Redux Toolkit : 狀態管理
- styled components : JSX 語法撰寫 CSS 樣式
- PropTypes : 型別檢查
- ESLint : 檢查語法，統一程式撰寫風格
- Prettier : 統一程式碼格式
- lodash : 使用 debounce 功能
- Google Map React : 用 component 的方式，操作 Google Maps API
- ckeditor5-react : 串接文字編輯器
- reactjs-popup : 彈出視窗功能和樣式
- react-images-viewer : 圖片展示功能
- nuka-carousel : 圖片輪播功能
- API
- Imgur
- Google Map
src
│ App.js
│ index.js
│ utils.js
│ WebAPI.js
│
├─components
│ ├─Article
│ │ Article.js
│ │ ArticleFilter.js
│ │ ArticleInfo.js
│ │ ArticleStyle.js
│ │ index.js
│ │
│ ├─BackToTop
│ │ BackToTop.js
│ │ BackToTopStyle.js
│ │ index.js
│ │
│ ├─Error
│ │ Error.js
│ │ ErrorStyle.js
│ │
│ ├─Footer
│ │ Footer.js
│ │ FooterStyle.js
│ │ index.js
│ │
│ ├─Form
│ │ Form.js
│ │ FormStyle.js
│ │ index.js
│ │
│ ├─ImageViewer
│ │ ImageViewer.js
│ │ index.js
│ │ ReactImageViewer.js
│ │
│ ├─Loading
│ │ Loading.js
│ │ LoadingStyle.js
│ │
│ ├─Map
│ │ key.js
│ │ map.js
│ │ mapComponents.js
│ │
│ ├─Navbar
│ │ index.js
│ │ Navbar.js
│ │ NavbarStyle.js
│ │ UserNavbar.js
│ │
│ ├─pictures // images
│ │
│ ├─PopUp
│ │ PopUp.js
│ │
│ └─Search
│ index.js
│ Search.js
│ SearchStyle.js
│
├─constants
│ globalStyle.js
│ style.js
│
├─hooks
│ useConfirmUser.js
│ useEditUserData.js
│ useError.js
│ useGetId.js
│ useLoading.js
│ useLogin.js
│ useParseData.js
│ usePost.js
│ useRegister.js
│ useScroll.js
│
├─pages
│ ├─administrator
│ │ └─AdminPage
│ │ AdminPage.js
│ │ AdminStyled.js
│ │ index.js
│ │ UserTable.js
│ │
│ ├─blog
│ │ ├─ArticlePage
│ │ │ ArticlePage.js
│ │ │ ArticlePageStyle.js
│ │ │ ckeditorStyle.css
│ │ │ index.js
│ │ │
│ │ ├─BackStagePage
│ │ │ BackStagArticle.js
│ │ │ BackStagePage.js
│ │ │ BackStagStyled.js
│ │ │ index.js
│ │ │
│ │ ├─EditPage
│ │ │ EditPage.js
│ │ │ EditPageStyle.js
│ │ │ index.js
│ │ │
│ │ ├─HomePage
│ │ │ HomePage.js
│ │ │ HomePageStyle.js
│ │ │ index.js
│ │ │
│ │ ├─NearbyPage
│ │ │ index.js
│ │ │ NearbyPage.js
│ │ │ NearbyPageStyle.js
│ │ │
│ │ ├─ProfilePage
│ │ │ index.js
│ │ │ ProfilePage.js
│ │ │ ProfilePageStyled.js
│ │ │
│ │ └─SearchPage
│ │ index.js
│ │ SearchPage.js
│ │ SearchPageStyle.js
│ │
│ └─user
│ ├─LoginPage
│ │ index.js
│ │ LoginPage.js
│ │
│ └─RegisterPage
│ index.js
│ RegisterPage.js
│
└─redux
│ store.js
│
└─reducers
userReducer.js
吃貨地圖後端，採用 Express、Sequelize 開發。