WorkSpaces Structure

Isomorphic workspace structure

Basically it's a Next.js project structure with some additional directories and files.

├── public                  // Statically served contents
|  └── ...
|
├── src
|  ├── app                  // App router
|  |  ├── (hydrogen)        // Layout type, contains all the pages of its own
|  |  |  └── ...
|  |  ├── auth              // Authentication pages
|  |  ├── Shared            // Contains all common elements between layouts
|  |  ├── multi-step        // Multi step form page
|  |  ├── shared            // Contains all the common UI components that are being used by multiple layouts
|  |  ├── globals.css       // Global styles
|  |  ├── layout.tsx        // Main layout file
|  |  ├── fonts.ts          // Contains all the font imports
|  |  ├── not-found.tsx     // A layout-specific error page to render when gets 404 error.
|  |
|  ├── config               // configuration files
|  |  └── ...
|  |
|  ├── data                 // static demo data
|  |  └── ...
|  |
|  ├── layouts              // contains layout specific components
|  |  └── ...
|  |
├── .env.local.example      // contains environment variables
├── .eslintrc.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
└── ...

Isomorphic-intl workspace structure

Basically it's a Next.js project structure with Internationalization support and some additional directories and files.

├── messages                // Contains Translation files
|  └── ...
|
├── public                  // Statically served contents
|  └── ...
|
├── src
|  ├── app                  // App router
|  |  ├── [locale]          // This is for language param support in the URL recommended by Next.js
|  |  |  ├── (hydrogen)     // Layout type, contains all the pages of its own
|  |  |  ├── globals.css    // Global styles
|  |  |  └── ...
|  |  |
|  |  ├── api               // Contains all the API related files
|  |  |
|  |  ├── shared            // Contains all the common UI components that are being used by multiple layouts
|  |  └── fonts.ts          // Contains all the font imports
|  |
|  ├── config               // configuration files
|  |  └── ...
|  |
|  ├── data                 // static demo data
|  |  └── ...
|  |
|  ├── i18n                 // Translation related functional files
|  |  └── ...
|  |
|  ├── layouts              // contains layout specific components
|  |  └── ...
|  |
|  ├── auth.ts              // Contains authentication related configurations
|  |
|  ├── middleware.ts        // Contains Authentication and Internationalization related middlewares
|  |
├── .env.local.example      // contains environment variables
├── .eslintrc.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
└── ...

Isomorphic-starter workspace structure

Basically it's a Next.js project structure with some additional directories and files. It's a fresh starter pack for isomorphic without any additional features.

├── public                  // Statically served contents
|  └── ...
|
├── src
|  ├── app                  // App router
|  |  ├── shared            // Contains all the common UI components that are being used by multiple layouts
|  |  ├── globals.css       // Global styles
|  |  ├── layout.tsx        // Main layout file
|  |  ├── page.tsx          // Main page file
|  |  ├── fonts.ts          // Contains all the font imports
|  |  ├── not-found.tsx     // A layout-specific error page to render when gets 404 error.
|  |  └── ...
|  |
|  ├── config               // configuration files
|  |  └── ...
|  |
|  ├── data                 // static demo data
|  |  └── ...
|  |
|  ├── layouts              // contains layout specific components
|  |  └── ...
|  |
├── .env.local.example      // contains environment variables
├── .eslintrc.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
└── ...

Isomorphic-dnd workspace structure

Basically it's a Next.js project structure with some additional directories and files. It's a fresh starter pack for isomorphic without any additional features. It contains Affiliate dashboard with Drag & Drop sidebar and dashboard widgets.

├── public                  // Statically served contents
|  └── ...
|
├── src
|  ├── app                  // App router
|  |  ├── shared            // Contains all the common UI components that are being used by multiple layouts
|  |  ├── globals.css       // Global styles
|  |  ├── layout.tsx        // Main layout file
|  |  ├── page.tsx          // Main page file
|  |  ├── fonts.ts          // Contains all the font imports
|  |  └── ...
|  |
|  ├── config               // configuration files
|  |  └── ...
|  |
|  ├── data                 // static demo data
|  |  └── ...
|  |
|  ├── layouts              // contains layout specific components
|  |  └── ...
|  |
├── .env.local.example      // contains environment variables
├── .eslintrc.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 inside every workspace 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
|  |  └── ...
|  └── ...
└── ...