Skip to main content

The structure and dependencies of the chat application!

Directory Structure#

Here is the complete structure of the application (Classic):

  • Detailed structure diagram
├── backends│   └── messages-and-pictures # backend for messages & pictures│       └── images│       └── src│       │   ├── controller│       │   │   └── file.controller.js│       │   ├── middleware│       │   │   └── upload.js│       │   └── routes│       │       └── index.js│       ├── .env│       ├── .gitignore│       ├── package.json│       ├── README.md│       └── server.js│├── node_modules│  ├── public│   ├── locales # folder for translation (i18next-http-backend)│   │   ├── en│   │   │   └── translation.json│   │   └── fr│   │       └── translation.json│   ││   ├── favicon.ico│   ├── index.html│   ├── logo192.png│   ├── logo512.png│   ├── manifest.json│   └── robots.txt├── src│   ├── 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│   │   │   │   │   ├── ChatRoom.css│   │   │   │   │   ├── ChatRoom.js # ChatRoom component│   │   │   │   │   └── EmptyChatMessage.js # Empty message when the messages list is empty│   │   │   │   ││   │   │   │   └── HomeChat│   │   │   │       ├── HomeChat.css│   │   │   │       └── HomeChat.js # This component is not used, if you don't want the current login method or customize the chat login page it is prepared for that!│   │   │   ││   │   │   ├── 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│   │   │   ││   │   │   ├── 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│   │   ││   │   ├──customAlert # reusable custom Alert component│   │   │   ├── alert.css│   │   │   ├── Alert.js│   │   │   └── clickedAlertAtom.js│   │   ││   │   ├── hooks│   │   │   ├── 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│   │   ││   │   ├── 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│   │       │   ├── clickedGuestAtom.js│   │       │   ├── clickedOffChatAtom.js│   │       │   ├── clickedParamsAtom.js│   │       │   ├── clickedSoundGuitarAtom.js│   │       │   ├── clickedSoundSoftwareAtom.js│   │       │   ├── clickedUserAtom.js│   │       │   ├── dangerZoneAtom.js│   │       │   ├── exampleClicked.js│   │       │   ├── fileFromPictureAtom.js│   │       │   ├── exampleUsAtom.js│   │       │   ├── imageInfoAtom.js│   │       │   ├── infoPictureFromListAtom.js│   │       │   ├── isLanguageAtom.js│   │       │   ├── isListeningAtom.js│   │       │   ├── isSoundNotifications.js│   │       │   ├── messageForBotAtom.js│   │       │   └── messagesAtom.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│   ├── App.css # classical file on React│   ├── App.js # classical file on React too│   ├── i18n.js # init file for i18next│   ├── index.js # common file on all React│   └── 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├── package.json├── README.md└── yarn.lock

The 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 of this app#

Here are all the dependencies that are present in the app :

These dependencies represent the free version only!

"dependencies": {    "@testing-library/jest-dom": "^5.11.4", # cra default install    "@testing-library/react": "^11.1.0", # cra default install    "@testing-library/user-event": "^12.1.10", # cra default install    "axios": "^0.21.1",    "emoji-picker-react": "^3.4.8",    "i18next": "^20.3.3",    "i18next-browser-languagedetector": "^6.1.2",    "i18next-http-backend": "^1.2.6",    "query-string": "^6.13.7",    "react": "^17.0.1", # cra default install    "react-device-detect": "^1.17.0",    "react-dom": "^17.0.1", # cra default install    "react-i18next": "^11.11.3",    "react-router": "^5.2.0",    "react-router-dom": "^5.2.0",    "react-scripts": "4.0.1", # cra default install    "react-speech-recognition": "^3.8.2",    "recoil": "^0.3.1",    "socket.io-client": "^4.1.3",    "uuid": "^8.3.2",    "visitor-info": "^0.3.1",    "web-vitals": "^0.2.4" # cra default install