How adoppp/achatx works
Achatx is a React chat application with email authentication, chat-listening/creation services, protected chat routes, and account settings. The visible runtime starts in src/main.tsx, which mounts theme, Redux, modal, and routing providers. Authentication services and the chat service use Firebase; auth state is reflected in Redux. Settings include theme customization persisted in browser storage. The README also calls out shared UI, error handling, and modal refactors. Several listeners and page implementations are present in the tree but their wiring was not sampled, so uncertain connections are omitted.
Main entry points: routing.config.tsx Route configuration · main.tsx React entry · auth.service.ts Auth service · SignInForm.tsx Auth forms
Components 22
App entry and navigation
- React entry
src/main.tsx - Route configuration
src/routing/routing.config.tsx - Protected routes
src/routing/routes/PrivateRoute.tsx
Authentication
- Sign-in page
src/pages/auth/SignInPage/SignInPage.tsx - Sign-up page
src/pages/auth/SignUpPage/SignUpPage.tsx - Auth forms
src/sections/auth/SignInForm/SignInForm.tsx - Auth service
src/services/auth.service.ts - Auth state listener
src/hooks/useAuthListener.tsx
Chat domain
- Chats page
src/pages/app/ChatsPage/ChatsPage.tsx - Chat page
src/pages/app/ChatPage/ChatPage.tsx - Chat listener
src/hooks/useChatsListener.tsx - Chat service
src/services/chats.service.ts
State and shared UX
- Redux store
src/redux/store.ts - Auth state
src/redux/reducers/authSlice.ts - Error state
src/redux/reducers/errorSlice.ts - Error handler
src/hooks/useErrorHandler.tsx - Modal system
src/components/shared/Modal/ModalProvider.tsx - Theme provider
src/hooks/useTheme.tsx - Settings pages
src/pages/app/settings/ThemePage/ThemePage.tsx
Other components
- User
- Firebase Firestore
- Firebase Auth
Connections 23
- User → React entry: opens app
- React entry → Route configuration: mounts router
- React entry → Redux store: provides store
- React entry → Modal system: provides modal
- React entry → Theme provider: provides theme
- Route configuration → Protected routes: guards routes
- Route configuration → Chats page: routes to
- Route configuration → Chat page: routes to
- Route configuration → Sign-in page: routes to
- Route configuration → Sign-up page: routes to
- Sign-in page → Auth forms: renders form
- Sign-up page → Auth forms: renders form
- Auth forms → Auth service: submits credentials
- Auth service → Firebase Auth: authenticates
- Auth service → Firebase Firestore: writes profile
- Auth state listener → Firebase Auth: observes auth
- Auth state listener → Auth state: dispatches state
- Redux store → Auth state: combines reducer
- Chat listener → Chat service: subscribes chats
- Chat service → Firebase Firestore: reads and writes
- Error handler → Error state: selects errors
- Error handler → Modal system: opens or closes
- Settings pages → Theme provider: sets appearance