RegisterFrontend

This is a modern React + Vite + Tailwind CSS frontend for a registration and dashboard system. It features authentication, user onboarding, admin management, and responsive UI components, structured for scalability and maintainability.

---

📁 Project Structure

• src/features/
  Feature-based folders (e.g., login, dashboard, admin) each with their own components/, pages/, and (optionally) hooks/, api/, and __tests__/.
• src/shared/
  Reusable components, hooks, utilities, and store logic shared across features.
• src/auth/AuthWrapper.jsx
  Handles authentication, token refresh, and protected route logic.
• src/store/
  Zustand stores for global state (e.g., authentication).
• src/pages/
  Top-level route pages (may be migrated into features as the project evolves).
• tailwind.config.js
  Tailwind CSS configuration.
• vite.config.js
  Vite build and dev server configuration.

---

🚀 Getting Started (Local Development)

1. Clone the Repository

git clone <your-repo-url>
cd REGISTERFRONTEND

2. Install Dependencies

npm install
# or
yarn install

3. Environment Variables

Create a .env file in the root directory. Example:

VITE_API_BASE_URL=http://localhost:3001
VITE_CENTRAL_SERVER_ENDPOINT=http://localhost:3001

Adjust these URLs to match your backend API endpoints.

4. Run the Development Server

npm run dev
# or
yarn dev

The app will be available at http://localhost:5173 (or the port shown in your terminal).

---

🛠️ Key Features

• Authentication:
  Login, token refresh, and protected routes via AuthWrapper.
• Feature-based Structure:
  Each major feature (login, dashboard, admin, etc.) is isolated for scalability.
• Responsive Design:
  Built with Tailwind CSS and responsive utility classes.
• State Management:
  Uses Zustand for global state (auth, user).
• API Integration:
  Fetches data from a backend API, with credentials support for secure cookies.
• Referral Link Generation:
  Referral links are generated without specifying a registration type. The type (personal/company) is now selected by the user during the registration process, not during referral link creation.
• Registration Flow:
  During registration, users select their registration type (personal or company) via a toggle/slider. This selection is sent to the backend as part of the registration request.

---

🧑‍💻 Development Notes

• Mobile Support:
  The app is being refactored for improved mobile responsiveness. Test your changes on various screen sizes.
• Token Handling:
  Access tokens are stored in Zustand and sessionStorage; refresh logic is handled in AuthWrapper.jsx.
• Custom Hooks & API Utilities:
  As the project grows, move repeated logic into hooks/ and api/ folders within each feature.

---

🤝 Contributing

1. Fork the repo and create a feature branch.
2. Follow the existing folder structure and naming conventions.
3. Test your changes locally before submitting a pull request.

---

📄 License

This project is for internal use. Please contact the maintainer for licensing details.

---