Chatroom /

INFO 343 project

JavaScript, React, Firebase, CSS & HTML

Autumn 2016. I used React to separate the components of my chatroom website while I used Javascript to give the website the interactivity of allowing users to chat with each other and create new chatrooms. I coded the sign up, sign in, and sign out scripts that create and store all users in a Firebase database. By keeping user information and chatroom channel information in a Firebase database, I could display messages left by users in the appropriate chatrooms by comparing message post information in both areas of the database. Users are also able to edit and delete their own messages.

Screenshots // Live website

Sign Up

Allows a user to sign up and provides error checking methods to ensure the user's input is valid.

See Full Screenshot

Sign In

Allows a previously registered user to sign back into their account, also providing error checking to ensure valid input.

See Full Screenshot

Chatroom

Users can chat with other registered users and are able to edit and delete their own posts.

See Full Screenshot

Channel List

A list of prepopulated chat channels; new ones are added as users create them by posting the first message in the new chatroom.

See Full Screenshot