Full-Stack Development Fundamentals

Chapter 7: Basic Project Structure

7.1 Project Organization

Well-organized project structure makes code easier to navigate, maintain, and scale. A good structure separates concerns and groups related files together.

Typical Full-Stack Project Structure:

project-name/
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── styles/
│   │   ├── utils/
│   │   └── App.js
│   ├── public/
│   └── package.json
├── backend/
│   ├── src/
│   │   ├── controllers/
│   │   ├── models/
│   │   ├── routes/
│   │   ├── middleware/
│   │   └── server.js
│   └── package.json
├── database/
│   └── migrations/
├── docs/
├── .gitignore
└── README.md

Front-End Structure:

• components/: Reusable UI components
• pages/: Page-level components
• styles/: CSS/SCSS files
• utils/: Helper functions and utilities
• public/: Static assets (images, fonts)

Back-End Structure:

• controllers/: Request handling logic
• models/: Database models and schemas
• routes/: API route definitions
• middleware/: Request processing middleware
• config/: Configuration files

7.2 File Naming Conventions

Consistent naming conventions improve code readability and maintainability.

Naming Styles:

• camelCase: JavaScript variables and functions (userName, getUserData)
• PascalCase: JavaScript classes and React components (UserProfile, NavBar)
• kebab-case: File names and URLs (user-profile.js, api-routes.php)
• snake_case: Database tables and some languages (user_table, user_id)
• UPPER_CASE: Constants (API_KEY, MAX_USERS)

File Naming Best Practices:

• Use descriptive names that indicate purpose
• Keep names concise but clear
• Use consistent naming style throughout project
• Avoid special characters and spaces
• Use lowercase for file names (except for components)

Examples:

// Good naming
user-authentication.js
user-profile.component.jsx
api-routes.php
database-config.js

// Bad naming
file1.js
temp.js
myFile.js
FILE.JS

7.3 Configuration Files

Configuration files store settings and dependencies for your project.

Common Configuration Files:

• package.json: Node.js dependencies and scripts
• composer.json: PHP dependencies
• .env: Environment variables (never commit)
• .gitignore: Files to exclude from version control
• README.md: Project documentation
• webpack.config.js: Build tool configuration

.gitignore Best Practices:

# Dependencies
node_modules/
vendor/

# Environment files
.env
.env.local

# Build outputs
dist/
build/

# Logs
*.log
npm-debug.log*

# OS files
.DS_Store
Thumbs.db

7.4 Documentation

Good documentation helps team members understand and use your code.

README.md Should Include:

• Project description and purpose
• Installation instructions
• Setup and configuration steps
• How to run the project
• Project structure overview
• Contributing guidelines

Code Comments:

• Explain "why" not "what"
• Document complex logic
• Include parameter descriptions
• Add TODO notes for future improvements