Folder Structure

When you open your project in your favourite code editor ( Let's say VSCode ), the might see that the folder structure looks something like this:

⚠️
You might notice that certain folders or files, such as .vscode, may or may not be present in your project.
_templates // Generation templates used with Hygen to automate creating of new workspaces
.changeset // a build tool that works with multi-package repos, or single-package repos to help you version and publish your code
.circleci // Ensuring all packages in the project build correctly and pass their tests.
.docker // Used in the context of a Docker setup with NGINX
.husky // Configures pre-commit hook using Husky for Git lifecycle events
.vscode // Configurations for Visual Studio Code editor settings and preferences
apps // We will check it later
capistrano // Automates deployment tasks for web applications
capistrano-pm2 // Automates deployment tasks for web applications
node_modules // Contains dependencies & 3rd party packages installed for a the project
packages // Contains configurations for the console and core package
patches // Provides modifications or fixes for existing code or dependencies
scripts // Contains files that handles operations for services
.dockerignore // Specifies files and directories to exclude during Docker builds
.drone.yml // Defines CI/CD pipeline configuration for the Drone CI tool
.editorconfig // Provides consistent coding styles across different editors and IDEs
.env // Containing environment variables for Docker
.eslintignore // Lists files and directories to exclude from ESLint linting
.eslintrc.json // Configures ESLint rules and settings for code linting
.gitignore // Lists files and directories to exclude from Git
.hygen.js // Configuration file for Hygen, a code generator tool
.prettierignore // Specifies files and directories to exclude from Prettier formatting
.prettierrc.json // Configures Prettier code formatting rules and settings
babel.config.js // Configuration file for Babel, a JavaScript compiler
docker-compose-dev.yml // Defines the services for Docker Compose in DEV environment
docker-compose.yml // Defines the services, networks, and volumes for Docker Compose
Dockerfile // Contains instructions for building a Docker image
package.json // Manifest file that defines dependencies, scripts, and metadata for the project
pm2.production.config.js // Configuration file for PM2, a process manager for Node.js applications in production
README.md // Documentation file providing an overview and instructions for the project
sonar-project.properties // a SonarQube configuration file that sets up automated code quality analysis for the Vactory Next.js project
tsconfig.json // Configuration file for TypeScript, a typed superset of JavaScript
yarn.lock // Lock file generated by Yarn, specifying exact versions of dependencies for reproducible builds

Now, let's examine the folder structure within the apps directory. We will use starter as an example since it serves as the starting point for creating/cloning new projects:

apps // this folder contains multiple projects/workspaces
|------ documentation // a workspace responsible for documentations ( the one you are reading now )
|------ starter // a workspace responsible for Vactory Main project
|------|------ .next // Generated build output folder for Next.js project
|------|------ .runtime // Internal folder for Next.js runtime files
|------|------ .storybook // Configuration files for Storybook, a UI development environment
|------|------ components // Reusable UI components folder
|------|------ database // Contaning generated Admin Console flags
|------|------ icons // Folder for storing icon assets
|------|------ pages // Folder containing Next.js page components
|------|------ public // Static assets folder accessible from the browser
|------|------ styles // Folder for global styles and CSS modules
|------|------ themes // Multi-Themes configuration folder
|------|------ .env // Local Environment variables file
|------|------ .env.example // Example file for environment variables
|------|------ .gitignore // Lists files and directories to exclude from Git
|------|------ .prettierignore // Specifies files/directories to be excluded from Prettier code formatting
|------|------ .next-env.d.ts // TypeScript declaration file that provides type definitions
|------|------ next.config.js // Custom configuration file for Next.js
|------|------ package.json // Manifest file defining project dependencies and scripts
|------|------ postcss.config.js // Configuration file for PostCSS, a CSS preprocessor
|------|------ preview.sh // A bash script that prepares a standalone Next.js deployment
|------|------ project.config.js // A Central configuration file that defines core settings for the Vactory Next.js application, including multilingual support, menus, image optimization settings, performance options, and security headers.
|------|------ project.redirects.csv // CSV file for managing redirects in the project
|------|------ project.redirects.js // JavaScript file for managing redirects in the project
|------|------ server-dev.js // Development Node server to run Starter workspace
|------|------ server.js // Production Node server to run Starter workspace
|------|------ tailwind.config.js // Configuration file for Tailwind CSS, a utility-first CSS framework
|------|------ tsconfig.json // TypeScript configuration file for Next.js project
IntroductionReact.js Overview