Chat App

 

Objective

The objective of this website/project is to provide a platform to all who can just visit and log in to our website and they can create their own chat room where they can talk to their friend anywhere from the world, share their location. We have user-specified Dashboard where the user can check their account details, update their details, set/upload their own profile picture, they can also remove their profile picture and delete their account. We have an additional feature of listing music from Spotify.

Contents

• Main Goal – The main goal is to present a chat room website where people can create their own chat rooms where they can chat with their friend.

• Welcome Page – This is the welcome page, it welcomes the user and provides two option to signup or to login.

• Signup/Login Page – This is the signup page where a user can create an account on our website.

• Login Page – This is the login page after the user signup’s the user can log in here.

• Dashboard Page – This is the page where the user gets access after he/she logins. This page gives access to user data i.e “My Account”, then “Create Chat Room” option to make a chat room or join one, “Logout” option to logout of the website and “Listen To Music” option to listen to music on Spotify.

• My Account Page – This is the page where the user gets access to his or her account details. Here the user can update their data, upload profile picture, remove profile picture, delete account option and a go back to dashboard option.

• Profile Picture Upload Page – This is the page where the user gets to upload a profile picture for their account.

• Delete Account Page – This is the page where the user gets a confirmation message if they want to delete their page or not.

• Joining/Creating Username/Making Personal Chat Room – This is the page where we give access to the user after they login to our website. Here they can choose their username and choose their chatroom name.
• Chat Room Page – This page is where they can chat with other people in the same chat room. They can send texts, emojis and location.

Chat Room Features

• Creating Personal chat room, where other people can join anywhere from the world by just signup/login in our website and just entering the chat room name and pin. (Pin function to be added later)
• The chat will have many features like sending texts, emojis and their current location in the chat room.

NPM Packages Used –

• @sendgrid/mail – It’s Mail Service npm for the SendGrid v3 Web Email API. We used it to send signup emails and account deletion emails to the users. You can find it out here – @sendgrid/mail.
• bad-words – It is a javascript filter for bad words. It’s an npm module that you can find it out here at bad-words. We have used this to add as a profanity filter in our chat room, to save our users from abuses/hatred of any sort inside the chat room.
• bcryptjs – We are using bcrypt.js module to hash password of the user. It’s an npm module that you can find it out here at bcryptjs.
• connect-flash – It is used for the flash messages, you can look for more details here connect-flash.
• ejs – It is the Embedded JavaScript templates. This is the view engine we used in our project. You can find more details here ejs.
• express – It’s the web framework for Node.js that we used to structure our web application. You can find more details here express.
• express-ejs-layouts – It’s the layout support for ejs in express. You can find more details here express-ejs-layouts.
• express-session – It’s for the storage of the cookies. Session data is not saved in the cookie itself, just the session ID. Session data is stored server-side.  For more details check here express-session
• mongoose – We used Mongoose because it provides a schema-based solution to model our application data with MongoDB. Which has many features to use example – validation of user’s data. For more details check here mongoose.
• multer – We used Multer for handling the image upload we provided in our web-application. Multer is a node. js middleware which is used for handling multipart/form-data , which is primarily used for uploading files. For more details check here multer.
• passport – We have used Passport for authentication as it is one of the best authentication middleware available for Node.js. For more details check here passport.
• passport-local – We used Passport-local for authenticating user data for login, Passport strategy authenticates with a username and password here we are using the email and password to authenticate the user. For more details check here passport-local.
• sharp – We used sharp to resize the image uploaded by the user, as it is one of the high-speed Node.js module to convert large images in common formats to smaller, web-friendly JPEG, PNG and WebP images of varying dimensions. For more details check here sharp.
• socket.io – We used Socket.IO as it enables real-time bidirectional event-based communication. For more details check here socket.io.
• validator – We used validator to validate user data for example – user’s entered email address. For more details check here validator.

DEMO :