This is a real time room based chatting app. Here a user can Login/Register and then user have to Create or Join in a particular chat room to start chatting in the room.
For this project,
- In backend I used Node with Express and MongoDB as database. I also used GraphQL instead of REST API though there is two REST API route.
- In frontend, I used React with NextJS. I used Redux for state management. For this particular app, Redux was not a must but it'll help to scale the project further. I also used GraphQL client to interact with backend GraphQL.
The project directory structure is mostly self explanatory, the directory backend contains all the code for backend. The directory client contains all the codes for frontend.
Here is a quick overview of the project structure:
In the src directory almost all the code for backend is stored.
The server.ts is the core script to run the server for the backend.
The other directories are:
- config
- models
- resolvers
- routes
- schemas
The directory config contains password configuration with passport.js. The directory models contains database configuration. The directory resolvers contains the GraphQL resolvers. The directory routes contains some API routes. The directory schemas contains GraphQL schmeas.
Inside the client directory all the frontend codes exists.
The main directories of client directory are:
- components
- pages
- public
- queries
- redux
- styles
The directory components contains all the components. The directory pages contains all the pages in NextJS. The directory public contains the images. The directory queries contains client side GraphQL queries. The directory redux contains all Redux codes. The directory styles contains all custom CSS files.