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
| | └── ...
| |
| ├── hooks // contains all the custom hooks
| | └── ...
| |
| ├── config // configuration files
| | └── ...
| |
| ├── data // static demo data
| | └── ...
| |
| ├── 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
| | └── ...
| └── ...
└── ...