This section details the organization and core components of the client-side application, built with React and Vite.
The frontend project is managed by Vite, a modern build tool that provides a fast development experience. Key dependencies are listed in package.json, enabling features like routing, state management, API calls, UI styling, and real-time communication.
{
"name": "frontend",
"private": true,
"version": "0.0.0"
The application's entry point is src/main.jsx, which initializes React and sets up the BrowserRouter for client-side routing. The main App.jsx component then defines the application's routes using react-router-dom.
// src/main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { BrowserRouter } from 'react-router-dom'
createRoot(document.getElementById('root')).render(
<StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</StrictMode>,
)The App.jsx component handles authentication checks and conditionally renders routes based on the user's authentication status. It also integrates react-hot-toast for notifications and lucide-react for loading indicators.
// src/App.jsx
import Navbar from './components/Navbar'
import { Routes, Route, Navigate } from 'react-router-dom'
import { useEffect } from 'react'
import HomePage from './pages/HomePage'
import SignUpPage from './pages/SignUpPage'
import LoginPage from './pages/LoginPage'
import SettingsPage from './pages/SettingsPage'
import ProfilePage from './pages/ProfilePage'
import { useThemeStore } from './store/useThemeStore'
import { useAuthStore } from './store/useAuthStore';
import { Loader } from 'lucide-react'
import { Toaster } from 'react-hot-toast'
const App = () => {
const { authUser, checkAuth, isCheckingAuth, onlineUsers } = useAuthStore();
const { theme } = useThemeStore();
useEffect(() => {
checkAuth();
}, [checkAuth]);
if(isCheckingAuth && !authUser) return (
<div className='flex items-center justify-center h-screen'>
<Loader className='size-10 animate-spin' />
</div>
)
return (
<div className='' data-theme={theme}>
<Navbar />
<Toaster />
<Routes>
<Route path='/' element={authUser ? <HomePage />: <Navigate to='/login' />} />
<Route path='/signup' element={ !authUser ? <SignUpPage />: <Navigate to='/' />} />
<Route path='/login' element={!authUser ? <LoginPage />: <Navigate to='/' />} />
<Route path='/settings' element={<SettingsPage />} />
<Route path='/profile' element={authUser ? <ProfilePage />: <Navigate to='/login' />} />
</Routes>
</div>
)
}
export default AppTailwind CSS is used for utility-first styling, with DaisyUI providing a set of pre-built components and themes. The tailwind.config.js file configures these settings, including the extensive list of available DaisyUI themes. The application's theme can be dynamically changed via the useThemeStore.
// frontend/tailwind.config.js
import daisyui from "daisyui"
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
fontFamily : {
chivo : ['Chivo', 'sans-serif'],
}
},
},
plugins: [daisyui],
daisyui : {
themes: [
"light", "dark", "cupcake", "bumblebee", "emerald", "corporate", "synthwave",
"retro", "cyberpunk", "valentine", "halloween", "garden", "forest", "aqua",
"lofi", "pastel", "fantasy", "wireframe", "black", "luxury", "dracula",
"cmyk", "autumn", "business", "acid", "lemonade", "night", "coffee", "winter",
"dim", "nord", "sunset",
],
}
}The application utilizes Zustand for global state management. Key stores include useAuthStore for managing user authentication status and related data, and useThemeStore for handling the application's theme.
react-router-dom manages navigation and protected routes based on authentication.socket.io-client.