Markdown-Beispiele

# Basic Text Formatting

## Headings

# H1 Heading
## H2 Heading
### H3 Heading
#### H4 Heading
##### H5 Heading
###### H6 Heading

## Text Emphasis

*This text is italicized*
_This text is also italicized_

**This text is bold**
__This text is also bold__

***This text is bold and italicized***
___This text is also bold and italicized___

~~This text is strikethrough~~

## Lists

### Unordered Lists

* Item 1
* Item 2
  * Nested item 2.1
  * Nested item 2.2
* Item 3

### Ordered Lists

1. First item
2. Second item
   1. Nested item 2.1
   2. Nested item 2.2
3. Third item

## Links

[Inline link](https://www.example.com)
[Link with title](https://www.example.com "Example Website")

<https://www.example.com>

<[email protected]>

## Images

![Alt text](https://via.placeholder.com/300x200 "Image Title")
![Inline image](image.jpg)

## Code

Inline code: `console.log('Hello, World!')`

```javascript
// Code block
function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet('World'));
```

## Blockquotes

> This is a blockquote.
>
> It can span multiple lines.
>
> > And it can be nested.

## Horizontal Rule

---

***

## Tables

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |

| Left align | Center align | Right align |
| :--- | :---: | ---: |
| Content 1 | Content 2 | Content 3 |
| Content 4 | Content 5 | Content 6 |

# My Awesome Project

[![Build Status](https://img.shields.io/badge/build-passing-brightgreen.svg)](https://github.com/user/repo/actions)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
[![Version](https://img.shields.io/badge/version-1.0.0-orange.svg)](https://github.com/user/repo/releases)

A brief description of what this project does and who it's for.

## Features

- ✨ Feature 1: Description of awesome feature
- 🚀 Feature 2: Another amazing capability
- 🔧 Feature 3: Powerful functionality
- 📱 Feature 4: Mobile-friendly design
- 🔒 Feature 5: Secure implementation

## Installation

### Prerequisites

- Node.js (v14 or higher)
- npm or yarn
- Git

### Setup

1. Clone the repository:
   ```bash
   git clone https://github.com/username/my-awesome-project.git
   cd my-awesome-project
   ```

2. Install dependencies:
   ```bash
   npm install
   # or
   yarn install
   ```

3. Configure environment variables:
   ```bash
   cp .env.example .env
   # Edit .env with your configuration
   ```

4. Run the application:
   ```bash
   npm start
   # or
   yarn start
   ```

## Usage

Basic usage example:

```javascript
const myApp = require('my-awesome-project');

// Initialize the application
const app = new myApp({
    apiKey: 'your-api-key',
    environment: 'development'
});

// Use the application
app.doSomething();
```

## Configuration

The application can be configured using environment variables:

| Variable | Description | Default |
|----------|-------------|---------|
| `API_KEY` | Your API key | `null` |
| `PORT` | Server port | `3000` |
| `ENV` | Environment | `development` |
| `LOG_LEVEL` | Logging level | `info` |

## API Reference

### Methods

#### `app.init(options)`

Initialize the application with options.

**Parameters:**
- `options` (Object): Configuration options
  - `apiKey` (string): Your API key
  - `environment` (string): Environment name

**Returns:** Promise<void`

#### `app.getData(id)`

Retrieve data by ID.

**Parameters:**
- `id` (string): Data identifier

**Returns:** Promise<Object`

## Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a feature branch: `git checkout -b feature/amazing-feature`
3. Commit your changes: `git commit -m 'Add amazing feature'`
4. Push to the branch: `git push origin feature/amazing-feature`
5. Open a Pull Request

### Development

To set up the development environment:

```bash
# Install development dependencies
npm install --dev

# Run tests
npm test

# Run linting
npm run lint

# Start development server
npm run dev
```

## Testing

Run the test suite:

```bash
npm test

# Run with coverage
npm run test:coverage

# Run integration tests
npm run test:integration
```

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## Support

- 📧 Email: [email protected]
- 🐛 Issues: [GitHub Issues](https://github.com/user/repo/issues)
- 📖 Documentation: [Docs Site](https://docs.example.com)
- 💬 Discord: [Community Server](https://discord.gg/example)

## Acknowledgments

- Thanks to [Awesome Library](https://github.com/example/library) for the core functionality
- Inspired by [Cool Project](https://github.com/example/cool-project)
- Built with ❤️ by the community

---
title: "Getting Started with Modern Web Development"
date: "2024-01-15"
author: "Jane Smith"
category: "Web Development"
tags: ["JavaScript", "React", "Web Development"]
description: "A comprehensive guide to starting your journey in modern web development"
image: "/images/web-dev-hero.jpg"
---

# Getting Started with Modern Web Development

> "The best way to learn is by doing. Let's build something amazing together!"

Web development has evolved dramatically over the past decade. Whether you're a complete beginner or an experienced developer looking to update your skills, this guide will help you navigate the modern web development landscape.

## Table of Contents

- [Frontend Technologies](#frontend-technologies)
- [Backend Technologies](#backend-technologies)
- [Development Tools](#development-tools)
- [Best Practices](#best-practices)
- [Conclusion](#conclusion)

## Frontend Technologies

### HTML5 & CSS3

The foundation of web development starts with HTML and CSS:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Web App</title>
</head>
<body>
    <header>
        <h1>Welcome to Modern Web Development</h1>
    </header>
    <main>
        <p>This is a semantic HTML structure.</p>
    </main>
</body>
</html>
```

### JavaScript ES6+

Modern JavaScript provides powerful features:

```javascript
// ES6+ features
const apiUrl = 'https://api.example.com/data';

// Async/await for API calls
async function fetchData() {
    try {
        const response = await fetch(apiUrl);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

// Arrow functions and destructuring
const processData = ({ items = [], filters = {} }) => {
    return items.filter(item => {
        return Object.entries(filters).every(([key, value]) =>
            item[key] === value
        );
    });
};
```

### React Framework

React continues to dominate the frontend landscape:

```jsx
import React, { useState, useEffect } from 'react';

const UserProfile = ({ userId }) => {
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetchUserData(userId)
            .then(setUser)
            .finally(() => setLoading(false));
    }, [userId]);

    if (loading) return <div>Loading...</div>;

    return (
        <div className="user-profile">
            <img src={user.avatar} alt={user.name} />
            <h2>{user.name}</h2>
            <p>{user.email}</p>
        </div>
    );
};
```

## Backend Technologies

### Node.js & Express

Node.js has become the go-to choice for JavaScript backend development:

```javascript
const express = require('express');
const cors = require('cors');
const helmet = require('helmet');

const app = express();

// Middleware
app.use(helmet());
app.use(cors());
app.use(express.json());

// Routes
app.get('/api/users', async (req, res) => {
    try {
        const users = await User.find();
        res.json({
            success: true,
            data: users
        });
    } catch (error) {
        res.status(500).json({
            success: false,
            error: error.message
        });
    }
});

// Start server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});
```

### Database Integration

Modern applications need robust data storage:

```javascript
// MongoDB with Mongoose
const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
    name: {
        type: String,
        required: true,
        trim: true
    },
    email: {
        type: String,
        required: true,
        unique: true,
        lowercase: true
    },
    createdAt: {
        type: Date,
        default: Date.now
    }
});

const User = mongoose.model('User', userSchema);

// Example usage
const createUser = async (userData) => {
    try {
        const user = new User(userData);
        await user.save();
        return user;
    } catch (error) {
        throw new Error(`Failed to create user: ${error.message}`);
    }
};
```

## Development Tools

### Package Management

Modern development relies heavily on package managers:

```bash
# Initialize a new project
npm init -y

# Install production dependencies
npm install react express mongodb

# Install development dependencies
npm install --save-dev eslint prettier jest

# Run scripts
npm run dev
npm test
npm build
```

### Version Control with Git

```bash
# Essential Git commands
git init                    # Initialize repository
git add .                  # Stage all changes
git commit -m "Initial commit"  # Commit changes
git push origin main       # Push to remote
git checkout -b feature-branch  # Create new branch
git merge feature-branch   # Merge branches
```

## Best Practices

### 1. Code Organization

```
src/
├── components/     # React components
├── utils/          # Utility functions
├── services/       # API services
├── hooks/          # Custom hooks
├── styles/         # CSS/styling
├── tests/          # Test files
└── index.js        # Entry point
```

### 2. Performance Optimization

```javascript
// Use React.memo for component optimization
const ExpensiveComponent = React.memo(({ data }) => {
    // Component logic
});

// Implement lazy loading
const LazyComponent = React.lazy(() => import('./LazyComponent'));

// Use useMemo for expensive calculations
const processedData = useMemo(() => {
    return rawData.filter(item => item.active).map(processItem);
}, [rawData]);
```

### 3. Security Best Practices

```javascript
// Input validation
const validateInput = (input) => {
    if (!input || typeof input !== 'string') {
        throw new Error('Invalid input');
    }
    return input.trim();
};

// Secure API keys
const config = {
    apiKey: process.env.API_KEY, // Never hardcode API keys
    dbPassword: process.env.DB_PASSWORD
};
```

## Conclusion

Modern web development offers incredible tools and frameworks that make building applications more efficient and enjoyable. The key is to:

1. **Start with the fundamentals** - Master HTML, CSS, and JavaScript
2. **Choose the right tools** - Select frameworks that fit your project needs
3. **Follow best practices** - Write clean, maintainable code
4. **Keep learning** - The web development landscape is constantly evolving

Remember, the journey of becoming a proficient web developer is a marathon, not a sprint. Take it one step at a time, build projects, and don't be afraid to experiment with new technologies.

---

### Additional Resources

- [MDN Web Docs](https://developer.mozilla.org/) - Comprehensive web development documentation
- [FreeCodeCamp](https://www.freecodecamp.org/) - Free coding courses and projects
- [Dev.to](https://dev.to/) - Developer community and articles
- [Stack Overflow](https://stackoverflow.com/) - Q&A for programming questions

### Join the Conversation

Have questions or want to share your web development journey? Leave a comment below or connect with me on [Twitter](https://twitter.com/yourhandle)!

*Happy coding! 🚀*

# API Documentation

## Overview

The User Management API provides comprehensive endpoints for managing user accounts, authentication, and profile management in modern web applications.

**Base URL:** \`https://api.example.com/v1\`

**Authentication:** Bearer Token (JWT)

## Table of Contents

- [Authentication](#authentication)
- [Endpoints](#endpoints)
- [Error Handling](#error-handling)
- [Rate Limiting](#rate-limiting)
- [Data Models](#data-models)
- [SDK Examples](#sdk-examples)

## Authentication

### Obtaining API Keys

To use this API, you'll need an API key. Contact our [developer support](mailto:[email protected]) to get access.

### JWT Authentication

All API requests must include a valid JWT token in the Authorization header:

```http
Authorization: Bearer <your-jwt-token>
```

### Token Refresh

Access tokens expire after 24 hours. Use the refresh endpoint to generate new tokens:

```http
POST /auth/refresh
Content-Type: application/json

{
    "refresh_token": "your-refresh-token"
}
```

## Endpoints

### Users

#### Create User

Create a new user account.

```http
POST /users
Content-Type: application/json
Authorization: Bearer <token>

{
    "email": "[email protected]",
    "password": "securePassword123!",
    "first_name": "John",
    "last_name": "Doe",
    "profile": {
        "date_of_birth": "1990-01-15",
        "phone_number": "+1-555-0123"
    }
}
```

**Response:**
```json
{
    "success": true,
    "data": {
        "id": "usr_123456789",
        "email": "[email protected]",
        "first_name": "John",
        "last_name": "Doe",
        "status": "active",
        "created_at": "2024-01-15T10:30:00Z",
        "updated_at": "2024-01-15T10:30:00Z"
    }
}
```

#### Get User

Retrieve user details by ID.

```http
GET /users/{user_id}
Authorization: Bearer <token>
```

**Path Parameters:**
- `user_id` (string, required): Unique identifier for the user

**Query Parameters:**
- `include` (string, optional): Comma-separated list of related data to include
  - Options: `profile`, `preferences`, `permissions`

**Example:**
```http
GET /users/usr_123456789?include=profile,preferences
```

#### Update User

Update user information.

```http
PUT /users/{user_id}
Content-Type: application/json
Authorization: Bearer <token>

{
    "first_name": "Jane",
    "profile": {
        "phone_number": "+1-555-0124"
    }
}
```

#### List Users

Retrieve a paginated list of users.

```http
GET /users?page=1&limit=20&status=active&sort=created_at:desc
Authorization: Bearer <token>
```

**Query Parameters:**
- `page` (integer, optional): Page number (default: 1)
- `limit` (integer, optional): Items per page (default: 20, max: 100)
- `status` (string, optional): Filter by status
  - Options: `active`, `inactive`, `suspended`
- `sort` (string, optional): Sort field and direction
  - Format: `field:direction`
  - Options: `created_at`, `updated_at`, `email`, `first_name`
  - Directions: `asc`, `desc`

### Authentication

#### Login

Authenticate user and receive access tokens.

```http
POST /auth/login
Content-Type: application/json

{
    "email": "[email protected]",
    "password": "userPassword123!",
    "remember_me": false
}
```

**Response:**
```json
{
    "success": true,
    "data": {
        "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
        "refresh_token": "def50200...7a5b",
        "token_type": "Bearer",
        "expires_in": 86400,
        "user": {
            "id": "usr_123456789",
            "email": "[email protected]",
            "first_name": "John",
            "last_name": "Doe"
        }
    }
}
```

#### Logout

Invalidate the current access token.

```http
POST /auth/logout
Authorization: Bearer <token>
```

#### Change Password

Change user password.

```http
POST /auth/change-password
Content-Type: application/json
Authorization: Bearer <token>

{
    "current_password": "oldPassword123!",
    "new_password": "newPassword456!"
}
```

## Error Handling

### HTTP Status Codes

| Status Code | Meaning | Description |
|-------------|---------|-------------|
| 200 | OK | Request successful |
| 201 | Created | Resource created successfully |
| 400 | Bad Request | Invalid request data |
| 401 | Unauthorized | Authentication required |
| 403 | Forbidden | Insufficient permissions |
| 404 | Not Found | Resource not found |
| 409 | Conflict | Resource conflict |
| 429 | Too Many Requests | Rate limit exceeded |
| 500 | Internal Server Error | Server error |

### Error Response Format

All error responses follow this format:

```json
{
    "success": false,
    "error": {
        "code": "VALIDATION_ERROR",
        "message": "Invalid request data",
        "details": [
            {
                "field": "email",
                "message": "Email is required and must be valid"
            },
            {
                "field": "password",
                "message": "Password must be at least 8 characters"
            }
        ]
    },
    "request_id": "req_123456789"
}
```

### Common Error Codes

- `VALIDATION_ERROR`: Request data validation failed
- `AUTHENTICATION_FAILED`: Invalid credentials
- `AUTHORIZATION_REQUIRED`: Authentication required
- `RESOURCE_NOT_FOUND`: Requested resource not found
- `RATE_LIMIT_EXCEEDED`: API rate limit exceeded
- `INTERNAL_SERVER_ERROR`: Unexpected server error

## Rate Limiting

### Rate Limits

- **Standard Tier:** 1,000 requests per hour
- **Premium Tier:** 10,000 requests per hour
- **Enterprise Tier:** Unlimited requests

### Rate Limit Headers

API responses include rate limiting headers:

```http
X-RateLimit-Limit: 1000
X-RateLimit-Remaining: 999
X-RateLimit-Reset: 1642291200
```

### Handling Rate Limits

When rate limited, the API returns a `429 Too Many Requests` response:

```json
{
    "success": false,
    "error": {
        "code": "RATE_LIMIT_EXCEEDED",
        "message": "API rate limit exceeded. Try again later.",
        "retry_after": 3600
    }
}
```

## Data Models

### User Object

```json
{
    "id": "usr_123456789",
    "email": "[email protected]",
    "first_name": "John",
    "last_name": "Doe",
    "status": "active",
    "profile": {
        "date_of_birth": "1990-01-15",
        "phone_number": "+1-555-0123",
        "address": {
            "street": "123 Main St",
            "city": "New York",
            "state": "NY",
            "postal_code": "10001",
            "country": "US"
        }
    },
    "preferences": {
        "language": "en",
        "timezone": "America/New_York",
        "notifications": {
            "email": true,
            "sms": false,
            "push": true
        }
    },
    "created_at": "2024-01-15T10:30:00Z",
    "updated_at": "2024-01-15T10:30:00Z",
    "last_login_at": "2024-01-20T09:15:00Z"
}
```

## SDK Examples

### JavaScript/Node.js

```javascript
const { UserAPI } = require('@example/api-sdk');

const client = new UserAPI({
    apiKey: process.env.API_KEY,
    baseURL: 'https://api.example.com/v1'
});

// Create a user
async function createUser(userData) {
    try {
        const user = await client.users.create(userData);
        console.log('User created:', user);
        return user;
    } catch (error) {
        console.error('Error creating user:', error.message);
    }
}

// Get user with includes
async function getUserWithProfile(userId) {
    try {
        const user = await client.users.get(userId, {
            include: ['profile', 'preferences']
        });
        return user;
    } catch (error) {
        if (error.code === 'RESOURCE_NOT_FOUND') {
            console.log('User not found');
        }
        throw error;
    }
}
```

### Python

```python
from example_api import UserAPI
from example_api.exceptions import APIError

client = UserAPI(
    api_key=os.environ.get('API_KEY'),
    base_url='https://api.example.com/v1'
)

# Create a user
try:
    user = client.users.create({
        'email': '[email protected]',
        'first_name': 'John',
        'last_name': 'Doe',
        'password': 'securePassword123!'
    })
    print(f"User created: {user.id}")
except APIError as e:
    print(f"API Error: {e.message}")

# List users with filters
users = client.users.list(
    status='active',
    sort='created_at:desc',
    limit=50
)
```

### cURL

```bash
# Create a user
curl -X POST https://api.example.com/v1/users \
     -H "Content-Type: application/json" \
     -H "Authorization: Bearer YOUR_TOKEN" \
     -d '{
         "email": "[email protected]",
         "first_name": "John",
         "last_name": "Doe",
         "password": "securePassword123!"
     }'

# Get user with includes
curl -X GET "https://api.example.com/v1/users/usr_123456789?include=profile,preferences" \
     -H "Authorization: Bearer YOUR_TOKEN"
```

## Support

- **Documentation:** [https://docs.example.com](https://docs.example.com)
- **API Status:** [https://status.example.com](https://status.example.com)
- **Support Email:** [[email protected]](mailto:[email protected])
- **Developer Community:** [https://community.example.com](https://community.example.com)

## Changelog

### v2.1.0 (2024-01-15)
- Added bulk user creation endpoint
- Improved error messages for validation failures
- Fixed issue with timezone handling

### v2.0.0 (2023-12-01)
- Major API redesign
- Added JWT authentication
- Removed deprecated endpoints

---

*Last updated: January 15, 2024*