- Client-side form validation (e.g. required fields)
- Prevent the creation of a room that already exists
- Delete the messages when a room is deleted
- Include emojis in message body
- Upload images
- Multiple organizations
- Show a room's members
- Show who is logged in
- Indicate when someone is typing
- Make it mobile-friendly!
See how far you can get implementing emoji reactions.
Reflect on how much you've learned these last three weeks!
Only list public rooms, and rooms in which the current user is listed as a member.
Don't allow users to load non-public rooms of which they're not members.
Make a separate UI for direct messages.
- List them separately in the sidebar.
- Make a new form (or at least a new button that presents the same form differently).
Move the list of rooms in state to Main, and be sure that the description updates appropriately when changing rooms.
Add another authentication method (or two?). Remember, documentation is your friend.
Continue to enhance the app. Be creative!
Have a great weekend!
Add support for multiple rooms/channels! Hint: The first argument (endpoint) to base.syncState should be different for each room/channel.
Don't forget to make the sidebar links work!
Add direct messages too!
Use Firebase authentication when signing in users. Hint: Google authentication is the easiest method.
Create and style more components, based on the chat-static content. There should be approximately one CSS file per component.
- Make a
SignIncomponent with a form that takes a user name. - When the form is submitted, save that user in the
stateof theAppcomponent. - When
state.useris not set, show theSignIncomponent. - When
state.useris set, show theMaincomponent.
Hint: You need to figure out how to do conditional rendering.