Tally: Bảng Điều Khiển Sống Tốt

Giới thiệu

Bạn đã bao giờ gặp khó khăn khi chuyển đến một khu vực hoặc thành phố hoàn toàn mới để làm việc hoặc học tập chưa? Sự không chắc chắn về điều kiện sống tại khu vực mới có thể làm bạn cảm thấy căng thẳng hơn. Đó là lý do Tally ra đời. Đây là một giải pháp dựa trên khảo sát giúp thu thập thông tin giá trị từ cư dân địa phương thông qua việc đánh giá các tiện ích như trường học, bệnh viện, chất lượng cuộc sống như độ sạch sẽ, chất lượng nước, không khí, khả năng chi trả và an toàn.

Khi khảo sát được gửi đi, dữ liệu tổng hợp từ các đánh giá của cộng đồng sẽ được hiển thị trên một bảng điều khiển tương tác. Điều này giúp những người mới đến có cái nhìn tổng quan về khu vực mà họ có thể chuyển đến. Tôi nhớ khi tôi chuyển đến một thành phố mới để làm việc, việc lựa chọn khu vực phù hợp thật sự rất áp lực. Nếu tôi có một công cụ như Tally, quyết định của tôi sẽ dễ dàng và nhanh chóng hơn rất nhiều.

Tóm lại, Tally cung cấp một "Bảng Điều Khiển Sống Tốt" dựa trên đánh giá từ cư dân địa phương. Độ chính xác của bảng điều khiển sẽ được cải thiện khi có nhiều khảo sát hơn được gửi đi, làm cho nó trở thành một công cụ đáng tin cậy để tìm khu vực mới. Hơn nữa, bất kỳ ai cũng có thể góp phần bằng cách điền vào mẫu khảo sát, hỗ trợ cho sáng kiến cộng đồng này.

Demo

Liên kết cho demo & kho lưu trữ

Công nghệ, công cụ & thư viện

Frontend: React với Typescript
Backend: Node.js với Typescript
Cơ sở dữ liệu: Firebase Firestore
Thành phần UI: KendoReact và MUI
API Định vị: ipapi API để lấy vị trí của người dùng tự động điền vào các trường địa điểm và tạo bảng điều khiển cho vị trí đó.
Biểu đồ và biểu đồ: Recharts được sử dụng để hiển thị dữ liệu trên bảng điều khiển.
Gói bổ sung: sass, eslint, dotenv, react-router, v.v.
Quản lý phiên bản: Github
Lưu trữ Backend & Github: Render
Lưu trữ Frontend & Github: Netlify

Quy trình & Demo

Hãy bắt đầu với demo!

Trang chủ & Thanh điều hướng

Khi bạn truy cập, bạn sẽ thấy trang chủ của Tally:

Thanh điều hướng chứa các nút để điều hướng đến Trang chủ, Mẫu khảo sát và Bảng điều khiển. Các nút này được xây dựng bằng SvgIcons của KendoReact.

Mẫu khảo sát

Mẫu khảo sát bao gồm năm accordion. Tiêu đề và phụ đề của trang được tạo ra bằng Typography của KendoReact. Ngoài ra, các tiêu đề accordion có chức năng Tooltip cũng được tạo ra bằng KendoReact.

Hai phần đầu tiên là để điền thông tin cá nhân và địa phương, trong khi các phần còn lại là để đánh giá và nhận xét.

Accordion địa phương bao gồm ba trường được tự động điền (sử dụng API ipapi), để tránh việc người dùng nhập dữ liệu không chính xác. Tuy nhiên, các trường này vẫn có thể chỉnh sửa. Trong phần này, tôi đã sử dụng các thành phần Label, Input và Autocomplete từ KendoReact.

Tiếp theo là các accordion đánh giá. Thành phần trượt của MUI đã được sử dụng để thu thập đánh giá từ cư dân về các tiện ích và yếu tố khác nhau trong khu vực của họ:

Và phần cuối cùng là để nhận xét hoặc phản hồi của cư dân về khu vực của họ:

Tại đây, tôi đã sử dụng TextArea từ KendoReact. Cuối cùng, nút Gửi được xây dựng bằng Button của KendoReact.

Khi toàn bộ mẫu được điền đầy đủ, nút sẽ được kích hoạt. Sau khi gửi, bạn sẽ thấy một trang tải đang chuyển tiếp, đây là Infinite Spinner Loader của KendoReact. Nếu mẫu được gửi thành công, một thông báo thành công sẽ được hiển thị bằng Notification component từ KendoReact. Tôi sẽ trình bày các thành phần này trong video đính kèm.

Bảng điều khiển

Bảng điều khiển bao gồm một trường tìm kiếm để tìm tên khu vực (có thể là khu vực, mã bưu chính, thành phố hoặc tiểu bang mà bạn đã điền trong mẫu), khi nhấn Enter, màn hình tải sẽ hiện lên. Nếu dữ liệu cho khu vực tìm kiếm được tìm thấy, nó sẽ hiển thị bảng điều khiển, nếu không nó sẽ hiển thị trang không tìm thấy.

Bảng điều khiển nhìn chung như thế này:

Các biểu đồ này đã được tạo ra bằng thư viện Recharts của React. Chúng chứa các chỉ số cho các đánh giá tổng hợp về các tiện ích và tiêu chuẩn sống, một phần riêng biệt liệt kê nhận xét của cư dân về khu vực, và biểu đồ phân phối tuổi tác và nghề nghiệp của khu vực. Biểu đồ đường cho thấy các xu hướng về chất lượng không khí, mức độ ồn, độ sạch sẽ và chất lượng nước theo thời gian.

Một demo

Video ngắn này sẽ trình bày tất cả các thành phần, biểu đồ trong bảng điều khiển và mẫu khảo sát. Nó cũng sẽ trình bày cách ứng dụng hoạt động khi tìm kiếm một vị trí không tồn tại cũng như quy trình gửi một mục khảo sát mới. Tôi đã sử dụng ví dụ về thành phố "Mumbai" (chưa có trong cơ sở dữ liệu) và thêm một mục khảo sát mới cho nó, từ đó tạo ra bảng điều khiển.

Các thành phần KendoReact được sử dụng

Danh sách các thành phần KendoReact được sử dụng trong Tally:

Input
Button
Autocomplete
Label
Typography
Tooltip
Notification
Infinite Loader
Textarea
SvgIcon

Kết luận

Tóm lại, Tally là một nền tảng thân thiện với người dùng, được thiết kế để trực quan hóa tiêu chuẩn sống của các khu vực khác nhau, dựa chủ yếu vào sự tham gia cộng đồng rộng rãi và phản hồi xác thực để có được một loạt dữ liệu phong phú để trực quan hóa. Việc sử dụng React, Node, Firebase và các thư viện thành phần như MUI và KendoReact chắc chắn đã góp phần nâng cao hiệu suất và trải nghiệm người dùng của Tally. Khi số lượng người dùng tăng lên, Tally sẽ ngày càng trở nên chính xác hơn, trở thành một công cụ vô giá cho những người đang tìm kiếm nơi ở mới.