TypeScript Template

The TypeScript template provides a fully type-safe development experience with strict type checking and modern TypeScript features.

Client (Frontend)

The client is a modern React application built with Vite for a fast development experience and styled with Tailwind CSS.

`src/main.tsx`: The entry point of the React application.
`src/App.tsx`: The root component where routing is handled.
`src/Layout.tsx`: Layout wrapper component with navigation and theme support.
`src/pages/`: Contains the page components (Demo.tsx, NotFound.tsx).
`src/components/`: Reusable React components including Navigation.tsx.
`src/components/ui/`: UI components like ThemeToggle.tsx.
`src/hooks/`: Custom React hooks (useTheme.ts).
`src/config/`: Configuration files (constants.ts).
`src/global.css`: Global styles and Tailwind CSS imports.
`src/vite-env.d.ts`: Vite environment type definitions.
`vite.config.ts`: Vite configuration file with TypeScript.
`tsconfig.json`: Main TypeScript configuration.
`tsconfig.app.json`: App-specific TypeScript config.
`tsconfig.node.json`: Node.js TypeScript config.

Script	Description
`dev`	Starts the development server.
`build`	Builds the application for production.
`preview`	Previews the production build.
`lint`	Lints the code using ESLint.
`type-check`	Checks for TypeScript errors.

axios: For making HTTP requests to the backend API with full TypeScript support (full-stack only).
lucide-react: A library of simply beautiful icons with TypeScript definitions.
react: A JavaScript library for building user interfaces with TypeScript support (v18+).
react-dom: Serves as the entry point to the DOM with TypeScript definitions.
react-router-dom: For handling typed routing in the React application (v6).
tailwindcss: A utility-first CSS framework v4 with TypeScript configuration.
vite: Fast build tool with TypeScript support and HMR.
vitest: Fast unit testing framework with TypeScript support.
@types/*: Type definitions for React, Node.js, and other libraries.

Create a `.env` file in the `client` directory and add the following variables:

Variable	Description
`VITE_APP_NAME`	The name of your application.
`VITE_API_URL`	The URL of the backend API.

The server is a robust Express.js application with Mongoose for MongoDB object modeling.

`src/server.ts`: The entry point of the Express server.
`src/config/connectDB.ts`: MongoDB connection logic with TypeScript.
`src/config/validateEnv.ts`: Environment variable validation with types.
`src/models/`: Mongoose schemas with TypeScript interfaces (.gitkeep).
`src/routes/`: API route definitions (index.ts with typed routes).
`src/middleware/`: Custom middleware with TypeScript (errorMiddleware.ts).
`src/controllers/`: Request handlers with TypeScript (.gitkeep for future use).
`src/types/`: TypeScript type definitions (index.ts).
`src/validation/`: Input validation with TypeScript (empty for now).
`src/__tests__/`: Server tests with TypeScript and setup configuration.
`src/utils/`: Utility functions with TypeScript (.gitkeep for future use).

Script	Description
`dev`	Starts the server in development mode with `tsx`.
`build`	Builds the application for production.
`start`	Starts the server in production mode.
`test`	Runs tests with `vitest`.
`lint`	Lints the code using ESLint.
`type-check`	Checks for TypeScript errors.

compression: For compressing HTTP responses with typed middleware.
cors: For enabling Cross-Origin Resource Sharing with TypeScript configuration.
dotenv: For loading environment variables with type safety.
express: A fast, unopinionated, minimalist web framework with full TypeScript support.
express-rate-limit: For rate-limiting requests with typed configuration.
express-validator: For validating incoming request data with TypeScript types.
helmet: For securing Express apps with typed security headers.
mongoose: An Object Data Modeling (ODM) library with comprehensive TypeScript schemas.
morgan: For logging HTTP requests with typed middleware.
tsx: A TypeScript execution and scripting tool for development.
typescript: The TypeScript compiler with strict configuration.
vitest: Fast testing framework with full TypeScript support.
@types/*: Comprehensive type definitions for Node.js, Express, MongoDB, and other libraries.
@types/bun: Automatically added when using bun package manager.

Create a `.env` file in the `server` directory and add the following variables:

Variable	Description
`PORT`	The port the server will run on.
`NODE_ENV`	The environment (`development` or `production`).
`MONGODB_URI`	The connection string for your MongoDB database.
`CORS_ORIGIN`	The URL of the client application.