Ứng dụng Lets Chat | Bộ sưu tập mã nguồn mở

bytungmmo •
0

 ...

Ứng dụng Lets Chat | Bộ sưu tập mã nguồn mở

Một ứng dụng trò chuyện thời gian thực. Một dự án phụ thú vị khác :)

Công nghệ sử dụng

  • React và TailwindCSS cho giao diện người dùng
  • Firebase để xác thực
  • Node/Express để tạo điểm cuối API
  • MongoDB để lưu trữ các thành viên phòng chat và tin nhắn của họ
  • Socket.io để tạo ứng dụng thời gian thực

Tính năng cơ bản

  • Người dùng có thể đăng ký/đăng nhập bằng email và mật khẩu.
  • Trang hồ sơ nơi người dùng có thể cập nhật ảnh đại diện và tên hiển thị.
  • Tạo avatar ngẫu nhiên bằng DiceBear API
  • Người dùng có thể tạo phòng để trò chuyện với người khác.
  • Người dùng có thể xem trạng thái trực tuyến.
  • Chức năng tìm kiếm.
  • Trò chuyện theo thời gian thực.
  • Công cụ chọn biểu tượng cảm xúc cũng được tích hợp.
  • Có thể bật chế độ tối.

Bắt đầu

Để chạy dự án này cục bộ, hãy làm theo các bước sau:

  1. Sao chép kho lưu trữ.
  2. Cài đặt các phần phụ thuộc:
    • Điều hướng đến frontendthư mục và chạy npm install.
    • Điều hướng đến serverthư mục và chạy npm install.
  3. Thiết lập Firebase:
    • Truy cập Bảng điều khiển Firebase .
    • Tạo một dự án mới hoặc chọn một dự án hiện có.
    • Đi tới phần cài đặt dự án hoặc tài khoản dịch vụ.
    • Nhấp vào "Tạo khóa riêng mới" hoặc tùy chọn tương tự.
    • Lưu tệp JSON đã tải xuống dưới dạng serviceAccountKey.json.
    • Đặt serviceAccountKey.jsontập tin đã tải xuống vào server/configthư mục.
  4. Thiết lập Biến môi trường:
    • Trong frontendthư mục, tạo một tệp mới có tên .envdựa theo .env.exampletệp đó.
    • Cập nhật giá trị của các biến môi trường trong .envtệp bằng thông tin cấu hình Firebase của bạn.
    • Trong thư mục gốc, tạo một tệp mới có tên .envdựa trên .env.exampletệp đó.
    • Cập nhật giá trị của các biến môi trường trong tệp .envtheo sở thích của bạn. Ví dụ, đặt PORTbiến để chỉ định cổng mong muốn cho máy chủ và đặt MONGO_URIthành URI kết nối MongoDB của bạn.
  5. Chạy máy chủ:
    • Điều hướng đến serverthư mục và chạy npm run start.
  6. Chạy ứng dụng khách:
    • Điều hướng đến frontendthư mục và chạy npm start.
  7. Ứng dụng này có thể truy cập được tại http://localhost:3000.

Hãy đảm bảo giữ serviceAccountKey.jsonan toàn cho tệp và thông tin nhạy cảm và không chuyển chúng cho kiểm soát phiên bản.


tải tại:https://github.com/earthcomfy/lets-chat

Đăng nhận xét

Mới hơn Cũ hơn