JavaScript Template

The JavaScript template provides a solid foundation for your MERN stack application with modern features and flexible initialization options.

Client (Frontend)

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

`src/main.jsx`: The entry point of the React application.
`src/App.jsx`: The root component where routing is handled.
`src/Layout.jsx`: Layout wrapper component with navigation and theme support.
`src/pages/`: Contains the page components (Demo.jsx, NotFound.jsx).
`src/components/`: Reusable React components including Navigation.jsx.
`src/components/ui/`: UI components like ThemeToggle.jsx.
`src/hooks/`: Custom React hooks (useTheme.js).
`src/config/`: Configuration files (constants.js).
`src/global.css`: Global styles and Tailwind CSS imports.
`vite.config.js`: Vite configuration file.
`eslint.config.js`: ESLint configuration with modern flat 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.

axios: For making HTTP requests to the backend API (full-stack only).
lucide-react: A library of simply beautiful icons for modern UI.
react: A JavaScript library for building user interfaces (v18+).
react-dom: Serves as the entry point to the DOM and server renderers for React.
react-router-dom: For handling client-side routing in the React application (v6).
tailwindcss: A utility-first CSS framework v4 with built-in dark mode.
vite: Fast build tool with hot module replacement.
vitest: Fast unit testing framework for Vite projects.

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.js`: The entry point of the Express server.
`src/config/connectDB.js`: MongoDB connection logic.
`src/config/validateEnv.js`: Environment variable validation.
`src/models/`: Mongoose schemas for your database models (.gitkeep).
`src/routes/`: API route definitions (index.js with health check).
`src/middleware/`: Custom middleware for error handling (errorMiddleware.js).
`src/controllers/`: Request handlers (.gitkeep for future use).
`src/validation/`: Input validation handlers (validationHandler.js).
`src/__tests__/`: Server tests with setup configuration.
`src/utils/`: Utility functions (.gitkeep for future use).

Script	Description
`start`	Starts the server in production mode.
`dev`	Starts the server in development mode with `nodemon`.
`test`	Runs tests with `vitest`.

compression: For compressing HTTP responses to improve performance.
cors: For enabling Cross-Origin Resource Sharing with configurable options.
dotenv: For loading environment variables from a `.env` file.
express: A fast, unopinionated, minimalist web framework for Node.js.
express-rate-limit: For rate-limiting requests to prevent abuse.
express-validator: For validating and sanitizing incoming request data.
helmet: For securing Express apps by setting security-related HTTP headers.
mongoose: An Object Data Modeling (ODM) library for MongoDB with schema validation.
morgan: For logging HTTP requests in development.
nodemon: For automatic server restart during development.
vitest: Fast testing framework for server-side code.

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.