Project Structure

Every generated project follows a clean, consistent structure. Learn how project codebases are organized, where to find components, pages, and styles, and how to extend them locally.

Meku generates a clean, consistent project structure for every prompt. This structure makes it easy to navigate, edit, and extend the app locally or in GitHub.

Below is an example project structure generated from a dashboard prompt from the " How Meku Works" section.

my-project/
├── src/
│   ├── components/
│   │   ├── AnalyticsCard.jsx
│   │   ├── Footer.jsx
│   │   ├── Navbar.jsx
│   │   └── Sidebar.jsx
│   ├── pages/
│   │   ├── Home.jsx
│   │   └── NotFound.jsx
│   ├── App.jsx
│   ├── index.html
│   └── index.jsx
├── package.json
├── postcss.config.mjs
├── styles.css
├── tailwind.config.js
└── vite.config.js

Key Folders and Files

Every Meku project includes a predictable folder and file layout. This helps developers understand where components, pages, and configs.

src/

Main application source folder.

  • components/ Contains reusable React components such as Navbar, Sidebar, AnalyticsCard, and Footer.
  • pages/ Defines page-level routes such as Home.jsx and NotFound.jsx.
  • App.jsx Entry point for the React app. Manages routing and layout.
  • index.jsx Bootstraps the React app, mounts it to the DOM.
  • index.html Base HTML template where the React app is injected.

Together, these files form the core of the project.

Root Files

These files define project configuration and build settings.

  • package.json: Project metadata, dependencies, and scripts.
  • tailwind.config.js: Tailwind CSS configuration. Customize themes, colors, and utilities here.
  • styles.css: Global styles and Tailwind base imports.
  • postcss.config.mjs: PostCSS setup for Tailwind and other plugins.
  • vite.config.js: Build and dev server configuration for Vite.

These root files ensure the project runs consistently.

Extending the Structure

You can easily extend the generated codebase to meet your specific needs.

  • Add new components inside src/components/.
  • Create new pages inside src/pages/ and update routing in App.jsx.
  • Use tailwind.config.js to enforce the design system.
  • Update package.json for new dependencies.
  • Configure .env files (not included by default) for API keys and secrets.

This keeps projects flexible while preserving the standard structure.

Best Practices

Follow these guidelines to keep the project maintainable.

  • Keep components small and reusable.
  • Organize pages by feature or route.
  • Use Git for version control of this structure.
  • Leverage Tailwind configuration for consistent styling.
  • Use Vite scripts (npm run dev, npm run build) for local development and deployment.

Applying these practices helps ensure scalability as the project grows.

Project Structure - Documentation | Meku.dev