- Front end chat application, which is made to streamline messaging exprerience between two users.
- First a user must create an account to be involved in messaging chatmates.
- A user can be logged in using either his/her username or email.
After #1 and #2 achieved successfully, user can start chat in the following ways
- The user can only find his/her chatmate by searching chatmate's perfectly typed username so the user must know his/her chatmate's username beforehand.
- Then according to chatmate's searchablilty setting the user might get the user 8000 or will be notified there was restrictions.
- So assuming the chatmate's preference is good to go, and result found using username, the user will be provided with Chat button to start chat. During this a pair will be created regardless of the chatmate whether approved or not evenif there was no chat message sent between pairs.
- A person can stop others from searching him/her or chatting him. this way unsolicited pairs will be hindered.
- If user deletes the whole chat with chatmate, it will be deleted on the other side too. (this will be updated with better functionalities later or you are welcome to work on it by following what is on contributions) section.
- Active and Offline statuses are with just logging in and out respectively. Other improvements are intended to be added or you are welcome to.
- Front end frameword : Here Next js is used to build interfaces, to aquire benefits from server side rendering and good user experience.
- CSS framework: TailwindCSS, utility first framework which flourished this applications in almost every stylings and micro-interactive functionalities for better user experience.
- Type safe development: TypeScript, has been the go to languange these days to make typing perfect, so I used it.
- Web socket: Socket io client is used to streamline real time communication between the server and client.
To install the packages, use the following steps
-
open your terminal in VS code( if you use so):
ctrl + backtick -
Then do
npm install- To Run the app in your dev server
npm run dev #then develpement server will start listening on port 3008, you can change it from package.json file- Search users can search other users using their username and create a pair.
- Chat with self: Chats with self or saving thoughts without being on the track of nobody else's surveilliance.
- Setting and preferences: it allows a user to
- Set theme,
- Decide on whether otehrs can search him/her or can't,
- Decide on which person can chat with him/her, for existing chatmates or new comers.
- Select specific usernames allowed to chat with him/her.
- Change basic profile information
- Change password
- Active and Online status: It allows users to see their chatmate's online status.
- Deleting, editing a message and a replying pointed to specific message.
Contributions are welcome. Your suggestions are invaulable to me. If you plan to do so, follow the following steps in two different ways.
- Fork the repository, if you want to work on it on your dedicated repository,
- Optimize per use suitability in your local machine (it is all yours after that, but I would love to see your suggestions)
- And code around limitlesslly
- Clone the repository (have the exact copy of the codebase on your local machine);
- Create an issue for your intended changes.
- Create a branch for that issue.
- Then change to the root directory while your are at it do,
git fetch --all
git checkout [your_branch_name]- Make changes on that branch.
- After you are comfortable with your new feature or suggestions (whatever), you would be benefited from
git pull origin [main_branch] - Finally push your changes
git push - Create pull request, I am there to approve.
This project is licensed under the MIT License. Feel free to play around manipulating it.
This front end application is deployed on vercel, and the
- API: is served on Render, which serves the frontend app
- Database: mongodb database is awesomely served from Mongodb Atlas, which keeps track of CRUDing attempts.
Application is Live at chat_with_chatter.