https://github.com/chaudinh/reddit-web
A client of reddit clone with React, ChakraUI and more...
https://github.com/chaudinh/reddit-web
Last synced: 4 months ago
JSON representation
A client of reddit clone with React, ChakraUI and more...
- Host: GitHub
- URL: https://github.com/chaudinh/reddit-web
- Owner: ChauDinh
- Created: 2020-08-25T11:58:09.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-04-25T10:41:46.000Z (about 4 years ago)
- Last Synced: 2025-01-19T14:19:24.551Z (5 months ago)
- Language: TypeScript
- Size: 1.34 MB
- Stars: 1
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# M.amanlearnscode client📘
The web app is built by React and Next.JS with Chakra-UI library.
### Agenda
### Server-side rendering with Next.js
me -> browse http://localhost:3000
-> next.js server
-> request graphql server (node.js) localhost:4000/graphql
-> next.js builds the HTML
-> next.js sends back to the client (your browser)
### How we create, save and render HTML of Rich Text Editor
In this project, we use Slate.JS, a tool allows us customize rich text editor.
It supports very good for React and TypeScript, you can check their official
docs to read the example code (using React hooks, TypeScript).
Back to our stacks, we use PostgreSQL as database. When people type in the
`Editable` box, we update the state (slate node) and convert the state into json
string. We store the JSON string into database.
When we need to display the content of the post, which has the rich text
content, we send a request (GET) to the server and receive the JSON string. We
parse the string and serialize them into HTML object (check for docs on
Slate.js). To render these HTML objects, we pass them into the
`dangerouslySetInnerHTML` attribute, you can also do with `react-html-parser` library.
## (Vietnamese)
✅ hoàn thành
✍️ chưa hoàn thành, đang hoàn thành
💡 Ý tưởng
### Yêu cầu hệ thống
#### 1.1 Yêu cầu bắt buộc
- Cho phép người dùng đăng nhập, đăng ký (✅)
- Cho phép người dùng đọc tất cả các bài viết của các thành viên khác (✅)
- Có tính năng theo dõi (subscribe/follow) và vote các bài viết (✅)
- Hệ thống có thể hiển thị nội dung (đã thu gọn) các bài viết tại trang chủ (✅✍️)
- Cho phép người đăng nhập tạo bài viết mới (✅)
- Sử dụng session cookie để xác thực request ở client tới server (✅)
- Khung soạn thảo phải là một Rich Text Editor (WYSIWYG) - Sử dụng Slate.js (✅)
- Khung soạn thảo phải cho phép người dùng upload hình ảnh (cả dạng url và
.png/.jpg...) (✅✍️)
- Reading list (✍️)
- Trang dashboard quản lý bài viết, thông tin following/followers, số lượng
upvote/downvote, các bài viết lưu trong reading list, upgrade lên thành viên
premium... (✅✍️)
- Tính năng tìm kiếm bài viết theo tiêu đề, chủ đề, tìm kiếm tác giả theo username (💡✍️)
- Thêm trường chủ đề (categories) cho bài viết (post) (✍️)
#### 1.2 Yêu cầu không bắt buộc (Optional)
- Một news feed nhỏ dạng slider như Instagram cho phép người dùng tạo image và
một đoạn status ngắn. (✍️)
- Chỉ hiển thị những news feed từ những người dùng bạn đang theo dõi (✍️)
- Tạo một số biểu đồ thống kê thông tin bài viết, lượt up/down vote, chia sẻ,
trending... (✍️)
#### Lưu trữ