강의

멘토링

커뮤니티

Programming

/

Front-end

Tạo dịch vụ Notion toàn ngăn xếp Next.js

Xây dựng các ứng dụng toàn diện với tính năng đồng bộ hóa thời gian thực và thiết kế đáp ứng: Đưa kỹ năng phát triển web của bạn lên một tầm cao mới bằng cách tạo bản sao Notion trực quan. Đây là cơ hội hoàn hảo để phát triển nhanh chóng với trải nghiệm dự án thực tế! (Được cung cấp bởi Antonio Erdeljac)

5 học viên đang tham gia khóa học này

Độ khó Trung cấp trở lên

Thời gian Không giới hạn

  • Su
Next.js
Next.js
React
React
TypeScript
TypeScript
Node.js
Node.js
Next.js
Next.js
React
React
TypeScript
TypeScript
Node.js
Node.js

Bạn sẽ nhận được điều này sau khi học.

  • Tận dụng các công nghệ web mới nhất: Tìm hiểu cách xây dựng các ứng dụng web hiện đại bằng Next.js 14 và React.

  • Xây dựng cơ sở dữ liệu thời gian thực: Tìm hiểu cách tận dụng Convex để xử lý và đồng bộ hóa dữ liệu trong thời gian thực.

  • Phát triển trình soạn thảo kiểu Notion: Triển khai các tính năng chỉnh sửa tài liệu trực quan và mạnh mẽ bằng React.

  • Chuyển đổi giữa chế độ sáng và tối: Triển khai khả năng thay đổi chủ đề giao diện dựa trên sở thích của người dùng.

  • Quản lý tài liệu phân cấp: Tìm hiểu cách tạo và quản lý cấu trúc tài liệu con phân cấp vô hạn.

  • Hệ thống quản lý tệp hiệu quả: Xây dựng hệ thống quản lý tệp toàn diện bao gồm các chức năng tải lên, xóa và thay thế tệp.

  • Xác thực và bảo mật người dùng: Bảo vệ ứng dụng của bạn bằng cách triển khai hệ thống xác thực người dùng an toàn.

  • Thiết kế web đáp ứng: Triển khai thiết kế đáp ứng hoạt động hoàn hảo trên tất cả các thiết bị.

  • Khả năng xuất bản web: Phát triển các tính năng cho phép người dùng chia sẻ ghi chú của họ trên web.

  • Hệ thống khôi phục tệp: Ngăn chặn mất dữ liệu bằng cách triển khai khả năng khôi phục các tệp đã xóa.

  • Trải nghiệm người dùng nâng cao: Cung cấp trải nghiệm người dùng phong phú với các thanh bên có thể mở rộng, trang đích hấp dẫn và ảnh bìa dành riêng cho tài liệu.

Xây dựng dịch vụ Notion đầy đủ với Next.js

🌟 Chào mừng bạn! Chúng tôi mời bạn tham gia khóa học về cách tạo dịch vụ Notion! 🌟

Trong thời đại kỹ thuật số hiện đại, việc quản lý và sắp xếp thông tin hiệu quả không còn là một lựa chọn nữa mà là một điều cần thiết. Các công cụ mạnh mẽ như Notion chính là trọng tâm của việc này. Giờ đây, bạn có cơ hội tự tạo ra giải pháp của riêng mình.

Khóa học này không chỉ đơn thuần là dạy các kỹ năng kỹ thuật; nó còn đưa bạn vào hành trình thực sự xây dựng các ứng dụng sáng tạo và thiết thực. Bạn sẽ được trải nghiệm toàn bộ quá trình tạo ra một sản phẩm hoàn chỉnh, từ xây dựng cơ sở dữ liệu thời gian thực đến thiết kế giao diện người dùng và tối ưu hóa cho thiết bị di động.

Khóa học này không chỉ dừng lại ở việc học lý thuyết suông. Bằng cách thực sự viết code, giải quyết vấn đề và triển khai các ý tưởng sáng tạo, bạn sẽ trở thành một nhà phát triển thực thụ.

Được hỗ trợ bởi Antonio Erdeljac


Bản demo : https://next-notion-clone-lyart.vercel.app/

Tóm tắt các tính năng triển khai

1. Cơ sở dữ liệu thời gian thực 🔁

2. Trình chỉnh sửa kiểu Notion 📝

3. Chuyển đổi giữa chế độ sáng và tối 🌗

4. Hệ thống tài liệu phân cấp vô hạn 🌲

5. Chức năng Thùng rác và Xóa mềm 🗑

6. Hệ thống xác thực người dùng 🔒

7. Tải lên, xóa và thay thế tệp 📂

8. Biểu tượng tài liệu thay đổi theo thời gian thực 🌟

9. Thanh bên có thể mở rộng 🔀

10. Tối ưu hóa môi trường di động 📱

11. Đăng ghi chú lên web 🌐

12. Thanh bên có thể thu gọn hoàn toàn

13. Trang đích 🛬

14. Đặt ảnh bìa cho mỗi tài liệu 🖼

15. Tính năng khôi phục tệp đã xóa 🔁 📄

Sau khi tham gia bài giảng, bạn sẽ có thể tạo ra những kết quả như thế này.

Trang đích

Thanh bên có thể thu gọn

Hệ thống tài liệu cấp độ vô hạn

Tính năng tìm kiếm tài liệu

Thùng rác: Tính năng xóa và khôi phục

Đồng bộ hóa tiêu đề và biểu tượng tài liệu theo thời gian thực

Thêm, xóa và thay thế ảnh bìa

Áp dụng Trình chỉnh sửa kiểu Notion

Tính năng xuất bản ghi chú trên web (Xuất bản tài liệu)

Tối ưu hóa môi trường di động (Thiết kế đáp ứng)

Cập nhật cơ sở dữ liệu theo thời gian thực

Bạn sẽ học được gì 🤖

1. Cơ sở dữ liệu thời gian thực : Tìm hiểu cách chọn và thiết lập cơ sở dữ liệu, cách đồng bộ hóa dữ liệu theo thời gian thực và cách giao tiếp giữa máy chủ và máy khách.

2. Notion Style Editor : Tìm hiểu các thành phần cơ bản để tạo trình soạn thảo văn bản thân thiện với người dùng và cách triển khai các tính năng văn bản phong phú.

3. Chuyển đổi giữa chế độ sáng và tối : Tìm hiểu cách chuyển đổi màu giao diện dựa trên sở thích của người dùng và các kỹ thuật quản lý chủ đề bằng CSS.

4. Hệ thống tài liệu phân cấp vô hạn : Bao gồm cách quản lý thông tin phức tạp một cách có hệ thống thông qua quản lý dữ liệu có cấu trúc cây và thiết kế thành phần đệ quy.

5. Tính năng Thùng rác và Xóa mềm : Tìm hiểu các chiến lược và thiết kế giao diện người dùng để quản lý dữ liệu đã xóa một cách hiệu quả.

6. Hệ thống xác thực người dùng : Tìm hiểu về các giao thức xác thực giúp tăng cường bảo mật và cách tích hợp thông tin đăng nhập bằng mạng xã hội.

7. Tải lên và quản lý tệp : Tìm hiểu cách tích hợp cơ chế tải lên tệp và lưu trữ đám mây, cũng như quản lý siêu dữ liệu tệp.

8. Thay đổi biểu tượng tài liệu theo thời gian thực : Tìm hiểu các kỹ thuật cập nhật UI cho phép người dùng thay đổi biểu tượng theo thời gian thực.

9. Thanh bên có thể mở rộng : Tìm hiểu các kỹ thuật thiết kế và hoạt ảnh đáp ứng cho phép người dùng tự do điều chỉnh thanh bên.

10. Tối ưu hóa thiết bị di động : Bao gồm thiết kế web đáp ứng, tương tác và tối ưu hóa hiệu suất cho thiết bị di động.

11. Xuất bản ghi chú của bạn trên web : Tìm hiểu cách xuất bản ghi chú của bạn trên web, tối ưu hóa SEO và các chiến lược tích hợp phương tiện truyền thông xã hội.

12. Thanh bên có thể thu gọn : Tìm hiểu thiết kế thanh bên và các kỹ thuật quản lý trạng thái để tối đa hóa không gian làm việc của người dùng.

13. Thiết kế trang đích : Tìm hiểu các nguyên tắc và chiến lược thiết kế trang đích để tăng sự tương tác của người dùng nhằm tạo ấn tượng đầu tiên hiệu quả.

14. Thiết lập ảnh bìa tài liệu : Thiết lập ảnh bìa phù hợp với từng tài liệu và tìm hiểu các kỹ thuật xử lý và tối ưu hóa hình ảnh.

15. Khôi phục tệp đã xóa : Tìm hiểu các chiến lược sao lưu và khôi phục dữ liệu, thiết kế giao diện người dùng và cách đảm bảo tính toàn vẹn của dữ liệu.

Khóa học này cung cấp kiến thức kỹ thuật và phương pháp thực tế cần thiết để xây dựng các ứng dụng thực tế thông qua các chủ đề trên.






Kỹ năng được sử dụng 💻

  • Next.js 14 (Bộ định tuyến ứng dụng)

  • Phản ứng

  • TypeScript

  • Gió xuôi

  • Lồi

  • Nhân viên văn phòng

  • Mây mù

  • BlockNote

  • Emoji-Piacker


  • Shadcn-UI

  • Giao diện người dùng Radix

  • Sonner

  • Zustand

  • SSR & CSR & SSG

🚀 Bạn đã sẵn sàng thỏa sức sáng tạo và tạo ra ứng dụng theo phong cách Notion của riêng mình chưa? Hãy tham gia khóa học này ngay hôm nay và khám phá những khả năng tiềm ẩn! 🚀

Những điều cần lưu ý trước khi tham gia khóa học

  • Nếu bạn có bất kỳ ghi chú nào cần thiết cho bài giảng, vui lòng ghi lại cẩn thận.

  • Nó có thể giúp sinh viên hiểu đầy đủ nội dung bài giảng và tăng sự hài lòng khi học.

Môi trường thực hành

  • Hệ điều hành và Phiên bản (OS): Windows 11

  • Công cụ được sử dụng: Node.js 20, Next 14

Tài liệu học tập

  • "Mã nguồn được sử dụng trong mỗi lớp học và mô tả về mã được ghi lại trong ghi chú lớp học."

Kiến thức và biện pháp phòng ngừa của người chơi

  • Cần có kiến thức cơ bản về HTML/CSS/JS!


  • Câu hỏi của bạn sẽ được trả lời trong vòng 24 giờ !

  • Chúng tôi sẽ dạy bạn TypeScript cần thiết cho bài giảng ngay trong bài giảng!

Bản quyền

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Các nhà phát triển quan tâm đến phát triển toàn diện: Lý tưởng cho các nhà phát triển quan tâm đến phát triển toàn diện bằng cách sử dụng các công nghệ web mới nhất.

  • Dành cho những người muốn xây dựng các dự án hoặc danh mục đầu tư cá nhân: Lý tưởng cho những ai muốn củng cố danh mục đầu tư của mình bằng cách tạo các ứng dụng đầy đủ, trong thế giới thực.

  • Những người thích tự học: Thích hợp cho những người muốn học theo tốc độ của riêng mình và áp dụng nó vào các dự án thực tế.

  • Những người quan tâm đến việc phát triển các công cụ cộng tác cho doanh nghiệp hoặc cá nhân: Điều này hữu ích cho các nhà phát triển hoặc sinh viên quan tâm đến việc phát triển các công cụ cộng tác hoặc hệ thống quản lý tài liệu.

  • Nhà phát triển web mới bắt đầu và trung cấp: Các nhà phát triển có kiến ​​thức phát triển web cơ bản nhưng muốn tích lũy kinh nghiệm xây dựng các ứng dụng full-stack thực sự hoạt động.

  • Nhà phát triển tự do: Các nhà phát triển tự do muốn làm chủ kho công nghệ đa dạng cho các dự án độc lập hoặc khách hàng.

  • Thành viên nhóm phát triển và CNTT của công ty: Các chuyên gia CNTT muốn tham gia vào các dự án nội bộ của công ty hoặc phát triển hệ thống.

  • Những người học viết mã như một sở thích: Những người học viết mã như một sở thích và muốn tạo ra các dự án của riêng mình.

  • Cơ hội học tập nâng cao dành cho các nhà phát triển web hiện tại: Các nhà phát triển web có kinh nghiệm muốn vượt ra khỏi nền tảng công nghệ hiện tại của họ và tìm hiểu các công nghệ mới.

Cần biết trước khi bắt đầu?

  • Kiến thức về HTML, CSS và JavaScript

  • Phản ứng kiến ​​thức cơ bản

  • Bản đánh máy (điều này sẽ được giải thích trong bài giảng)

Xin chào
Đây là

Chương trình giảng dạy

Tất cả

60 bài giảng ∙ (6giờ 35phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Chưa có đủ đánh giá.
Hãy trở thành tác giả của một đánh giá giúp mọi người!

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!