Weather App Monorepo (React + Vite + Express + Turbo + pnpm)

This monorepo contains a full-stack weather application with a React frontend (Vite, TypeScript) and an Express API backend (TypeScript). It uses TurboRepo for monorepo orchestration and pnpm for fast, reliable package management.

---

Prerequisites

• nvm (Node Version Manager)
  • nvm for Windows
  • nvm for Mac/Linux
• Node.js (Latest LTS recommended, e.g. 22.x)
• pnpm (Install guide)
• TurboRepo (installed automatically as a devDependency)

---

Setup Instructions

1. Install Node.js (using nvm recommended)

Windows

nvm install 22
nvm use 22

Mac/Linux

nvm install 22
nvm use 22

2. Install pnpm (if not already installed)

npm install -g pnpm

3. Install dependencies (from project root)

pnpm install

---

Development

Start both frontend and backend (in separate terminals):

API Backend

pnpm -F api dev

Runs the Express API server on http://localhost:4000

Web Frontend

pnpm -F web dev

Runs the React app on http://localhost:5173

---

Build

To build all apps/packages:

pnpm run build

---

Testing

Run all tests:

pnpm run test

Or run tests for a specific workspace:

pnpm -F web test
pnpm -F api test

---

TurboRepo

• TurboRepo is used for orchestrating builds, tests, and linting across the monorepo.
• You can run any script with Turbo using:

  pnpm run <script>

  or filter to a specific workspace:

  pnpm -F <workspace> <script>

---

Project Structure

• apps/web - React + Vite frontend
• apps/api - Express API backend
• packages/shared-types - Shared TypeScript types

---

Notes

• Make sure ports 4000 (API) and 5173 (web) are free.
• For Windows, use PowerShell or Command Prompt. For Mac/Linux, use your preferred shell.
• If you encounter type errors with Express, ensure you are using @types/express@4.x (not 5.x).
• For any issues, delete node_modules and pnpm-lock.yaml, then run pnpm install again.

---

Useful Links

• pnpm documentation
• TurboRepo documentation
• Vite documentation
• Express documentation

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})