Lauren's Profile

Avatar of 陳思瑾.
Avatar of 陳思瑾.

Lauren's Profile

Frontend developer
Taipei City, Taiwan

【Side Project】廢文板

網站連結:https://scps940327.github.io/Wasting-Board/

有鑑於現在是一個速食文化的社會,大家享受著快速的資訊流動,步調越來越快的同時可能生活的壓力也隨之增加,所以就需要一個能夠讓人傾吐垃圾的地方,在這個廢文板上,如他的名字一般,發文者不必言之有物,也不必留下任何名字,只管暢所欲言,把心中的情緒一吐為快,在發完文之後也不用再把這篇文放在心上,因為24小時之後文章就會隨著時間消失了。

因為這樣的 idea,還有我想要實作這陣子以來自學 React 的部分,於是就開啟了這個專案。

使用技術

  • React + Redux 生成畫面
  • AJAX + Google AppScript + Google Sheet 搭配做資料庫的串接部分
  • SASS + Bootstrap 4 處理 CSS 樣式的部分
  • Webpack 打包生成所有檔案

發文

進入網站的使用者不需要經過登入的動作就可以發文,主要也是希望給使用者一個可以隨手發的感覺;

新的貼文可以上傳單張照片也可以不上傳,但文字欄位不能空白,圖片的部分因為考慮到效能問題,若使用者上傳圖片過大,會使用 JavaScript 先進行壓縮過後再上傳。

Facebook登入

點擊頁面右上角的 icon 可以使用 Facebook 帳戶連結登入。

登入成功後可以看到頁面上方原本的歡迎資訊已經帶入使用者的資料就是登入成功了

 

帳戶頁面

因為資料的儲存是使用 Google AppScript + Google Sheet ,所以這邊先沒有做太複雜的會員系統功能;帳戶頁面主要的功能就是可以讓使用者上傳意見回饋給廢文板。

作品集 / GitHub

關於過去製作過的專案,我有整理在 GitHub 的作品集專案中,在作品集頁面中可點擊專案圖片前往該網站查看。

https://scps940327.github.io/profile/


-


或是我在自己的 GitHub 上也有一些自己練習的小專案:連結

這是我在前端工程師正職之餘自行開發的小專案
Avatar of the user.
Please login to comment.

Published: Dec 9th 2023
46
6
0

Tools

github
GitHub
css3
CSS3
bootstrap
Bootstrap
babel
Babel
webpack
Webpack
angular
Angular
react
React

Frontend-Engineer
前端工程師

Share