Revamp of the official Fusero website to run in React + Fastify
Go to file
2025-07-18 18:34:31 +02:00
fusero-backend feat: Init project 2025-07-18 18:16:10 +02:00
public feat: Init project 2025-07-18 18:16:10 +02:00
src feat: Init project 2025-07-18 18:16:10 +02:00
.gitignore feat: Init project 2025-07-18 18:16:10 +02:00
eslint.config.js feat: Init project 2025-07-18 18:16:10 +02:00
index.html feat: Init project 2025-07-18 18:16:10 +02:00
package.json feat: Added default react tech stack defined inside the tech stack documentation inside the Fusero Notion 2025-07-18 18:34:19 +02:00
pnpm-lock.yaml feat: Added default react tech stack defined inside the tech stack documentation inside the Fusero Notion 2025-07-18 18:34:19 +02:00
README.md Update README.md 2025-07-18 16:33:10 +00:00
tsconfig.app.json feat: Init project 2025-07-18 18:16:10 +02:00
tsconfig.json feat: Init project 2025-07-18 18:16:10 +02:00
tsconfig.node.json feat: Init project 2025-07-18 18:16:10 +02:00
vite.config.ts feat: Init project 2025-07-18 18:16:10 +02:00

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:

    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.