- Notifications
You must be signed in to change notification settings - Fork4
Real-Time MERN Chat App, developed by Vaibhaw Mishra
License
NotificationsYou must be signed in to change notification settings
itsvaibhavmishra/TwinkConnect
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Important
Please leave a ⭐ if you like this project.
A Real-Time web-based MERN Chat App by Vaibhaw Mishra.{ Development in Progress }
Live At:Netlify | TwinkConnect
Tip
- Real-time one-to-one chat- reCAPTCHA support- Robust authentication system with dynamic flow- OTP based verification and password reset functionality- 3 Social logins methods (Google, GitHub & LinkedIn)- Disposable email check- Highly responsive UI- Dark/Light theme support- 6 different color presets- Custom movable sidebar for theme settings- Profile section with image cropper & drag-n-drop support- Search friends with infinite scrolling- Emoji support- Real-time online status- Real-time typing... message- Dynamic friends contact menuBackend:
- Added security options (Rate Limit, XSS Protection, Sanitization, URL Encoding & more)- Dynamic server & routes error handling- Dedicted folder structure- JWT Middlewares for both APIs & Socket based requests- Cloudinary file upload system with auto folder structuring- Access & Refresh token with cookies support- Structured DB with pre save & validations- And much moreFrontend:
- Custom axios setup for easier API calling- Custom error interceptors for axios error handlings- Redux toolkit with persist- Custom hooks- Auto refresh tokens & auto token verification- Google Ananlytics support- Dynamic routing with lazy loading- Custom loader- Customized theme with dedicated folder structuring- React Hook Form with Yup form validations- Custom utils folder- And much moreFrom root directory, move to the backend using command
$cd backend/Install dependencies for server
$ npm install
Setup .env using.env copy file
$ locatedin backend/Start the backend using nodemon
$ npm start
From root directory, move to the frontend using command
$cd frontend/Install dependencies for frontend
$ npm install -f
Setup .env using.env copy file
$ locatedin frontend/Runs frontend on localhost(React App)
$ npm start
Creates an optimized production build
$ npm run build
Main Structure
├──backend/│ ├── ...├──frontend/│ ├── ...├── .gitignore├── LICENSE├── Readme.mdBackend
├── backend/│ ├── src/│ │ ├── controllers/│ │ │ ├── authController.js│ │ │ ├── conversationController.js│ │ │ ├── friendsController.js│ │ │ ├── messageController.js│ │ │ ├── socialController.js│ │ │ ├── userController.js│ │ ├── middlewares/│ │ │ ├── authMiddleware.js│ │ │ ├── socketMiddleware.js│ │ ├── models/│ │ │ ├── conversationModel.js│ │ │ ├── friendRequestModel.js│ │ │ ├── index.js│ │ │ ├── messageModel.js│ │ │ ├── userModel.js│ │ ├── routes/│ │ │ ├── authRouter.js│ │ │ ├── conversationRouter.js│ │ │ ├── friendsRouter.js│ │ │ ├── index.js│ │ │ ├── messageRouter.js│ │ │ ├── userRouter.js│ │ ├── services/│ │ │ ├── authService.js│ │ │ ├── conversationService.js│ │ │ ├── fileUploadService.js│ │ │ ├── friendsService.js│ │ │ ├── mailer.js│ │ │ ├── messageService.js│ │ │ ├── socialAuthService.js│ │ │ ├── tokenService.js│ │ │ ├── userService.js│ │ ├── Templates/│ │ │ ├── Mail/│ │ │ │ ├── otp.js│ │ │ │ ├── reset.js│ │ ├── utils/│ │ │ ├── checkDispose.js│ │ │ ├── filterObj.js│ │ │ ├── generatePassword.js│ │ │ ├── tokenGenerator.js│ ├── .env copy│ ├── app.js│ ├── package-lock.json│ ├── package.json│ ├── server.js│ ├── socket.js│ ├── vercel.jsonFrontend
├── frontend/│ ├── public/│ │ ├── favicon.ico│ │ ├── index.html│ │ ├── logo.ico│ │ ├── manifest.json│ │ ├── robots.txt│ │ ├── sitemap.xml│ │ ├── _redirects│ ├── src/│ │ ├── assets/│ │ │ ├── backgrounds/│ │ │ │ ├── catDoodle.png│ │ │ │ ├── catDoodle2.png│ │ │ │ ├── catDoodle3.png│ │ │ ├── icons/│ │ │ │ ├── flags/│ │ │ │ │ ├── flag_am.svg│ │ │ │ │ ├── flag_en.png│ │ │ │ │ ├── flag_en.svg│ │ │ │ │ ├── flag_fr.png│ │ │ │ │ ├── flag_fr.svg│ │ │ │ │ ├── flag_hi.png│ │ │ │ │ ├── flag_hi.svg│ │ │ │ │ ├── flag_ja.svg│ │ │ │ │ ├── flag_vn.svg│ │ │ │ ├── logo/│ │ │ │ │ ├── TwinkConnect-old.png│ │ │ │ │ ├── TwinkConnect.png│ │ │ │ │ ├── TwinkConnectSub.png│ │ │ │ │ ├── VaibhawMishra.ico│ │ │ ├── Illustration/│ │ │ │ ├── Animations/│ │ │ │ │ ├── Cat404.json│ │ │ │ │ ├── CatAnimation1.json│ │ │ │ │ ├── CatAnimation2.json│ │ │ │ │ ├── CatAnimation3.json│ │ │ │ │ ├── CatAnimation4.json│ │ │ │ │ ├── CatAnimation5.json│ │ │ │ │ ├── ChillingVibes.json│ │ │ │ │ ├── HangingBuddy.json│ │ │ │ │ ├── NoResultsFound.json│ │ │ │ │ ├── SearchNotFound.json│ │ │ │ ├── NoChat.js│ │ ├── components/│ │ │ ├── animate/│ │ │ │ ├── varients/│ │ │ │ │ ├── actions.js│ │ │ │ │ ├── background.js│ │ │ │ │ ├── bounce.js│ │ │ │ │ ├── container.js│ │ │ │ │ ├── fade.js│ │ │ │ │ ├── flip.js│ │ │ │ │ ├── index.js│ │ │ │ │ ├── path.js│ │ │ │ │ ├── rotate.js│ │ │ │ │ ├── scale.js│ │ │ │ │ ├── slide.js│ │ │ │ │ ├── transition.js│ │ │ │ │ ├── zoom.js│ │ │ │ ├── DialogAnimate.js│ │ │ │ ├── FabButtonAnimate.js│ │ │ │ ├── features.js│ │ │ │ ├── IconButtonAnimate.js│ │ │ │ ├── index.js│ │ │ │ ├── MotionContainer.js│ │ │ │ ├── MotionLazyContainer.js│ │ │ │ ├── MotionViewport.js│ │ │ │ ├── TextAnimate.js│ │ │ ├── hook-form/│ │ │ │ ├── FormProvider.js│ │ │ │ ├── index.js│ │ │ │ ├── RHFOtp.js│ │ │ │ ├── RHFTextField.js│ │ │ │ ├── RHFUpload.js│ │ │ ├── Image/│ │ │ │ ├── getRatio.js│ │ │ │ ├── Image.js│ │ │ │ ├── index.js│ │ │ ├── PageComponents/│ │ │ │ ├── ContactPage/│ │ │ │ │ ├── FriendsComponents/│ │ │ │ │ │ ├── FriendsSubComps/│ │ │ │ │ │ │ ├── index.js│ │ │ │ │ │ │ ├── UserCard.js│ │ │ │ │ │ │ ├── UsersSearchResults.js│ │ │ │ │ │ ├── FriendRequests.js│ │ │ │ │ │ ├── index.js│ │ │ │ │ │ ├── SearchUsers.js│ │ │ │ │ │ ├── SentRequests.js│ │ │ │ │ ├── ContactList.js│ │ │ │ │ ├── FriendsMenu.js│ │ │ │ │ ├── index.js│ │ │ │ ├── GeneralAppPage/│ │ │ │ │ ├── ChatElements/│ │ │ │ │ │ ├── AllChatElement.js│ │ │ │ │ │ ├── ChatSearchResults.js│ │ │ │ │ │ ├── OnlineChatElement.js│ │ │ │ │ ├── ConversationElements/│ │ │ │ │ │ ├── ConvoSubElements/│ │ │ │ │ │ │ ├── ChatInput.js│ │ │ │ │ │ │ ├── MessageContainer.js│ │ │ │ │ │ ├── ConversationFooter.js│ │ │ │ │ │ ├── ConversationHeader.js│ │ │ │ │ │ ├── ConversationMain.js│ │ │ │ │ │ ├── index.js│ │ │ │ │ ├── ChatsList.js│ │ │ │ │ ├── Conversation.js│ │ │ │ │ ├── index.js│ │ │ │ ├── OnlineFriendsElement/│ │ │ │ │ ├── OnlineFriendsElement.js│ │ │ │ ├── ProfilePage/│ │ │ │ │ ├── ProfilePage.js│ │ │ │ ├── UserProfileDrawer/│ │ │ │ │ ├── UserDrawerComps/│ │ │ │ │ │ ├── UDMainComps/│ │ │ │ │ │ │ ├── RemoveFriendDialog.js│ │ │ │ │ │ ├── index.js│ │ │ │ │ │ ├── UserDrawerHeader.js│ │ │ │ │ │ ├── UserDrawerMain.js│ │ │ │ │ ├── UserProfileDrawer.js│ │ │ ├── Search/│ │ │ │ ├── index.js│ │ │ │ ├── Search.js│ │ │ │ ├── SearchIconWrapper.js│ │ │ │ ├── StyledInputBase.js│ │ │ ├── settings/│ │ │ │ ├── drawer/│ │ │ │ │ ├── BoxMask.js│ │ │ │ │ ├── Developer.js│ │ │ │ │ ├── index.js│ │ │ │ │ ├── SettingColorPresets.js│ │ │ │ │ ├── SettingContrast.js│ │ │ │ │ ├── SettingDirection.js│ │ │ │ │ ├── SettingFullscreen.js│ │ │ │ │ ├── SettingLayout.js│ │ │ │ │ ├── SettingMode.js│ │ │ │ │ ├── SettingStretch.js│ │ │ │ │ ├── ToggleButton.js│ │ │ │ ├── index.js│ │ │ │ ├── ThemeColorPresets.js│ │ │ │ ├── ThemeContrast.js│ │ │ │ ├── ThemeLocalization.js│ │ │ │ ├── ThemeRtlLayout.js│ │ │ ├── upload/│ │ │ │ ├── preview/│ │ │ │ │ ├── AvatarCropper.js│ │ │ │ │ ├── AvatarPreview.js│ │ │ │ │ ├── cropImage.js│ │ │ │ ├── index.js│ │ │ │ ├── UploadAvatar.js│ │ │ ├── AntSwitch.js│ │ │ ├── Iconify.js│ │ │ ├── LoadingScreen.js│ │ │ ├── NoData.js│ │ │ ├── StyledBadge.js│ │ │ ├── ThemeSwitch.js│ │ ├── contexts/│ │ │ ├── SettingsContext.js│ │ ├── data/│ │ │ ├── index.js│ │ ├── hooks/│ │ │ ├── useLocales.js│ │ │ ├── useLocalStorage.js│ │ │ ├── useResponsive.js│ │ │ ├── useSettings.js│ │ ├── layouts/│ │ │ ├── auth/│ │ │ │ ├── index.js│ │ │ ├── dashboard/│ │ │ │ ├── index.js│ │ │ │ ├── Sidebar.js│ │ │ ├── docs/│ │ │ │ ├── index.js│ │ ├── pages/│ │ │ ├── auth/│ │ │ │ ├── ForgotPassword.js│ │ │ │ ├── Login.js│ │ │ │ ├── Register.js│ │ │ │ ├── ResetPassword.js│ │ │ │ ├── Verify.js│ │ │ │ ├── WelcomePage.js│ │ │ ├── dashboard/│ │ │ │ ├── Contact.js│ │ │ │ ├── GeneralApp.js│ │ │ │ ├── GroupChat.js│ │ │ │ ├── Profile.js│ │ │ │ ├── Settings.js│ │ │ ├── docs/│ │ │ │ ├── TnC.js│ │ │ ├── 404.js│ │ ├── redux/│ │ │ ├── slices/│ │ │ │ ├── actions/│ │ │ │ │ ├── authActions.js│ │ │ │ │ ├── chatActions.js│ │ │ │ │ ├── contactActions.js│ │ │ │ │ ├── userActions.js│ │ │ │ ├── authSlice.js│ │ │ │ ├── chatSlice.js│ │ │ │ ├── contactSlice.js│ │ │ │ ├── index.js│ │ │ │ ├── userSlice.js│ │ │ ├── rootReducer.js│ │ │ ├── store.js│ │ ├── routes/│ │ │ ├── index.js│ │ │ ├── paths.js│ │ ├── sections/│ │ │ ├── auth/│ │ │ │ ├── AuthSocial.js│ │ │ │ ├── ForgotPasswordForm.js│ │ │ │ ├── LoginForm.js│ │ │ │ ├── RegisterForm.js│ │ │ │ ├── ResetPasswordForm.js│ │ │ │ ├── VerifyForm.js│ │ │ ├── settings/│ │ │ │ ├── ProfileForm.js│ │ │ │ ├── Shortcuts.js│ │ │ │ ├── ThemeDialog.js│ │ ├── theme/│ │ │ ├── overrides/│ │ │ │ ├── Accordion.js│ │ │ │ ├── Alert.js│ │ │ │ ├── Autocomplete.js│ │ │ │ ├── Avatar.js│ │ │ │ ├── Backdrop.js│ │ │ │ ├── Badge.js│ │ │ │ ├── Breadcrumbs.js│ │ │ │ ├── Button.js│ │ │ │ ├── ButtonGroup.js│ │ │ │ ├── Card.js│ │ │ │ ├── Checkbox.js│ │ │ │ ├── Chip.js│ │ │ │ ├── ControlLabel.js│ │ │ │ ├── CssBaseline.js│ │ │ │ ├── CustomIcons.js│ │ │ │ ├── DataGrid.js│ │ │ │ ├── Dialog.js│ │ │ │ ├── Drawer.js│ │ │ │ ├── Fab.js│ │ │ │ ├── index.js│ │ │ │ ├── Input.js│ │ │ │ ├── Link.js│ │ │ │ ├── List.js│ │ │ │ ├── LoadingButton.js│ │ │ │ ├── Menu.js│ │ │ │ ├── Pagination.js│ │ │ │ ├── Paper.js│ │ │ │ ├── Popover.js│ │ │ │ ├── Progress.js│ │ │ │ ├── Radio.js│ │ │ │ ├── Rating.js│ │ │ │ ├── Select.js│ │ │ │ ├── Skeleton.js│ │ │ │ ├── Slider.js│ │ │ │ ├── Stepper.js│ │ │ │ ├── SvgIcon.js│ │ │ │ ├── Switch.js│ │ │ │ ├── Table.js│ │ │ │ ├── Tabs.js│ │ │ │ ├── Timeline.js│ │ │ │ ├── ToggleButton.js│ │ │ │ ├── Tooltip.js│ │ │ │ ├── TreeView.js│ │ │ │ ├── Typography.js│ │ │ ├── breakpoints.js│ │ │ ├── index.js│ │ │ ├── palette.js│ │ │ ├── shadows.js│ │ │ ├── typography.js│ │ ├── utils/│ │ │ ├── axios.js│ │ │ ├── axiosInterceptors.js│ │ │ ├── createAvatar.js│ │ │ ├── cssStyles.js│ │ │ ├── flattenArray.js│ │ │ ├── formatNumber.js│ │ │ ├── formatTime.js│ │ │ ├── getColorName.js│ │ │ ├── getColorPresets.js│ │ │ ├── getFileData.js│ │ │ ├── getFontValue.js│ │ │ ├── getOtherUser.js│ │ │ ├── helmetHandler.js│ │ │ ├── jwt.js│ │ │ ├── scrollToBottom.js│ │ │ ├── socialLoginHelpers.js│ │ │ ├── socket.js│ │ │ ├── timeFormatter.js│ │ │ ├── truncateText.js│ │ │ ├── uuidv4.js│ │ ├── App.js│ │ ├── config.js│ │ ├── index.css│ │ ├── index.js│ ├── .env copy│ ├── package-lock.json│ ├── package.json│ ├── README.mdAbout
Real-Time MERN Chat App, developed by Vaibhaw Mishra
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
No releases published
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.