Hydro Muse

The frontend is built with React 18, TypeScript, and Vite, leveraging the Context API for global auth state and React Router for navigation. Pages such as SignIn, SignUp, ForgotPassword, and a protected Dashboard are wrapped in route guards that check the presence of a valid JWT cookie before rendering. UI components are sourced from Shadcn UI and Radix, styled with TailwindCSS, and enhanced with React‑Query for data fetching and caching.

The backend runs on Node.js with Express and defines a RESTful authentication API under /api/auth. Core routes include POST /api/auth/register, POST /api/auth/login, POST /api/auth/verify-email, POST /api/auth/forgot-password, POST /api/auth/reset-password, POST /api/auth/verify-otp, and GET /api/auth/profile. Each request passes through middleware layers for rate limiting, Helmet security headers, input validation, and JWT verification. Passwords are salted and hashed with bcrypt, and email interactions (verification, OTP, password reset) are handled via Nodemailer configured with SMTP credentials.

Data flow starts with the client submitting JSON payloads to the Express routes. Validation schemas (e.g., using Joi) enforce strict typing before Mongoose models persist user records. Upon successful authentication, a signed JWT is issued and set as an HTTP‑only cookie, eliminating XSS exposure. Protected routes decode the token, attach the user context, and allow access to resources like the user profile endpoint. All sensitive operations are rate‑limited to mitigate brute‑force attacks.

The build topology uses Vite for fast frontend bundling and npm scripts for backend development (npm run dev). Environment variables (.env) configure the server port, MongoDB URI, JWT secret, and SMTP settings. Development is container‑agnostic but can be Dockerized for production, with the frontend served statically by the Express server or a dedicated CDN.