102 lines
3.2 KiB
Markdown
102 lines
3.2 KiB
Markdown
# 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.
|
|
|
|
---
|