Skip to content

Latest commit

 

History

History
171 lines (138 loc) · 5.64 KB

README.md

File metadata and controls

171 lines (138 loc) · 5.64 KB
Raw

Web Chatroom

This is "2024 Spring CS241002 Software Studio" course project at National Tsing Hua University (NTHU).

Scoring

Basic Components Score Check
Membership Mechanism 15% Y
Firebase Page 5% Y
Database Read/Write 15% Y
Responsive Design (RWD) 15% Y
Chatroom 20% Y
Advanced Tools Score Check
Using React 10% Y
Third-Party Sign-In 1% Y
Notifications 5% Y
CSS Animation 2% Y
Security 2% Y
Other Useful Functions Score Check
Unsend Message 3% Y
Search Message 3% Y

How to Set Up Your Project

  1. npx create-react-app <chatroom-app>
  2. npm run build
  3. npm start

How to Use

Login

  • For registered users, enter your Email and Password, then click Login.
  • For unregistered users, click Sign up.

Sign-Up

  • For new users, enter a Nickname, Email, and Password, then click Sign Up. You will be directed to the chatroom.
  • To sign up using Google, click Continue with Google, and you will be taken to the chatroom.

Chatroom

  • Left Side: Group List
    • A Sign Out button is located at the top to log out.
    • The default group is Public.
    • Click New Group to create a new group by entering the group name in the pop-up.
  • Right Side: Chatroom
    • Click Add Member to add members by entering their email. If successful, a message saying "Member added successfully" will appear; otherwise, "Member not found" will be shown. The added member will appear in the group after refreshing the page.
    • The current chatroom name is displayed.
    • Messages corresponding to the chatroom are shown.
    • There is a message input field at the bottom where you can type and send messages by clicking Send.

Function Description

Responsive Design (RWD)

  • The layout maintains a 1:3 ratio for Group:Chatroom based on window width.
  • If the width is less than 768px, the layout changes to a vertical stack with Group on top and Chatroom below.

Chrome Notification

When a new message is received, a request to enable notifications will appear for the first time (Request Permission). If accepted, notifications will be enabled from then on.

CSS Animation

  • The Login and Sign-Up pages have fade-in and fade-out effects.
  • Hovering over buttons (except send) will trigger a slight zoom-in effect (1.05x).

Security

Scripts like <script>alert("example");</script> and HTML elements like <h1>example</h1> are safely handled.

Unsend Message

  • Double-click on your own message to prompt a confirmation box to unsend it.
  • Double-clicking on someone else's message will show "You can only unsend your message."
  • Once unsent, the change is reflected immediately (no need to refresh the page).

Search Message

  • Enter the message you want to search for (e.g., searchMessage) in the search box. It will filter the current chatroom and display only messages containing searchMessage.

Firebase Page Link

Others (Optional)

Files Hierarchy

chatroom-app/
│
├── public/
│   ├── index.html
│   └── ...
│
├── src/
│   ├── components/
│   │   ├── ChatRoom.css
│   │   ├── ChatRoom.js
│   │   ├── ChatInput.css
│   │   ├── ChatInput.js
│   │   ├── Groups.css
│   │   └── Groups.js
│   │
│   ├── context/
│   │   └── AuthContext.js
│   │
│   ├── pages/
│   │   ├── Home.css
│   │   ├── Home.js
│   │   ├── Login.css
│   │   ├── Login.js
│   │   ├── SignUp.css
│   │   └── SignUp.js
│   │
│   ├── App.css
│   ├── App.js
│   ├── firebase.js
│   ├── index.js
│   └── index.css
│
└── package.json

Firebase Realtime Database Hierarchy

chatroom-app/
│
├── chatroom/
│   ├── Public/
│   │   └── msgList: []
│   │
│   ├── groupId/
│   │   ├── groupName: ""
│   │   ├── msgList: []
│   │   └── users: []
│   │
│   ├── groupId/
│   │   ├── groupName: ""
│   │   ├── msgList: []
│   │   └── users: []
│   │
│   └── ...
│
├── users/
│   ├── uid/
│   │   └── groups: ["Public", groupId...]
│   │
│   └── ...
│
└── ...