128 lines
3.1 KiB
Markdown
128 lines
3.1 KiB
Markdown
# 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 |
|
|
|
|
### 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. |