# 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**
```bash
git clone <your-repo-url>
cd REGISTERFRONTEND
```

### 2. **Install Dependencies**
```bash
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**
```bash
npm run dev
# or
yarn dev
```
The app will be available at [http://localhost:5173](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.

---