Build & Deploy Ứng dụng ghi chú Fullstack (React, NodeJS, GraphQL, MongoDB, Firebase)

2 years ago

Trong video này chúng ta sẽ được học cách để xây dựng một ứng dụng Fullstack, phần UI sẽ sử dụng ReactJS và Marterial UI phần backend sẽ sử dụng NodeJS. Chúng ta sẽ học cách cấu hình GraphQL server và thao tác dữ liệu trong MongoDB.

🔗 Link tham khảo 🔗
Source code: https://github.com/holetexvn/note-app-holetex
Live Demo: https://note-app-holetex.netlify.app/

⏰ Timeline ⏰
00:00 Intro
02:28 Cấu hình GraphQL Server
08:40 Schema & Resolver trong GraphQL là gì?
16:45 Cách liên kết giữa các type trong Schema & Resolver
23:18 Cách hoạt động của Resolver
32:20 Cấu hình React project
35:50 Cấu hình react router dom v6
41:20 Cấu hình & kết nối Firebase trong Login page
48:10 Tạo `AuthContext` để lưu trữ thông tin người dùng
1:06:20 Xây dựng layout cho Home page
1:45:05 `loader` & cách lấy dữ liệu bằng `useLoaderData` trong react router dom v6
1:51:10 Cách gửi & đọc dữ liệu từ client trong GraphQL
2:11:00 Kết nối database MongoDB
2:33:45 Xử lý access token phía Frontend
2:39:40 Viết code xử lý access token phía Backend
2:55:43 Fix 1 số lỗi quan trọng phía Frontend
3:06:10 Thêm chức năng Tạo Thư mục
3:25:40 Thêm chức năng Tạo Ghi chú
3:45:40 Thêm chức năng Tự động cập nhật ghi chú sau khi edit
4:03:23 Cách tạo custom type Date trong GraphQL
4:10:30 Thêm chức năng Push Notification Real time bằng WebSocket
4:37:00 Deploy Frontend lên Netlify, Backend lên Render

👉 Tính năng
– Đăng nhập bằng Google thông qua Firebase
– Cấu hình và sử dụng GraphQL
– Xử lý access token
– Thao tác và sử dụng MongoDB
– Thực hành chức năng Push Notification
– Deploy code lên Netlify và Render

📚 Kiến thức trong video
– Context API
– React Router DOM
– React Hooks
– Marterial UI
– Firebase Authentication
– Thao tác với MongoDB
– GraphQL

📢 Liên hệ với mình tại 📢
Facebook: https://www.facebook.com/holetex
Tiktok: https://tiktok.com/@holetex
Github: https://github.com/holetexvn
Facebook cá nhân: https://www.facebook.com/minhtung09
Email: holetex@outlook.com
Website: https://holetex.com

🤝 Tham gia làm hội viên của kênh này để được hưởng đặc quyền:
https://www.youtube.com/HoleTex/join