Project Structure

Full-Stack Structure (Both Client & Server)

When you choose "both" during initialization, you get a monorepo structure:

• client/: Contains the React frontend application with Vite and Tailwind CSS.
• server/: Contains the Express backend application with MongoDB integration.
• .gitignore: Specifies which files and folders to ignore in Git.
• package.json: The root `package.json` file with workspaces and concurrent scripts.
• pnpm-workspace.yaml: Workspace configuration (when using pnpm).
• README.md: Comprehensive setup and usage instructions.

Client-Only Structure

When you choose "client only", you get a focused React application:

• src/: React application source code in project root.
• public/: Static assets and index.html.
• src/components/: Reusable React components.
• src/pages/: Page components (Demo content removed).
• vite.config.js/ts: Vite configuration.
• package.json: Client-focused dependencies and scripts.

Server-Only Structure

When you choose "server only", you get a focused Express API:

• src/: Express application source code in project root.
• src/config/: Database and configuration files.
• src/models/: Mongoose schemas and models.
• src/routes/: API route definitions.
• src/middleware/: Custom middleware functions.
• package.json: Server-focused dependencies and scripts.

Client Directory Structure

• public/: Contains static assets like images and fonts.
• src/: Contains the source code of the React application.
• src/components/: Reusable React components (Navigation, etc.).
• src/components/ui/: UI components like ThemeToggle.
• src/pages/: Page components (Demo, NotFound).
• src/hooks/: Custom React hooks (useTheme).
• src/config/: Configuration files (constants).
• src/App.jsx / App.tsx: The root component with routing.
• src/Layout.jsx / Layout.tsx: Layout wrapper with navigation.
• src/main.jsx / main.tsx: The entry point of the React application.
• vite.config.js / vite.config.ts: Vite configuration file.
• eslint.config.js: ESLint configuration with modern flat config.

Server Directory Structure

• src/: Contains the source code of the Express application.
• src/config/: Configuration files (connectDB, validateEnv).
• src/controllers/: Request handlers (ready for your logic).
• src/middleware/: Custom middleware (errorMiddleware).
• src/models/: Mongoose schemas for your database models.
• src/routes/: API route definitions (includes health check).
• src/validation/: Input validation handlers (JS only).
• src/types/: TypeScript type definitions (TS only).
• src/__tests__/: Server tests with setup configuration.
• src/utils/: Utility functions (ready for your code).
• src/server.js / server.ts: The entry point of the Express server.
• jest.config.js: Jest testing configuration.
• eslint.config.js: ESLint configuration.