The redux-blog from benben6515

redux-blog's Introduction

這一個 React / Redux 做的部落格

可以查看文章，註冊後可以發佈文章。

demo

功能

登入頁面：輸入帳號密碼後可以登入
註冊頁面：可以開放使用者註冊
About 頁面：簡單關於部落格的話
404 頁面：如果網址有誤會跑到 404 頁面
文章列表頁面：可以看到所有文章，一頁只會顯示 5 筆，需要支援分頁功能，可以換頁
單篇文章頁面：點進去文章以後可以看到文章完整內容
發表文章頁面：可以輸入標題跟內文發文
刪除文章：只有同一個使用者才可以刪除文章
編輯文章：只有同一個使用者才可以編輯文章，編輯完跳回單一文章頁面
單一使用者的所有文章頁面：查看某一個使用者的所有文章

使用技術

react
react-router-dom
redux
redux toolkit
redux thunk 串接 API
emotion/styled

部分截圖

導覽列
主題、登入、編輯功能
分頁、刪除、登出功能

Source tree

📦src
 ┣ 📂app
 ┃ ┗ 📜store.js
 ┣ 📂components
 ┃ ┣ 📜Blog.js
 ┃ ┣ 📜Footer.js
 ┃ ┣ 📜index.js
 ┃ ┗ 📜Nav.js
 ┣ 📂features
 ┃ ┣ 📂post
 ┃ ┃ ┗ 📜postSlice.js
 ┃ ┗ 📂user
 ┃ ┃ ┗ 📜userSlice.js
 ┣ 📂images
 ┃ ┗ 📜day_night_icon.svg
 ┣ 📂pages
 ┃ ┣ 📜AboutPage.js
 ┃ ┣ 📜ErrorPage.js
 ┃ ┣ 📜HomePage.js
 ┃ ┣ 📜LoadingPage.js
 ┃ ┣ 📜OnePostPage.js
 ┃ ┣ 📜PostPage.js
 ┃ ┣ 📜UserPage.js
 ┃ ┗ 📜UserPostsPage.js
 ┣ 📂styles
 ┃ ┣ 📜animations.js
 ┃ ┣ 📜GlobalStyle.js
 ┃ ┣ 📜PostStyled.js
 ┃ ┗ 📜theme.js
 ┣ 📜index.js
 ┣ 📜localStorageAPI.js
 ┗ 📜webAPI.js
📜.env

Recommend Projects