Directory Structure and Naming Conventions

This document explains the directory structure and naming conventions used in the Fuse React Nextjs project. The project follows a modular approach based on route settings determined from config files. The directory structure and naming conventions are designed to make it easy to navigate and understand the codebase.

.
├── @auth
├── @fuse
├── @i18n
├── @mock-utils
├── app
│   ├── (control-panel)
│   │   ├── apps
│   │   ├── auth
│   │   ├── dashboards
│   │   ├── documentation
│   │   ├── layout.tsx
│   │   ├── sign-in
│   │   ├── sign-out
│   │   └── sign-up
│   ├── api
│   ├── auth
│   ├── layout.tsx
│   └── page.tsx
├── components
├── configs
├── contexts
├── store
├── styles
└── utils

The directory structure of this Fuse React Nextjs project is organized by feature and functionality, with each major section having its own directory.

Key Directories:

• app/: The main application directory using Next.js 13+ App Router.
• @auth/: AuthJs configuration and utilities.
• @fuse/: Fuse core components and utilities.
• @i18n/: Internationalization configuration and utilities.
• @mock-utils/: Mock utilities for data fetching and manipulation.
• components/: Reusable React components.
• configs/: Configuration files for various aspects of the application.
• contexts/: React context providers.
• store/: State management related files, likely using Redux.
• styles/: CSS and style-related files.
• utils/: Utility functions and scripts.

Naming Conventions:

• React components use PascalCase (e.g., MainLayout.tsx, PageTitle.tsx).
• Utility functions and configuration files use camelCase (e.g., apiFetch.ts, navigationConfig.ts).
• API routes and page components within the app/ directory use the page.tsx naming convention as per Next.js 13+ standards.
• Feature-specific components and utilities are grouped in directories named after the feature.

This structure supports a modular and scalable approach to building complex applications with Fuse React Nextjs, incorporating features like authentication, internationalization, and various UI components typical of an admin dashboard or control panel.