Skip to main content

Phoenix Fire Protection (S&M) Ltd - Website

Website for Phoenix Fire Protection (S&M) Ltd built with React, TypeScript, Vite, and Tailwind CSS.

Prerequisites​

Before you begin, ensure you have the following installed on your system:

  • Node.js (v16.0.0 or higher) - Download
  • pnpm (v7.0.0 or higher) - Install via npm install -g pnpm

You can verify your installations by running:

node --version
pnpm --version

Using NVM (Node Version Manager)​

NVM is a tool that allows you to easily install and switch between different Node.js versions. This is useful when working on multiple projects with different Node.js version requirements.

Installing NVM​

On macOS/Linux:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

Then reload your shell configuration:

source ~/.bashrc  # or ~/.zshrc for zsh

On Windows:

Use nvm-windows instead. Download the installer from the releases page.

Using NVM with This Project​

  1. Install the required Node.js version:
nvm install 18  # Installs Node.js v18 (recommended for this project)
  1. Switch to the correct Node.js version:
nvm use 18
  1. Verify the correct version is active:
node --version  # Should show v18.x.x
  1. Automatically use the correct version:

Create a .nvmrc file in the project root with the Node.js version:

18

Then NVM will automatically use the correct version when you navigate to the project:

nvm use  # Automatically reads .nvmrc and switches to that version

Tip: Add nvm use to your shell profile or use a tool like avn to automatically switch versions when entering the project directory.

Installation​

  1. Clone or navigate to the project directory:
cd phoenix-fire-protection-react
  1. Install dependencies:

Since the node_modules folder is excluded from the repository, you need to install all project dependencies:

pnpm install

This command reads package.json and pnpm-lock.yaml (if present) and installs all required packages.

Development​

Start the development server to work on the project locally:

pnpm dev

This will start the Vite development server. The application will typically be available at:

http://localhost:5173

The browser will automatically refresh whenever you make changes to your code.

Most of the content changes can be found under

src/app/pages

Building for Production​

To create an optimized production build:

pnpm build

This will:

  • Compile all TypeScript files
  • Bundle and minify the code
  • Optimize assets
  • Generate output in the dist/ folder

The dist folder is ready to be deployed to the live site

Project Structure​

src/
├── app/
│   ├── App.tsx                 # Main app component
│   ├── routes.tsx              # Route definitions
│   ├── assets/                 # Images, icons, and static files
│   │   ├── icons/
│   │   └── images/
│   │       └── accreditations/
│   ├── components/             # Reusable React components
│   │   ├── Layout.tsx          # Main layout wrapper
│   │   └── ui/                 # shadcn/ui component library
│   └── pages/                  # Page components
│       ├── Home.tsx
│       ├── ContactUs.tsx
│       ├── WhatWeDo.tsx
│       └── error/
│           └── NotFound.tsx
├── styles/                     # Global styles
│   ├── index.css
│   ├── theme.css
│   ├── tailwind.css
│   └── fonts.css
├── main.tsx                    # Application entry point
└── vite-env.d.ts               # Vite environment types

index.html                       # HTML template
package.json                     # Project dependencies & scripts
tsconfig.json                    # TypeScript configuration
vite.config.ts                   # Vite configuration
tailwind.config.js              # Tailwind CSS configuration
postcss.config.mjs              # PostCSS configuration

Technologies​

Core​

  • React
  • TypeScript
  • Vite
  • React Router

Styling​

  • Tailwind CSS
  • shadcn/ui
  • Motion

UI Components & Icons​

  • Radix UI
  • Lucide React
  • Embla Carousel

Additional Libraries​

  • React Hook Form - form handling
  • Recharts - Data visualization
  • Sonner - Toast notifications
  • React DnD - Drag and drop functionality
  • Next Themes - Theme management

Scripts​

ScriptDescription
pnpm devStart development server
pnpm buildBuild for production

Troubleshooting​

Dependencies not installing​

  • Clear pnpm cache: pnpm store prune
  • Delete pnpm-lock.yaml and reinstall: pnpm install
  • Ensure you're using a compatible Node.js version

Hot reload not working​

  • Restart the dev server: pnpm dev
  • Check if the file has valid syntax

Build errors​

  • Check the error message in terminal
  • Ensure all imports are correct
  • Verify TypeScript types are properly defined

Additional Resources​