This is a realtime chat application with React frontend & Express backend. The project makes use of Socket.io for bidirectional communication!
Server
A chat app server written in Javascript!
Source: github
The server runs in node.js using Express to setup a server to listen to requests to API endpoints and /resetpassword route. It uses socket.io to setup realtime communication for chat messaging.
Server Features
- Sets up middleware for Rate Limiting & Body Parser (used for JSON).
- Connects to the MongoDB using Mongoose for CRUD operations.
- Express server to serve API endpoints &
/resetpasswordwebpage - Connects socket.io to Express server to enable realtime bidirectional communication for chat messaging functionality.
API Endpoints
/login: For login of users./register: To register new users./forgotpassword: To send a reset mail to the registered email address of the user./resetpassword: To handle reset password functionality.
RESET POST Request
The /resetpassword POST Request is handled by sending the /resetpassword/index.html webpage back to the user, where they can enter relevant details to reset the password.
Mailing Feature
A mail is triggered to the user with the nodemailer package, you will need to setup your existing email Id for this. Or you can create a new one. You have to create a ‘app password’ (Gmail/Yahoo/etc.. each have their own way of generating app passwords, please consult the relevant documentation as per your requirements) and use it to send mails!
Client
A chat app client written in React!
Source: github
This Chat Client has the following functionality:
- Register a new user.
- Login an existing user.
- Forgot Password functionality.
- Once logged in, User can retrieve chat history and chat with connected users.
Registering a new user
A new user has to enter their details (name, email, password). The details will be sent to the /register API endpoint and the server tries to register the new user. If there are errors, server responds with the specific errors. If not, the user will be registered in the DB and success notification is sent back.
Login an existing user
User enters their details (email & password). The details will be sent to the /login API endpoint and the server tries to login the user. If there are errors, server responds with the specific errors. If not, the user will be logged in, session created, and success notification is sent back along with chat history.
Forgot Password
User enters their details (email). The details will be sent to the /forgotpassword API endpoint and the server tries to send mail with reset details to the user. If there are errors, server responds with the specific errors. If not, the user will be sent an email with the reset token (a cryptographically secure random number), and success notification is sent back.
Reset Password
The email sent will have a reset link where the user enters their details (email, reset token, new password). The details will be sent to the /resetpassword API endpoint and the server tries to reset the user. If there are errors, server responds with the specific errors. If not, the user will be reset, the reset token destroyed, new password updated in DB and then success notification is sent back.
Chatting
User can read the chat history upon login. They can send & receive messages in realtime with whoever is connected to the server!
Note: I’ve added elements to the application to experiment with the new trend of neumorphism, you can disable it by modifying the drop-shadow property for the relevant elements in the DOM!
Have fun with the code!
Testing (Jest & React Testing Library)
This project has a code coverage of 100% with functional as well as unit tests written with care.
