/blog-app-front-end-01

Primary LanguageJavaScriptMIT LicenseMIT

Free Code Camp Hanoi Blog Project (Front-end)

Giới thiệu chung

Tiến độ & Đánh giá:

  • Dự án bắt đầu từ tuần 1 của tháng 1 năm 2018, và kết thúc vào ngày 19 tháng 3 năm 2018.
  • Front-end:
    • Phần tính năng đã hoàn thành 90%, còn một vài lỗi lặt vặt.
    • Giao diện cần được chỉnh sửa chau chuốt hơn.
    • Đánh giá tổng thể hoàn thành khoảng 60%.
  • Back-end:
    • Phần tính năng đã xong.
    • So với các mục tiêu đề ra (bao gồm cả test, documenation, bảo mật, v.v. ) thì đã hoàn thành được khoảng 80% - 90%.
  • Cả front-end và back-end đã được test trên local.
  • Toàn bộ đã được deploy lên heroku. Kiểm tra tại đây: https://fcchn-blog-frontend.herokuapp.com/

Tính năng và công nghệ

Là một platform để viết blog, nơi các thành viên có thể viết blog, đăng bài, xem bài của mình cũng như của người khác, bình luận vào bài của người khác. Sản phẩm này sẽ học theo các platform viết blog khác như Medium nhưng chỉ dừng ở mức cơ bản. Mục đích cuối cùng vẫn là nắm bắt được những công nghệ cần dùng cho 1 sản phẩm hoàn thiện (xem thêm mục "Những điều học được qua dự án này" ở bên dưới)

Technologies

Tính năng chi tiết

  1. Đăng ký
  2. Đăng nhập
  3. View profile
  4. Chỉnh sửa profile
  5. Viết blog mới
  6. Chỉnh sửa blog cũ
  7. View danh sách blog của bản thân
  8. View blog của người khác
  9. Xóa blog
  10. Comment
  11. Like
  12. Share Facebook

Công nghệ sử dụng

  • Front-end:
    • React
    • Bootstrap
  • Back-end:
    • Node.js
    • Express.js
    • MongoDB-moongoose
  • Testing:
    • Unit test: Karma, Mochai, Chai, Sinon
    • Automation test: Selenium
  • Bảo mật

Công cụ sử dụng

  1. Visual Design: Gravit Designer
  2. Visual Studio Code

Cấu trúc

  • client
  • server
  • test
  • configuration

Những điều học được qua dự án này

  • Cách đóng góp vào dự án mã nguồn mở trên Github

    • Hiểu về Git cơ bản: clone, add, commit, push
    • Hiểu về remote và local repositories
    • Biết tạo nhánh (branch) và hiểu về mục đích của việc tạo nhánh
    • Biết cách fork, và pull để cập nhật từ repo gốc
    • Biết cách commit và push lên remote repo của bản thân
    • Biết cách tạo pull request để merge từ remote repo của bản thân vào repo gốc
    • Biết cách cập nhật pull request khi muốn thay đổi hoặc sửa lỗi trước khi merge

  • Làm việc nhóm qua mạng

    • Chọn chủ đề
    • Thống nhất về workflow
    • Ưu nhược điểm của làm việc nhóm
    • Giao tiếp online: ưu nhược điểm.
    • Các công cụ để giao tiếp online
    • Giao tiếp offline: ưu nhược điểm. Cách thức.
    • Cách giải quyết khi có mâu thuẫn
    • Công cụ để quản lý dự án theo nhóm
    • Cách phân chia công việc:
      • Cấu trúc của dự án
      • Nhiệm vụ chi tiết

  • Hiểu và thực hành các công nghệ front-end:

    • Quy trình design:
      • Viết requirement và user stories
      • Sử dụng Gravit Designer để vẽ
    • Bootstrap
    • React
    • React-Router

  • Hiểu và thực hành các công nghệ back-end:

    • Database:
      • MongoDB
      • Mongoose
    • Rest API
    • HTTP (hoặc HTTPs)
    • User Authentication
    • User Authorization

  • Hiểu và thực thành Node.js:

    • Node.js
    • Express.js

  • Hiểu và thực hành unit test cũng như automation test:

    • Naive test sử dụng Postman và Robo3T
    • Unit test sử dụng Mocha, Chai và Chai-Http
    • Automation test sử dụng Selenium

  • Biết, thống nhất, và cấu hình cho linting tool

    • Code format khi chạy trên local
    • Code format khi commit lên remote

  • Hiểu cơ bản về bảo mật cho website

    • Bảo mật chung cho website
    • Bảo mật riêng cho Node.js

  • Biết cách cấu hình cho Webpack

  • Triển khai sản phẩm: quản lý asset và Heroku