Soft & Share 開源報報 166 – 使用 React & Node & MongoDB 建立類似亞馬遜的電子商務網站

學習資源

關於如何成為一名專業的Web /行動應用程式開發人員的建議指南

• https://github.com/apptension/developer-handbook

開發人員手冊2020涵蓋了在這家公司 – Apptension 面試，入職或個人目標/職業規劃期間出現的最常見的技術問題和要求。

它包含了許多為Web和行動開發人員收集的主觀技術小組，有想法的技術，經過審查的需求和最佳實踐。

工具

使用 SwiftUI 開發的 Reddit MacOS X 桌面應用程式

• https://github.com/Dimillian/RedditOS

---

Android 系統的魔法工具

• https://github.com/topjohnwu/Magisk

是一套用於客製化 Android 的開源工具，支援比 Android 4.2更高階的裝置。它涵蓋了 Android 客製化的基本部分: root、boot scripts、 SELinux 補丁、 AVB2.0/dm-verity/force/encrypt 清除等。

---

從遠端訪問伺服器的安全匣道器

• https://github.com/gravitational/teleport

Gravitational Teleport 是一個現代的安全閘道器，用於遠端訪問:

• 透過 SSH 或 SSH-over-https 在瀏覽器中訪問 Linux 伺服器叢集
• Kubernetes 叢集

它可用於需要以下用途的組織，或與sshd一起使用：

• 用session錄製/重播的 SSH 稽核
• Kubernetes API 訪問稽核和錄製與重播
• 輕鬆管理團隊、組織和資料中心之間的信任
• 讓 SSH 或 Kubernetes 訪問防火牆後的叢集，而不使用任何開放埠
• 用於 SSH 通訊協定以角色為基礎的存取控制
• 用於 SSH 和 Kubernetes 的統一 RBAC

除了它標誌性的特性之外，Teleport 對於較小的團隊來說也很有意思，因為它可以方便地採用最好的基礎設施安全實踐，比如:

• 不需要分發金鑰: Teleport 使用基於證書的訪問，具有自動的證書過期時間
• SSH 和 Kubernetes 的兩階段身份驗證(2FA)
• 透過 session 共享協作解決問題
• 透過 Github Auth、 OpenID Connect 或 SAML 實現 SSH/Kubernetes 單點登入(SSO) 和你的組織驗證，其端點為 Okta 或 Active Directory
• 叢集自檢: 可以透過 CLI 和 Web UI 查詢每個 SSH 節點及其狀態

Teleport 建構在高品質的 Golang SSH 實現之上，它與 OpenSSH 完全相容，可以與 sshd 伺服器和 SSH 客戶端一起使用。

---

執行在你自己的私有雲端中基於 web 的 SQL 編輯器

• https://github.com/rickbergfalk/sqlpad

編寫和執行 SQL 查詢並視覺化結果的 web 應用程式。透過 ODBC 支援 Postgres，MySQL，SQL Server，ClickHouse，Crate，Vertica，Presto，SAP HANA，Cassandra，Snowflake，Google BigQuery，SQLite 等等。

Web 應用程式開發

使用 React + Redux 仿製 YouTube 的前端

• https://github.com/manikandanraji/youtubeclone-frontend

使用 PERN 堆疊模仿實作 Youtube (Postgres，Express，React，Node)。

核心套件

1. Redux – State Management
2. React Router – Routing
3. Styling – Styled Components
4. Toast Notifications – React Toastify
5. Network calls – Axios
6. Video player – Videojs

---

仿製 YouTube 的後端

• https://github.com/manikandanraji/youtubeclone-backend

後端使用 Express + Sequelize

核心套件

1. sequelize – ORM for sql dialects
2. jsonwebtoken – authentication
3. bcryptjs – password hashing

---

診斷你的 Node.js 效能問題

• https://github.com/nearform/node-clinic

由 NearForm 支援的開源 Node.js 效能分析套件。擁有視覺化圖表能看到 CPU Usage, Memory Usage, Event Loop Delay 和常用的 Flame Graph

---

使用 React & Node & MongoDB 建立類似亞馬遜的電子商務網站

• https://github.com/basir/node-react-ecommerce

這是一個免費的線上教學，影片放在 YouTube

你會學到

• HTML5 and CSS3: Semantic Elements, CSS Grid, Flexbox
• React: Components, Props, Events, Hooks, Router, Axios
• Redux: Store, Reducers, Actions
• Node & Express: Web API, Body Parser, File Upload, JWT
• MongoDB: Mongoose, Aggregation
• Development: ESLint, Babel, Git, Github,
• Deployment: Heroku
• Watch React & Node Tutorial

---

真實世界使用 Vue.js、 Vuex、 axios 開發的應用程式範例

• https://github.com/gothinkster/vue-realworld-example-app

建立這個程式碼庫是為了展示一個用 Vue.js 建構的成熟的全堆疊應用程式，包括 CRUD 操作、身份驗證、路由、分頁等等。

---

用於構建客戶端 web 應用程式的 Rust/Wasm 框架

• https://github.com/yewstack/yew

Yew 是一個現代 Rust 框架建立多執行緒前端網頁應用程式與 WebAssembly。

• 用 Rust 表示式宣告一個互動式 HTML 巨集。有在 React 中使用 JSX 經驗的開發人員在使用 Yew 時應該會感到很自在
• 透過最小化每個頁面渲染的 DOM API 呼叫以及透過簡化將處理負擔放到後台 web worker 來實現高效能
• 支援 JavaScript 互操作性，允許開發人員利用 NPM 套件並與現有的 JavaScript 應用程式整合

雲端和網路管理

具有高階功能的現代網路釣魚工具

• https://github.com/DarkSecDevelopers/HiddenEye

這個工具只用於教育用途

---

NATS ，Cloud Native 訊息系統的高效能伺服器

• https://github.com/nats-io/nats-server

NATS 是一種用於數位系統、服務和裝置的簡單、安全和高效的通訊系統。NATS 是 Cloud Native 運算基金會(CNCF)的一部分。NATS 有超過30個客戶端語言實現，它的伺服器可以執行在本地端、雲端、邊緣，甚至在 Raspberry Pi 上。NATS 可以保護和簡化現代分散式系統的設計和操作。