Privacy-Focused-Web-Analytics-Dashboard

Fusion Starter

← Back to README Documentation Index Project Structure Developer Guide

A production-ready full-stack React application template with integrated Express server, featuring React Router 6 SPA mode, TypeScript, Vitest, Zod and modern tooling.

While the starter comes with a express server, only create endpoint when strictly neccesary, for example to encapsulate logic that must leave in the server, such as private keys handling, or certain DB operations, db…

Tech Stack

Project Structure

client/                   # React SPA frontend
├── pages/                # Route components (Index.tsx = home)
├── components/ui/        # Pre-built UI component library
├── App.tsx                # App entry point and with SPA routing setup
└── global.css            # TailwindCSS 3 theming and global styles

server/                   # Express API backend
├── index.ts              # Main server setup (express config + routes)
└── routes/               # API handlers

shared/                   # Types used by both client & server
└── api.ts                # Example of how to share api interfaces

Key Features

SPA Routing System

The routing system is powered by React Router 6:

For example, routes can be defined with:

import { BrowserRouter, Routes, Route } from "react-router-dom";

<Routes>
  <Route path="/" element={<Index />} />
  {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
  <Route path="*" element={<NotFound />} />
</Routes>;

Styling System

// cn utility usage
className={cn(
  "base-classes",
  { "conditional-class": condition },
  props.className  // User overrides
)}

Express Server Integration

Example API Routes

Shared Types

Import consistent types in both client and server:

import { DemoResponse } from "@shared/api";

Path aliases:

Development Commands

pnpm dev        # Start dev server (client + server)
pnpm build      # Production build
pnpm start      # Start production server
pnpm typecheck  # TypeScript validation
pnpm test          # Run Vitest tests

Adding Features

Add new colors to the theme

Open client/global.css and tailwind.config.ts and add new tailwind colors.

New API Route

  1. Optional: Create a shared interface in shared/api.ts:
export interface MyRouteResponse {
  message: string;
  // Add other response properties here
}
  1. Create a new route handler in server/routes/my-route.ts:
import { RequestHandler } from "express";
import { MyRouteResponse } from "@shared/api"; // Optional: for type safety

export const handleMyRoute: RequestHandler = (req, res) => {
  const response: MyRouteResponse = {
    message: "Hello from my endpoint!",
  };
  res.json(response);
};
  1. Register the route in server/index.ts:
import { handleMyRoute } from "./routes/my-route";

// Add to the createServer function:
app.get("/api/my-endpoint", handleMyRoute);
  1. Use in React components with type safety:
import { MyRouteResponse } from "@shared/api"; // Optional: for type safety

const response = await fetch("/api/my-endpoint");
const data: MyRouteResponse = await response.json();

New Page Route

  1. Create component in client/pages/MyPage.tsx
  2. Add route in client/App.tsx:
<Route path="/my-page" element={<MyPage />} />

Production Deployment

Architecture Notes