TutorialApp is a real-time chat application built with React, TypeScript, and WebSockets. It allows users to register, login, join chat rooms using room keys, and exchange messages in real time.
- User authentication (register/login)
- Real-time messaging using WebSockets
- Chat room functionality with room keys
- Message history
- Responsive design
- Protected routes for authenticated users
- React 19
- TypeScript
- Vite
- WebSockets (STOMP over SockJS)
- Axios for HTTP requests
- React Hook Form for form handling
- React Router for navigation
- Node.js (v16+)
- npm or yarn
- Backend server running at http://localhost:8080
- Clone the repository
git clone https://github.com/CBlooded/TutorialApp-Frontend.gitcd TutorialApp-Frontend - Install dependencies
npm install - Start the development server:
npm run dev - Set up the backend
- Clone the backend repository:
git clone https://github.com/CBlooded/TutorialApp-Backend.gitcd TutorialApp-Backend - Follow the instructions in the backend README.md
- Clone the backend repository:
- Register a new account or login with existing credentials
- Navigate to the Chat page
- Enter a room key (must start with #, e.g., #key12)
- Start chatting in real-time with other users in the same room
/src/components: UI components (Login, Register, NavBar, ChatRoomMessenger)/src/pages: Page components (Dashboard, Chat)/src/Services: Service modules (WebSocket service)/src/api: API configuration and interceptors/src/assets: Static assets
- Authentication:
/api/v1/auth/authenticate(POST) - Registration:
/api/v1/auth/register(POST) - Chat WebSocket:
http://localhost:8080/chat - Chat topics:
/topic/messages/{roomKey} - Send message:
/app/sendMessage/{roomKey}
The application uses STOMP over SockJS for WebSocket communication. Messages are sent to specific rooms and received from subscribed topics.
Styling is done using CSS files for each component.