hub / github.com/TomDoesTech/Realtime-Chat-Application
github.com/TomDoesTech/Realtime-Chat-Application @main
Chat with this repo
12 symbols
31 edges
13 files
0 documented · 0%
What it actually does AI analysis from the code graph — generated when you open this
loading…
README
Chat application with React.js, Node.js & Socket.io
Video: https://www.youtube.com/watch?v=a_xo-SbIfUQ
What are we building?
A chat application with rooms
What technologies are we using?
Node.js
- Socket.io
- ExpressJS
- TypeScript
React.js
- NextJS
- Socket.io-client
- React hooks
- Context API
- TypeScript
- CSS Modules
What will you learn?
- How sockets work on the server and the client
- How to setup socket.io-client correctly in React
- How to organize code for maintainability
Structure
- Bootstrap backend
- Bootstrap frontend
- Setup sockets on the backend
- Setup sockets in React with context API
- Add set username functionality
- Add create room functionality
- Add send message functionality
- Styling
Support
Sign up to DigitalOcean I 💖 DigitalOcean
Screenshots
Home screen
No rooms
In chat
Let's keep in touch
Extension points exported contracts — how you extend this code
Context (Interface)(no doc)
client/context/socket.context.tsx
Core symbols most depended-on inside this repo
useSocketscalled by 3
client/context/socket.context.tsx
handleJoinRoom
called by 1
client/containers/Rooms.tsx
socket
called by 1
server/src/socket.ts
MyApp
called by 0
client/pages/_app.tsx
Home
called by 0
client/pages/index.tsx
handleSetUsername
called by 0
client/pages/index.tsx
SocketsProvider
called by 0
client/context/socket.context.tsx
RoomsContainer
called by 0
client/containers/Rooms.tsx
Shape
Languages
TypeScript100%
Modules by API surface
client/context/socket.context.tsx3 symbols
client/containers/Rooms.tsx3 symbols
client/pages/index.tsx2 symbols
client/containers/Messages.tsx2 symbols
server/src/socket.ts1 symbols
client/pages/_app.tsx1 symbols
For agents
$ claude mcp add Realtime-Chat-Application \
-- python -m otcore.mcp_server <graph>