Synkro Frontend

Modern React + Vite chat client for Synkro.

Overview

This app provides the user-facing chat experience for Synkro, including:

• Authentication flow (login, signup, verify email, reset password)
• Real-time one-to-one and group conversations
• Message send/edit/delete/reactions
• Delivery and seen status
• Typing indicators and online presence
• User profile and settings
• Mobile-friendly chat/sidebar behavior

Tech Stack

• React 19
• Vite 8
• React Router 7
• Zustand (state management + persistence)
• Axios (API client)
• Socket.IO Client (real-time updates)
• Tailwind CSS 4
• Lucide React icons
• Frimousse emoji picker

Requirements

• Node.js 18+
• npm 9+
• Running Synkro backend (default: http://localhost:3000)

Getting Started

1. Install dependencies

npm install

2. Configure environment

Create a .env file in the frontend root:

VITE_API_URL=http://localhost:3000/api

If omitted, the app falls back to http://localhost:3000/api.

3. Start development server

npm run dev

4. Open in browser

http://localhost:5173

Available Scripts

• npm run dev - Start Vite development server
• npm run build - Build production bundle
• npm run preview - Preview production build locally
• npm run lint - Run ESLint checks

Project Structure

src/
	components/
		chat/
		sidebar/
		ui/
	hooks/
	layouts/
	lib/
	pages/
	routes/
	services/
	store/

API and Auth Notes

• Axios base URL is read from VITE_API_URL.
• JWT is read from persisted Zustand auth state (synkro-auth) and attached as Authorization: Bearer <token>.
• On 401, auth storage is cleared and user is redirected to /login.

Real-Time Notes

• Socket connection is initialized for authenticated sessions.
• Conversation room join/leave is handled by chat route changes.
• Incoming events update local state for:
  • new messages
  • message updates
  • reactions
  • seen/delivered state
  • typing and presence

UI/UX Highlights

• Message search with result navigation
• Frimousse-based emoji picker in message input
• Mobile sidebar drawer with open/close behavior
• Chat header controls (search, close chat, user info)

Troubleshooting

Backend not reachable

• Ensure backend is running on the expected host/port.
• Verify VITE_API_URL in .env.

Unauthorized loops / forced logout

• Token may be expired/invalid.
• Re-login to regenerate valid auth token.

Real-time events not updating

• Check backend socket server is active.
• Confirm client is authenticated and connected.

Build/lint issues

npm run lint
npm run build

Fix reported errors/warnings and rerun.

License

This frontend is part of the Synkro project and follows the repository license.