My Fastify App - React + Material-UI Frontend

A modern, responsive full-stack web application built with Fastify backend and React + Material-UI frontend.

🚀 Features

• Modern UI: Beautiful Material-UI components with responsive design
• Full-Stack: Fastify backend API with React frontend
• Real-time: Hot Module Replacement (HMR) for development
• Responsive: Mobile-first design that works on all devices
• Themeable: Custom Material-UI theme with consistent styling
• Interactive: Sample components including counter, navigation drawer, and more

🛠️ Tech Stack

Frontend

• React 19 - Latest React with modern hooks
• Material-UI (MUI) 7 - Professional UI component library
• Vite 7 - Fast build tool and dev server
• Emotion - CSS-in-JS styling solution
• Material Icons - Comprehensive icon library

Backend

• Fastify 5 - Fast and low overhead web framework
• Node.js - JavaScript runtime

📦 Installation

Prerequisites

• Node.js (v20.19.0 or higher recommended)
• npm or yarn package manager

Setup

1. Clone the repository

   git clone <your-repo-url>
   cd my_fastify_app

2. Install client dependencies

   cd client
   npm install

3. Install server dependencies

   cd ../server
   npm install

🚀 Running the Application

Development Mode

1. Start the backend server

   cd server
   node index.js

   The Fastify server will start on http://localhost:3001

2. Start the frontend client (in a new terminal)

   cd client
   npm run dev

   The React app will start on http://localhost:5173

Production Build

1. Build the frontend

   cd client
   npm run build

2. Preview the production build

   npm run preview

📁 Project Structure

my_fastify_app/
├── client/                 # React frontend
│   ├── src/
│   │   ├── App.jsx        # Main application component
│   │   ├── main.jsx       # Application entry point
│   │   └── assets/        # Static assets
│   ├── package.json       # Frontend dependencies
│   └── vite.config.js     # Vite configuration
├── server/                 # Fastify backend
│   ├── index.js           # Server entry point
│   └── package.json       # Backend dependencies
└── package.json           # Root package.json

🎨 Material-UI Components Used

• AppBar - Top navigation bar
• Drawer - Side navigation menu
• Card - Content containers
• Grid - Responsive layout system
• Typography - Text components
• Button - Interactive buttons
• Paper - Surface containers
• Container - Content width management
• Box - Layout utility component

🔧 Available Scripts

Client (React + Vite)

• npm run dev - Start development server with HMR
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

Server (Fastify)

• node index.js - Start the server

🌐 API Endpoints

• GET /api/hello - Returns a greeting message from the backend

🎯 Key Features

Interactive Counter

• Increment and reset functionality
• Material-UI button variants
• Real-time state management

Navigation Drawer

• Collapsible side menu
• Icon-based navigation items
• Responsive design

Responsive Layout

• Grid-based layout system
• Mobile-first approach
• Breakpoint-aware components

🎨 Customization

Theme Configuration

The app uses a custom Material-UI theme defined in App.jsx:

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
  },
})

Adding New Components

1. Import required components from @mui/material
2. Use Material-UI's sx prop for custom styling
3. Follow Material Design principles for consistency

🚀 Deployment

Frontend

• Build the project: npm run build
• Deploy the dist/ folder to your hosting service
• Configure your server to serve the built files

Backend

• Ensure Node.js is installed on your server
• Install dependencies: npm install
• Start the server: node index.js
• Consider using PM2 or similar for production process management

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📝 License

This project is licensed under the ISC License.

🔗 Useful Links

• Material-UI Documentation
• React Documentation
• Fastify Documentation
• Vite Documentation