Project Structure

Learn about the recommended file organization for Nelgyfika projects.

Standard Project Layout

Projects follow an opinionated structure designed for scalability and maintainability.

Directory Tree


my-nelgyfika-app/
├── public/                  # Static assets
├── src/
│   ├── components/          # Reusable UI elements
│   ├── contexts/          # React context providers
│   ├── hooks/             # Custom React hooks
│   ├── layouts/           # Page layouts
│   ├── pages/             # Next.js style page files
│   ├── styles/            # Global stylesheets
│   ├── utils/             # Utility functions
│   ├── app/               # Framework-specific app directory
│   └── main.tsx           # Main application file
├── config/                # Configuration files
├── types/                 # TypeScript type definitions
├── .env                   # Environment variables
├── nelgyfika.config.js    # Framework configuration
├── tsconfig.json          # TypeScript config
└── package.json           # Dependencies and scripts

Framework-Specific Adjustments

Adapts to different frontend frameworks while maintaining the core structure.

React


src/
├── components/
├── context/
├── hooks/
├── App.jsx
├── main.jsx

Vue


src/
├── components/
├── composables/
├── App.vue
├── main.js

Configuration

Key configuration files that define the behavior of your project.


// nelgyfika.config.js
export default {
    // Framework configuration options
    framework: "react",
    
    // Application title
    title: "My Nelgyfika App",
    
    // Build configuration
    build: {
        outDir: "dist",
        target: "es2020"
    },
    
    // Plugin configuration
    plugins: [
        {
            name: "typescript",
            options: {
                tsconfigPath: "./tsconfig.json"
            }
        }
    ]
}

Best Practices

Component Organization

Keep components self-contained with separate files for styles, logic, and content.

Folder-Based Routing

Use nested directories for route structure in framework-agnostic projects.

Continue Learning

Installation

Learn how to set up a new project using our CLI tools or framework integrations.

View Installation Guide →

API Playground

Test API endpoints and see how they integrate with your project structure.

Try API Sandbox →