- Notifications
You must be signed in to change notification settings - Fork2
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.md