Technologies: JavaScript, MongoDB, Express, React, Node, Nunjucks
Skills & Methodologies: Fullstack Web Development
GitHub Repository
A chat app created using MongoDB, Express, React, and Node. Since this was part of a course I am unable to provide the source code. However, I have provided a dtailed explanation of how the app works below. The "GitHub Repository" button above will take you to the app which is deployed on Heroku. When a user first navigates to the app they find themselves at the landing page with an HTML form in which they can type their username and password. After supplying this information the user can then either click the "Register" button is they are a new user or the "Login" button if they are a returning user. In the case of registration a POST request containing the supplied username and password is sent to /register. If the registration is successful the password will be hashed and salted and a new User entry will be created in the MongoDB database. The user will be redirected to /chatroom. In the case of logging-in a POST request is sent to /authenticate which checks if the username and (hashed/salted) password match an entry stored in the database. If they do the user is redirected to /chatroom. In either case if the action fails an error screen is displayed with information about the error. After entering the chatroom the user is connected to the server via socket.io. This triggers the "connect" event on the front-end which emits a "welcomeMessage" to the server which subsequently emits the "welcomeMessage" back out to all users. When a user disconnects from the server-side this triggers a "disconnect" event which emits a "diconnectMessage" back out to all users. When a client receives a "welcomeMessage" a new message (in green) is appended alerting them of joined user. When a client receives a "disconnectMessage" a new message (in red) is appended alerting them of the player who left. An object mapping user IDs to usernames is kept on the server-side and is updated whenever a client joins or leaves. This is used to display who is online. Finally, when a user sends a message the "submit" event is triggered which emits a "message" to the server which then emits the "message" back out to all connected clients. When a client receives a "message" event the sender's username and the message's content are inserted into the document as textNodes.