badukwei / tutorial-booker

專案名稱 : 教學媒合與訂閱系統

專案技能

React.js、Redux、React Router、React Schedular、ES6、SCSS、RWD

專案簡介

此專案為教師與學生媒合平台。使用React框架架構多頁式網站，並以Redux管理登入、預定資料、行事曆狀態。使用者可以以學生身分登入，查詢想學習 的科目以及教師，點擊教師頁面觀看行事曆，並進行預定。教師也可以以教師身分登入，更改上課日期，個人資料等。

專案技術

使用React框架架設網站
使用Reacr Router建構多頁式動態路由
使用Redux管理登入、預定資料、行事曆狀態
使用React Hook Form控制用戶資料輸入
串接Restful API(Google Auth2)
使用SCSS設計響應式網頁、頁面動畫、網頁UI

專案使用簡介

以學生身分註冊

1.進入主頁後點擊右上角Signup

warning : 因為此專案為純前端專案，因此並未真的存在註冊更新資料庫功能，因此重新整理後會遺失在頁面的所有更動

2.輸入你想要用的帳戶名、email和密碼

3.登入成功後會挑出顯示框，告知你已成功註冊，並詢問你要不要成為教師

4.點擊Become a tutor會跳出以下資料填寫表格，填寫完畢後點擊submit就可以擁有教師身分了

5.你也可以選擇不註冊，點擊navbar中的tutors開始尋找教師

6.進入後你會看訂頁面有不同的教師資訊以及一些filter

(1)上方search box可以依照教師名稱進行搜尋
(2)左方Price部分可以輸入最大值以最小值，以價格進行篩選
(3)左下則是可以依照主題進行搜尋

7.篩選過後找到喜歡的老師則可以點擊card下方的價格標籤進行預定

8.進入之後可以看到教師目前已經開課的時間段，你可以依照行事曆上面的時間進行預定

9.登入後右上角則會變成My Account字樣，點擊之後會顯示個人資料，點擊Profile可以看到個人資料

10.當然也可以點擊Learning schedule看目前的預定課的行事曆

11.如果回心轉意，當然也可以點擊become a tutor，填寫上面所說的表格

以教師身分登入

1.進入主頁後在右上角點擊Login

2.進入之後按照以下資訊進行登入

account name : BadukWei
password : abc1234567
大小寫有分

3.登入之後會回到主頁，右上角則會變成My Account字樣，點擊之後會顯示個人資料

4.點擊Profile會顯示教師基本資料

5.點擊teaching schedule會顯示目前被預訂的時間與行事曆，時段會顯示學生名稱

6.當然你也可以是一個學生，點擊learning schedule就可以找到你目前預定的課程