Hexlet chat

Educational React front-end project

Description

This is a real-time SPA chat application (like Slack). You can exchange messages and manage channels (basic CRUD operations). There's also authorization, just use the demo credentials:

Nickname: user
Password: user123

or create new one

You can try the application by yourself here: click

System requirements

• node >= 18
• make >= 4 (optional)

Launch in dev-mode

1. Clone repo
2. Install deps: npm ci or make install
3. Launch make start from root directory
4. Try app with live-reload on http://localhost:3000/
5. Wow, it's look great! 🤩

Launch in production mode

1. Clone repo
2. Install deps: npm ci or make install
3. Build frontend: npm run build
4. Start backend and frontend with npm start
5. Nice 😏

What was used

• Base with Create React App
• React 18.2
  • Navigation with React-router
  • Layout on Bootstrap (react-bootstrap)
  • Toasts with react-toastify
• Storage on Redux-Toolkit
• API
  • Emitting through RTK-Query
  • Real time updates with Socket.IO
• Forms
  • Building and management with formik
  • Validation through yup
• Texts with i18next (react-i18next)
• Profanity check with leo-profanity
• Deploy to Render
• Development
  • ESLint
  • GitHub Actions