Rewrite of the official Fusero website.
fusero-backend | ||
public | ||
src | ||
.gitignore | ||
eslint.config.js | ||
index.html | ||
package.json | ||
pnpm-lock.yaml | ||
postcss.config.js | ||
README.md | ||
tailwind.config.js | ||
tsconfig.app.json | ||
tsconfig.json | ||
tsconfig.node.json | ||
vite.config.ts |
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:
pnpm test
-
Uses:
vitest
for fast unit testing@testing-library/react
for testing UI components
Backend
-
Run tests:
cd backend pnpm test
-
Uses:
vitest
+supertest
for testing Fastify routes and logic
🚀 Getting Started
1. Install dependencies
pnpm install
cd backend && pnpm install
2. Run frontend
pnpm dev
3. Run backend
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.