Chat App

I already done my complete project done . but for production . there is lot of things to change . i fixed database connections and cookies settings properly.Finally deployed it to internet

Added TiDB connection. Because i ready to deploy it production . so i change local mysql to cloud TiDB mysql database

Added what can admin and super admin can do in README file . proper documentation will provide a proper certification for your work . so work hard

Added demote and promote which permissions only give to super admin . It will really usefull in production

Added admin page for admins only . showing all users overview but not their personal chats . and showing how many active and total users and groups . jus t a analytic graph for admin

Added a delete option in profile page . it seems to be dangerous option . if you done this . it cannot be undone

Added a filter system which load all users based on you searched letter . in previous version you have to compleletly type email and send request which is not give better user experience so i made it easier

Added recaptch to protect the site from bots . for this , i used google recaptcha version 3 which works based on the score . it gives score as possiblity of it is bot or human

Added About page where there is about how to use the app . it is already in readme file . but not all users will see the readme file . so i made a simple ui and defined how this app works

Removed unwanted things in the bottom navigation bar and added bouncing effecct while changing pages

In the Site . I establieshed Database setup using ORM method . but many devs familar with normal db like schema and writing query . so for their refrences i written complete schema based on the gorm modal

Added proper README file . not only technical terms . i make it like user guide to use my application . it will tell how it chat app works and give some code knowledge also . i used github copiolet to give the folder sturcture visulaization for user

While wirting the readme file i noticed that i dont added logout btn . but i made route for logout but not used in frontend .so i create a modal to logout in profile page

Added proper docker setup to run on any machine and os . i made proper containerized environment in production level

Successfully made the edit and delete proper operation in frontend . already i done the program in backend . now i currently integrated it prpoerly

Added a group management system where admins can open a manage panel straight from the group chat header, view all current members with their roles, add new members by email, promote or demote members between admin and member roles, and remove members from the group — all with proper guards so only admins can perform these actions. I used AI for fixing errors which is most of typo error

Added group chat functionality including creating, updating, deleting, and fetching groups. Implemented member management with adding users and role control. Enabled group messaging with send, edit, delete, and fetch features. Added APIs for retrieving group messages. Introduced role-based permissions within groups.

After struggling for hours , now i successfully added proper chat lock system . you can lock your favourite person chat and making more privacy for you both . i used github copiolet to solve critical bugs

Successfully added read only image once system . in the ui there will be two image upload options , normal image upload and view once image upload . it is securly done in both frontend and backend . there is some other issues find while testing view once image system . the issue is if you only send image , it says message is deleted i need to fix it and i can

Added Notification system in browser . handling it properly in frontend

Just add a common system which is messages indicator . show how many new messages you unread . i ask copiolet debug some minor which make me to work effiecently . not completely with ai but it is a critical debugging helper

Added location sharing system . i actually love this system . if your friend send his location , if you open it redirects to google map and mark your friend location . i think it is a very usefull feature

Successfully and victoriously made i emoji reaction system . you can say it is normal . but i make websokcets and message storing easyily . but the emoji reaction section make me confusable . and then i asked some help with github copiolet . not only it solve it , i made some changes . took minor parts and made it successfully

improved user experience by adding a modal instead of popup . if click anywhere from modal it will close which give better experience . and added url redirrect like whatsapp . if you send message link . user can click it will redirect to the site

Just Now added Delete and Edit message options with proper authication handling . only the message owner only delete and edit . not deleted completely . making is delete true and setting the content inside as message . you cannot edit deleted message . making all routes protected not only handling in frontend . proper error and security handling in both frontend and backend

Finally Added Proper Block system . the workflow is if you block a user , if he again give you a request . it wont show for you until you unblock him . the block logic is done quickly . while the designing the system to not to show requests who are in block system felt difficult for me . but some help with ai . i finished it properly

Added last seen and online or offline status using server’s in-memory storage . it became an better experience for me

Added image upload option . it is easy in frontend handling . while making setup n backend struggled me . i used to github copiolet debugg errors whil wirting code for image upload

Added Properly seen system . in previos system . it will only show seen if both are online . now i handle it even though one user go offline and come . it will show seen properly

I dont like the previous UI . show i try to modify and implelemented my ideaa in to the code and ask copiolet in pixel perfect . i dont that much expert in frontend . so i used to help of copiolet

Seperated Into two tabs one for friends and other requests . and writed code to delete friend in both frontend and backend . to improve user experience i add wait for 3 seconds to delete friend which prevent sudden and unfortunately deleting friends

Just added a friends Page . making proper logics for friends accept and reject requests . It give me a better knowledge in how to implement logics in code

Added socket in backend and frontend to prevent unwanted api calls . without socket . it will call apis like polling which give huge impact in server . using socket it will be prevented only one call and handshake will be made and every reqeust and response will display . and i added typing indicator

Added proper chat system basics currently it the api request is polling later i will be add websockets . currently you can select user’s email and chat to them . i will add more features later

Added Profile Page and modified backend for proper profile page . use can edit the profile image also which will be stored in server . the default profile image will be your gmail profile pic

Added bottom navigation bar . i first decided to setup a top navbar . but later i view my mobile and see whatsapp and then i decided to setup bottom navigation bar

Improved UI in login page and added 404 page not found component and loading component to imporve the user experience

Protected frontend and produced auto refresh token environment in both frontend and backend . if your not logged in but try to go to home page it will redirect to home and if your logged in and try to go to login it will not allow but you can logout and go to login page

Successfully written production ready google login backend , in frontend just mapped login not optimized i will optimize . currently after google login , it will set access and refresh token in cookies . if access token is expired it will use refresh token and create a new access token which is used in many production level site

Successfully made the initial setup of the project like creating base react app , server code and database connection to server