# Fusero website revamp

This is the revamp of the official Fusero website, this offers flexibility with new features compared to webflow.

- 🧩 **React + TypeScript + Vite** (frontend)
- ⚡ **Fastify + MikroORM + PostgreSQL** (backend)
- ✅ **Vitest** (testing framework for both frontend and backend)

---

## 📁 Folder Structure

```
fusero-frontend/
├── src/                 # React frontend (Vite)
├── tests/               # Frontend unit/component tests
├── backend/             # Fastify backend lives here
│   ├── src/             # Fastify app + MikroORM logic
│   ├── entities/        # MikroORM entity definitions
│   ├── tests/           # Backend unit/integration tests
│   └── tsconfig.json    # TypeScript config for backend
├── vite.config.ts       # Vite config
└── README.md
```

---

## 🛠️ Tech Stack

### Frontend

| Tool                       | Purpose                         |
| -------------------------- | ------------------------------- |
| **React**                  | UI framework                    |
| **TypeScript**             | Type safety                     |
| **Vite**                   | Fast dev server + build         |
| **Vitest**                 | Unit & component testing        |
| **React Testing Library**  | Test components like real users |
| **PrimeReact**             | UI component library            |
| **PrimeIcons**             | Icon set for PrimeReact         |
| **@tanstack/react-router** | Modern file-based routing       |
| **React Hook Form**        | Form state management           |
| **Zod**                    | Schema validation               |
| **Zustand**                | Global state management         |
| **Framer Motion**          | Animations and transitions      |
| **Tailwind CSS**           | Utility-first CSS styling       |
| **PostCSS**                | Processes Tailwind and plugins  |
| **Autoprefixer**           | Adds vendor prefixes to CSS     |

### Backend

| Tool                   | Purpose                    |
| ---------------------- | -------------------------- |
| **Fastify**            | Lightweight backend server |
| **TypeScript**         | Type safety                |
| **MikroORM**           | Database ORM               |
| **PostgreSQL**         | SQL database               |
| **Vitest + Supertest** | HTTP & logic testing       |

---

## 🧪 Testing Setup

### Frontend

- Run tests:

  ```bash
  pnpm test
  ```

- Uses:
  - `vitest` for fast unit testing
  - `@testing-library/react` for testing UI components

### Backend

- Run tests:

  ```bash
  cd backend
  pnpm test
  ```

- Uses:
  - `vitest` + `supertest` for testing Fastify routes and logic

---

## 🚀 Getting Started

### 1. Install dependencies

```bash
pnpm install
cd backend && pnpm install
```

### 2. Run frontend

```bash
pnpm dev
```

### 3. Run backend

```bash
cd backend
pnpm dev
```

---

## 📦 Deployment

Frontend and backend can be deployed separately or behind a proxy (e.g. Nginx or Vercel + API routes). You can also Dockerize both services if needed.

---

## 📚 Environment Variables

Set these in `.env` files:

- **Frontend**: (optional)
- **Backend**:
  ```
  DATABASE_URL=postgresql://user:pass@localhost:5432/mydb
  ```

---

Let me know if you'd like a `.env.example`, CI config, or Docker setup.