ĐỒ ÁN FULLSTACK (UI)

---

---

• Wiki - GitLab
• Project Overview
• About
• Project Structure
• Tính năng nổi bật
• Log - Quá trình làm
• Kiến thức học được
• Hỗ trợ - Social Media
• Từ Tác Giả

---

---

Wiki - GitLab

Wiki - GitLab Page

---

Project Overview

Project Overview

---

About

Đồ án Fullstack là... (TBA)

Project Structure

Monorepo With Yarn Workspaces:

Đây là cấu trúc tổ chức thư mục của Project (Chỉ show 1 vài file con của thư mục để ví dụ)

WIP

    📦FS-ui-client-next
 ┣ 📂assets                 //assets media
 ┃ ┣ 📂images
 ┃ ┃ ┣ 📂backgrounds
 ┃ ┃ ┣ 📂banner             //Phân chia ảnh đúng mục đích
 ┃ ┃ ┃ ┣ 📜1.jpg
 ┃ ┃ ┃ ┣ 📜2.jpg
 ┃ ┃ ┃ ┗ 📜3.jpg
 ┃ ┃ ┣ 📂blog            
 ┃ ┃ ┣ 📂destinations
 ┃ ┃ ┣ 📂favicons
 ┃ ┃ ┣ 📂gallery
 ┃ ┃ ┣ 📂resources
 ┃ ┃ ┣ 📂shapes
 ┃ ┃ ┣ 📂team
 ┃ ┃ ┣ 📂testimonials        
 ┃ ┃ ┣ 📂tour
 ┃ ┃ ┣ 📜404.png             
 ┃ ┃ ┣ 📜404@2x.png         // Ví dụ về place file media
 ┃ ┗ 📂style
 ┃ ┃ ┗ 📜Global.style.jsx   // File global css
 ┣ 📂components             
 ┃ ┣ 📂Map
 ┃ ┃ ┗ 📜hotelMapMarker.png // Có thể để ảnh vô component
 ┃ ┣ 📂Navbar             // Ví dụ về 1 component thành phần chính là Navbar - sử dụng styled component
 ┃ ┃ ┣ 📜Navbar.jsx
 ┃ ┃ ┗ 📜Navbar.style.jsx
 ┃ ┗ 📂UI                 // Folder UI đặc biệt quan trọng sử dụng cho UI - libs, snippet, chưa nặng tính logic và custom
 ┃ ┃ ┣ 📂Antd             // Tổ chức import/export Antd 
 ┃ ┃ ┃ ┣ 📂Avatar
 ┃ ┃ ┃ ┣ 📂Button
 ┃ ┃ ┃ ┣ 📂Drawer
 ┃ ┃ ┃ ┣ 📂Icon
 ┃ ┃ ┃ ┣ 📂Input
 ┃ ┃ ┃ ┣ 📂Layout
 ┃ ┃ ┃ ┗ 📂Menu
 ┃ ┃ ┣ 📂Container
 ┃ ┃ ┣ 📂DatePicker
 ┃ ┃ ┣ 📂GlideCarousel
 ┃ ┃ ┣ 📂Heading
 ┃ ┃ ┣ 📂InputIncDec
 ┃ ┃ ┣ 📂Logo
 ┃ ┃ ┣ 📂Portal
 ┃ ┃ ┣ 📂Text
 ┃ ┃ ┣ 📂ViewWithPopup
 ┃ ┃ ┗ 📜Base.jsx       //File base Proptypes, tất cá components UI phải kế thừa từ mục base - default
 ┣ 📂container             //Phân chia Container mục đích
 ┃ ┣ 📂Home
 ┃ ┃ ┣ 📂Location
 ┃ ┃ ┗ 📂Search
 ┃ ┣ 📂Layout
 ┃ ┃ ┣ 📂Footer
 ┃ ┃ ┣ 📂Header
 ┃ ┃ ┗ 📜Layout.jsx
 ┃ ┗ 📜blankPage.jsx      //Blankpage cho mocking
 ┣ 📂context              //Thực hiện gọi API bằng context
 ┣ 📂Developer            //Markdowns file của project trừ README.md
 ┃ ┣ 📂PROGRESS
 ┃ ┗ 📜About.md
 ┣ 📂library
 ┃ ┣ 📂helpers      // Các lib universal hỗ trợ
 ┃ ┗ 📂hooks        // Custom Hooks
 ┣ 📂pages
 ┃ ┣ 📂__test__     // Unit test cho pages (included built-in)
 ┃ ┃ ┗ 📜index.test.jsx
 ┃ ┣ 📂__mock__     // Unit test temp folder cho parse non-extensions included
 ┃ ┃ ┣ fileMock.js //media mock
 ┃ ┃ ┗ styleMock.js //styling mock
 ┃ ┣ 📜index.jsx
 ┃ ┣ 📜_app.jsx    
 ┃ ┗ 📜_document.jsx
 ┣ 📂public
 ┃ ┣ 📂static       // Static data
 ┃ ┃ ┣ 📂data
 ┃ ┃ ┣ 📂flag
 ┃ ┃ ┗ 📂images
 ┃ ┃ ┃ ┣ 📜404.png
 ┃ ┃ ┃ ┣ 📜404@2x.png
 ┃ ┣ 📜favicon.ico
 ┃ ┗ 📜zeit.svg
 ┣ 📂settings
 ┃ ┣ 📜config.js    // Responsive
 ┃ ┣ 📜constants.js // Cho routing
 ┃ ┗ 📜setup.js // Unit Test setup Enzyme adapter
 ┣ 📂themes
 ┃ ┗ 📜default.theme.js // Variables
 ┣ 📜.eslintrc.js   // Linter
 ┣ 📜.gitignore
 ┣ 📜.prettierrc.js // Prettier
 ┣ 📜Docker
 ┣ 📜jest.config.js
 ┣ 📜jest.setup.js
 ┣ 📜jsConfig.json
 ┣ 📜babel.config.js //Webpack config
 ┣ 📜mock
 ┣ 📜next.config.js  // Config cho next dùng css
 ┣ 📜package.json
 ┣ 📜README.md
 ┗ 📜yarn.lock

---

ĐỒ ÁN FULLSTACK - ... (TBA)

---

Tính năng nổi bật

• ReactJS with SSR using NEXTJS
• Responsive bắt mắt
• Styled-Components
• Thiết kế Medium-Styles
• Validation
• Có demo test bằng Jest/Enzyme và react/tesing
• Context API
• Sử dụng API nhà làm - tự thiết kế backend
• Tích hợp Social Login + SSO dễ dàng đăng nhập
• Update thường xuyên
• SEO with SSR
• AMP support (Accelerated Mobile Pages)
• Strict với Folder Structure, Linter

---

Log - Quá trình làm

Theo dõi quá trình làm ĐỒ ÁN FULLSTACK (UI) - ... của mình tại đây

Phase 1

• 1.1
• 1.2
• 1.3

Phase 2

• 2.1
• 2.2
• 2.3

Phase 3

• 3.1
• 3.2

Kiến thức học được

• Chapter 1
• Chapter 2
• Chapter 3

Hỗ trợ - Social Media

• Facebook
• Gmail - UIT
• Slack

---

Từ tác giả

Vì là dự án solo làm từ đầu đến cuối và nhiều assignments vào giai đoạn làm và cả đi quốc phòng nên khá là mệt nhưng cũng rất tâm huyết cho nó vì nhất định mình phải chạm tới được thứ mình nhắm tới

---

Everything will be fulfilled