Project Structure

File tree

├── public              // Staticly served content
|  └── ...
|
├── src
|  ├── app                  // App router
|  |  ├── (hydrogen)        // Layout type, contains all the pages of it's own
|  |  |  └── ...
|  |  ├── auth              // Authentication pages
|  |  ├── multi-step        // Multi step form page
|  |  ├── shared            // Contains all the common UI components that are being used by multiple layouts
|  |  ├── gloabl.css        // Global styles
|  |  ├── layout.tsx        // Main layout file
|  |  ├── not-found.tsx     // A layout-specific error page to render when gets 404 error.
|  |
|  ├── components           // contains all the common components here
|  |  └── ...
|  |
|  ├── config               // configuration files
|  |  └── ...
|  |
|  ├── data                 // static demo data
|  |  └── ...
|  |
|  ├── hooks                // contains all the custom hooks
|  |  └── ...
|  |
|  ├── layouts              // contains layout specific components
|  |  └── ...
|  |
|  ├── utils                // contains utility methods
|  |  └── ...
|  |
├── .env.local.example      // contains environment variables
├── .eslintrc.json.json     // eslint configuration file
├── .gitignore              // gitignore file
├── .prettierignore         // prettierignore file
├── next.config.js          // next.js configuration file
├── package.json            // manifest file
├── pnpm-lock.yaml          // a lock file generated by the pnpm package manager.
├── postcss.config.js       // postcss configuration file
├── prettier.config.js      // prettier configuration file
├── tailwind.config.js      // tailwind configuration file
├── tsconfig.json           // typescript configuration file
└── ...

Shared

The shared directory contains all common elements between layouts, such as pages or forms, so that you won't have to duplicate your code across the layouts.

├── src
|  ├── app                  // App router
|  |  ├── shared
|  |  |  ├── account-settings
|  |  |  ├── analytics-dashboard
|  |  |  ├── appointment
|  |  |  ├── auth-layout
|  |  |  ├── chart-widgets
|  |  |  ├── drawer-views
|  |  |  ├── ecommerce
|  |  |  ├── email-templates
|  |  |  ├── event-calendar
|  |  |  ├── executive
|  |  |  ├── explore-flight
|  |  |  ├── explore-listing
|  |  |  ├── explore-nft
|  |  |  ├── file
|  |  |  ├── financial
|  |  |  ├── icons
|  |  |  ├── invoice
|  |  |  ├── logistics
|  |  |  ├── modal-views
|  |  |  ├── multi-step
|  |  |  ├── newsletter
|  |  |  ├── point-of-sale
|  |  |  ├── profile
|  |  |  ├── roles-permissions
|  |  |  ├── support
|  |  └── ...
|  └── ...
└── ...