The structure & dependencies of the PWA application!
Directory Structure#
Here is the complete structure of the application (PWA version):
- Detailed structure diagram
├── backends│ ├── messages-and-pictures # backend for messages & pictures│ │ └── node_modules│ │ └── images│ │ └── src│ │ │ ├── controller│ │ │ │ └── file.controller.js│ │ │ ├── middleware│ │ │ │ └── upload.js│ │ │ └── routes│ │ │ └── index.js│ │ ├── .env│ │ ├── .gitignore│ │ ├── package.json│ │ ├── README.md│ │ ├── server.js│ │ └── utils.js│ ││ └── video-chat # backend for video chat (not present in the free version)│ ├── node_modules│ ├── .env│ ├── .gitignore│ ├── package.json│ ├── README.md│ └── server.js│ ├── node_modules│ ├── public│ ├── locales # folder for translation (i18next-http-backend)│ │ ├── fr│ │ │ └── translation.json│ │ ├── en│ │ │ └── translation.json│ │ └── pt│ │ └── translation.json│ ││ ├── favicon.ico│ ├── index.html│ ├── logo192.png│ ├── logo512.png│ ├── manifest.json│ └── robots.txt├── src│ ├── adminDashboard # All content of this folder are not present in the free version│ │ ├── components│ │ │ ├── Analytics.js│ │ │ ├── Dashboard.js│ │ │ ├── Favorites.js│ │ │ ├── HeaderAdmin.js│ │ │ ├── Messages.js│ │ │ ├── OtherList.js│ │ │ ├── Product.js│ │ │ ├── Setting.js│ │ │ ├── Sidebar.js│ │ │ ├── Stock.js│ │ │ ├── Team.js│ │ │ └── TotalOrder.js│ │ ││ │ ├── constants│ │ │ └── DataProduct.js│ │ ├── hooks│ │ │ └── useAdmin.js│ │ ├── images│ │ │ └── #All the images needed for the dashboard's admin│ │ ││ │ ├── adminPanel.css│ │ ├── AdminPanel.js│ │ ├── adminPanel2.css│ │ ├── AdminPanel2.js│ │ └── common-css.css│ ││ ├── baseLayout│ │ ├── shared│ │ │ ├── alertComponent│ │ │ │ ├── checkboxAlert│ │ │ │ │ ├── activateDeleteConvAtom.js│ │ │ │ │ └── checkbox-alert.css│ │ │ │ ││ │ │ │ └──customAlert # reusable custom Alert component│ │ │ │ ├── alert.css│ │ │ │ ├── Alert.js│ │ │ │ └── clickedAlertAtom.js│ │ │ ││ │ │ ├── headerApp│ │ │ │ ├── headerApp.css│ │ │ │ └── HeaderApp.js│ │ │ ││ │ │ ├── menuComponents│ │ │ │ ├── bottomMenu│ │ │ │ │ ├── bottomMenu.css│ │ │ │ │ └── BottomMenu.js│ │ │ │ ││ │ │ │ └── radialMenu│ │ │ │ ├── img│ │ │ │ ├── radialMenu.css│ │ │ │ └── RadialMenu.js│ │ │ ││ │ │ └── offlineMessage│ │ │ ├── offlineMessage.css│ │ │ └── OfflineMessage.js│ │ ││ │ ├── BaseLayout.js│ │ └── baseLayoutApp.css│ ││ ├── chatComponents # All folders, files, custom hooks, states managment & components for chat app│ │ ├── assets│ │ │ ├── sounds # All sounds for notification on chat app│ │ │ │ └── # All sounds are here│ │ │ └──# All pictures are here│ │ ││ │ ├── components # Components for chat│ │ │ ├── bottomDrawer│ │ │ │ ├── bottomDrawer.css│ │ │ │ └── BottomDrawer.js # Drawer that appears when you click on the home page button│ │ │ ││ │ │ ├── chatRoom│ │ │ │ ├── ChatRoom│ │ │ │ │ ├── components│ │ │ │ │ │ ├── BottomChatComponent.js│ │ │ │ │ │ ├── EmptyChatMessage.js # Empty message when the messages list is empty│ │ │ │ │ │ ├── HeaderChatComponent.js│ │ │ │ │ │ └── MessagesComponent.js│ │ │ │ │ ││ │ │ │ │ ├── ChatRoom.css│ │ │ │ │ └── ChatRoom.js # ChatRoom component│ │ │ │ ││ │ │ │ └── HomeChat│ │ │ │ ├── HomeChat.css│ │ │ │ └── HomeChat.js│ │ │ ││ │ │ ├── join│ │ │ │ ├── Join.css│ │ │ │ └── Join.js # This component is not used in the free version, it's by default component! For the pwa version this is login page│ │ │ ││ │ │ ├── loader│ │ │ │ ├── loader.css│ │ │ │ └── Loader.js #Loader component│ │ │ ││ │ │ ├── parameters│ │ │ │ ├── parameters.css│ │ │ │ └── Parameters.js # Setting panel component│ │ │ ││ │ │ ├── resetModal│ │ │ │ ├── ResetModal.css│ │ │ │ └── ResetModal.js # modal when you click to reset preferences in setting panel│ │ │ ││ │ │ ├── speech-recognition│ │ │ │ ├── speechToText.css│ │ │ │ └── SpeechToText.js # Speech to text component integrated to the bottom chat tools│ │ │ ││ │ │ ├── suppressConversationModal│ │ │ │ ├── suppressConversationModal.css│ │ │ │ └── SuppressConversationModal.js # modal when you click to delete all conversations in setting panel│ │ │ ││ │ │ ├── videoChatComponent # functionality not present in the free version│ │ │ │ ├── videoChatComponent.css│ │ │ │ └── VideoChatComponent.js # video chat component│ │ │ ││ │ │ ├── weatherComponent│ │ │ │ ├── weather.css│ │ │ │ └── weatherComponent.js # optional weather component│ │ │ ││ │ │ ├── ButtonChat.js # Button on the home page to access the chat│ │ │ └── ImageUploadComponent.js # component for uploading picture│ │ ││ │ ├──constants│ │ │ └── constant.js # all constants for the ChatBot intelligency│ │ ││ │ ├── hooks│ │ │ ├── useAxios.js # reusable custom hook for axios request (with params) (not present in the free version)│ │ │ ├── useChat.js # custom hook for chat functionalities│ │ │ ├── useChatBot.js # custom hook for chatbot functionalities│ │ │ ├── useFetch.js # reusable custom hook for fetch data ( if you dont want use axios, this custom hook is here for that)│ │ │ ├── useGetUserInfos.js # custom hook for taking user infos│ │ │ ├── useMobile.js # reusable custom hook for detecting if is mobile or not│ │ │ ├── useParams.js # custom hook for setting panel functionalities│ │ │ ├── useSpeechToText.js # custom hook for transcription from speech to txt in chat message│ │ │ └── useVideoChat.js # custom hook for video chat functionalities (not present in the free version)│ │ ││ │ ├── services│ │ │ ├── fetchWeather.js # this component fetch openweather api for weather functionalities│ │ │ └── FileUploadService.js # this file make link from font to backend│ │ ││ │ ├── stateManager│ │ │ ├── atoms # here are all atoms for states managment for all chat app│ │ │ │ ├── callEndedAtom.js│ │ │ │ ├── clickedGuestAtom.js│ │ │ │ ├── clickedOffChatAtom.js│ │ │ │ ├── clickedParamsAtom.js│ │ │ │ ├── clickedSoundGuitarAtom.js│ │ │ │ ├── clickedSoundSoftwareAtom.js│ │ │ │ ├── clickedUserAtom.js│ │ │ │ ├── dangerZoneAtom.js│ │ │ │ ├── exampleClicked.js│ │ │ │ ├── exampleFrAtom.js│ │ │ │ ├── exampleUsAtom.js│ │ │ │ ├── fileFromPictureAtom.js│ │ │ │ ├── imageInfoAtom.js│ │ │ │ ├── infoPictureFromListAtom.js│ │ │ │ ├── isAdminAtom.js│ │ │ │ ├── isLanguageAtom.js│ │ │ │ ├── isListeningAtom.js│ │ │ │ ├── isOnlineAtom.js│ │ │ │ ├── isSoundNotifications.js│ │ │ │ ├── messageForBotAtom.js│ │ │ │ ├── messagesAtom.js│ │ │ │ ├── openVideoChatAtom.js│ │ │ │ ├── passwordAtom.js│ │ │ │ ├── pictComment.js│ │ │ │ ├── plusSectionAtom.js│ │ │ │ ├── receiveMediasMessageToUserAtom.js│ │ │ │ ├── registeruserAtom.js│ │ │ │ ├── roomIdAtom.js│ │ │ │ ├── seeMediaAtom.js│ │ │ │ ├── selectedDarkThemeAtom.js│ │ │ │ ├── selectedLightThemeAtom.js│ │ │ │ ├── selectedneumorphismThemeAtom.js│ │ │ │ ├── selectedSoundAtom.js│ │ │ │ ├── speechToTextAtom.js│ │ │ │ ├── usernameAtom.js│ │ │ │ ├── validateUsernameAtom.js│ │ │ │ └── weatherAtom.js│ │ │ ││ │ │ └── selectors # here are on example file for knowing how to use Recoil selectors easy and fast│ │ │ └── exampleSelector.js│ │ ││ │ └── http-common.js # # this is axios methode for uploading picture to backend│ ││ ├── components │ │ ├── drops│ │ │ ├── drops.css│ │ │ └── Drops.js│ │ ││ │ └── RecoilSimpleExample.js│ ││ ├── hooks│ │ ├── useDidMount.js│ │ ├── useDidUpdate.js│ │ ├── useEffectOnceWhen.js│ │ ├── useGeolocation.js│ │ ├── useInput.js│ │ ├── useIntersectionObserverRef.js│ │ └── useWebPush.js # reusable custon hook for Web Push notifications (not present in the free version)│ ││ ├── postInstallConfig│ │ ├── withAdmin.js│ │ ├── withBottomMenu.js│ │ ├── withRadialMenu.js│ │ ├── withRecoilExample.js│ │ └── withVideoChat.js│ ││ ├── Utils│ │ ├── common.js│ │ ├── routes.js│ │ └── withAdminRoute.js│ ││ ├── App.css # classical file on React│ ├── App.js # classical file on React too│ ├── global-css.css│ ├── HomePage.js│ ├── i18n.js # init file for i18next│ ├── index.js # common file on all React│ ├── service-worker.js # Only in the PWA version│ ├── serviceWorkerRegistration.js # Only in the PWA version│ └── logo.svg # RUM logo base from cra tool logo│ ├── .env.local # environment variables for the frontend functionality├── .gitignore # common in all project├── .nvmrc # file for syncronized your node version to the best version for better performance and compatibility├── jsconfig.json├── package.json├── README.md└── yarn.lockThe tree structure may seem quite large but appearances are deceiving, for the most part it is small reusable components all made up in the same way, a folder that contains a .css file and a .js file and when functions are called in these components, they come from the custom hook. All the global state management is done through atoms, but I'll explain all that in more detail throughout this documentation.
Dependencies#
"dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "axios": "^0.21.1", # promise-based HTTP Client "emoji-picker-react": "^3.4.8", # this dependency is for emoji component "i18next": "^20.3.3", # this dependency is for translation "i18next-browser-languagedetector": "^6.1.2", # this dependency is for auto-detect browser language "i18next-http-backend": "^1.2.6", # this dependency is for use locales folder with multiple files translation "peerjs": "^1.3.2", # used by video chat "react": "^17.0.2", "react-alert": "^7.0.3", # this dependency is for copy id alert for video chat invitations "react-alert-template-basic": "^1.0.2", # this dependency is for copy id alert for video chat invitations "react-confirm-alert": "^2.7.0", # this dependency is for the custom alert component "react-copy-to-clipboard": "^5.0.3", # this dependency is for automatic copy id when the user click "react-device-detect": "^1.17.0", # this dependency is for detect if is browser, Android or IOS "react-dom": "^17.0.2", "react-i18next": "^11.11.3", # this dependency is for translation "react-router": "^5.2.0", # Router "react-router-dom": "^5.2.0", # Router "react-scripts": "4.0.3", "react-speech-recognition": "^3.8.2", # module for transcript speech to text "recoil": "^0.3.1", # this dependency is for global state managment "simple-peer": "^9.11.0", # used by video chat "socket.io-client": "^4.1.3", # used by all chat features "uuid": "^8.3.2", # generate ramdom id (option not activated in the app - the code is commented) "visitor-info": "^0.3.1", # get some infos from users chat "web-vitals": "^1.0.1", "workbox-background-sync": "^6.1.5", # PWA google modules "workbox-broadcast-update": "^6.1.5", # PWA google modules "workbox-cacheable-response": "^6.1.5", # PWA google modules "workbox-core": "^6.1.5", # PWA google modules "workbox-expiration": "^6.1.5", # PWA google modules "workbox-google-analytics": "^6.1.5", # PWA google modules "workbox-navigation-preload": "^6.1.5", # PWA google modules "workbox-precaching": "^6.1.5", # PWA google modules "workbox-range-requests": "^6.1.5", # PWA google modules "workbox-routing": "^6.1.5", # PWA google modules "workbox-strategies": "^6.1.5", # PWA google modules "workbox-streams": "^6.1.5" # PWA google modules },