Kobelly/README.md

Kobelly Web Solutions

A professional Flask-based website for promoting small business web development services. Features multilanguage support (English, Dutch, French, German) and is fully dockerized for easy deployment.

Features

• 🌐 Multilanguage Support: English (EN), Dutch (NL), French (FR), German (DE)
• 📱 Responsive Design: Modern, mobile-friendly interface
• 🎨 Professional UI: Clean, modern design with Bootstrap 5
• 🐳 Docker Support: Easy containerization and deployment
• ⚡ Fast Performance: Optimized for speed and performance with minified assets
• 🔧 No Database Required: Simple, lightweight setup
• 🚀 Asset Optimization: CSS/JS minification with cache busting

Pages

• Home: Hero section, features, and service overview
• Services: Detailed service offerings with pricing information
• About: Company story, team, and values
• Contact: Contact form and business information

Quick Start

Local Development (Recommended)

1. Install Python dependencies:

   pip install -r requirements.txt
   

2. Build assets (optional, for production-like experience):

   make build
   

3. Run the application:

   python app.py
   

4. Access the website: Open your browser and go to http://localhost:5000

Using Make Commands

The project includes a Makefile for common tasks:

make help          # Show all available commands
make install       # Install dependencies
make build         # Build minified assets
make clean         # Clean old assets
make run           # Run development server
make run-prod      # Run production server
make deploy        # Clean and build assets
make dev-setup     # Setup development environment

# Docker commands
make docker-run    # Run production Docker container
make docker-run-dev # Run development Docker container
make docker-stop   # Stop production container
make docker-stop-dev # Stop development container
make docker-logs   # View production logs
make docker-logs-dev # View development logs

Docker Deployment

Production Mode (Default)

1. Build and run with Docker Compose:

   docker-compose up --build
   

2. Or build and run manually:

   docker build -t kobelly-website .
   docker run -p 5000:5000 kobelly-website
   

Development Mode

For local development with Docker (with live reload and debug mode):

1. Build and run development container:

   docker-compose -f docker-compose.dev.yml up --build
   

2. Or use Make commands:

   make docker-run-dev    # Start development container
   make docker-logs-dev   # View development logs
   make docker-stop-dev   # Stop development container
   

Development vs Production:

• Development: Debug mode enabled, live code reloading, unminified assets
• Production: Debug disabled, minified assets, optimized performance

Project Structure

Kobelly/
├── app.py                 # Main Flask application
├── requirements.txt       # Python dependencies
├── Dockerfile            # Docker configuration
├── docker-compose.yml    # Docker Compose configuration
├── Makefile              # Build and deployment commands
├── build_assets.py       # Asset minification script
├── babel.cfg             # Babel configuration for translations
├── static/               # Static assets
│   ├── css/              # CSS files
│   │   ├── main.css      # Main stylesheet
│   │   └── main.min.css  # Minified CSS (generated)
│   ├── js/               # JavaScript files
│   │   ├── main.js       # Main script
│   │   └── main.min.js   # Minified JS (generated)
│   └── images/           # Images and icons
├── templates/            # HTML templates
│   ├── base.html         # Base template with navigation
│   ├── index.html        # Homepage
│   ├── services.html     # Services page
│   ├── about.html        # About page
│   └── contact.html      # Contact page
└── translations/         # Translation files
    ├── en/LC_MESSAGES/messages.po
    ├── nl/LC_MESSAGES/messages.po
    ├── fr/LC_MESSAGES/messages.po
    └── de/LC_MESSAGES/messages.po

Multilanguage Support

The website supports four languages:

• 🇺🇸 English (EN) - Default
• 🇳🇱 Dutch (NL)
• 🇫🇷 French (FR)
• 🇩🇪 German (DE)

Users can switch languages using the language selector in the navigation bar. The language preference is stored in the session.

Customization

Content Updates

1. Text Content: Edit the HTML templates in the templates/ directory
2. Translations: Update the .po files in the translations/ directory
3. Styling: Modify the CSS in templates/base.html

Adding New Pages

1. Add a new route in app.py
2. Create a new template file in templates/
3. Add navigation link in templates/base.html

Updating Translations

1. Extract translatable strings:

   pybabel extract -F babel.cfg -o messages.pot .
   

2. Update translation files:

   pybabel update -i messages.pot -d translations
   

3. Compile translations:

   pybabel compile -d translations
   

Asset Optimization

The project includes automatic CSS and JavaScript minification with cache busting for optimal performance.

Asset Building

Development Mode:

• Uses unminified assets for easier debugging
• Assets are served directly from source files

Production Mode:

• Automatically serves minified assets
• Cache busting prevents browser caching issues
• Assets are optimized for faster loading

Building Assets

# Build minified assets
make build

# Clean old cache-busted assets
make clean

# Full deployment (clean + build)
make deploy

Asset Files

• CSS: static/css/main.css → static/css/main.min.css
• JavaScript: static/js/main.js → static/js/main.min.js

The build process creates cache-busted versions with MD5 hashes in the filename to ensure browsers always load the latest version.

Configuration

Environment Variables

• SECRET_KEY: Secret key for Flask sessions (default: 'your-secret-key-change-in-production')
• FLASK_ENV: Flask environment (development/production)
• FLASK_DEBUG: Debug mode (0=disabled, 1=enabled, defaults to 1 in development)

Environment Modes:

Development (Local):

FLASK_ENV=development
FLASK_DEBUG=1

Production (Docker):

FLASK_ENV=production
FLASK_DEBUG=0

Production Deployment

For production deployment:

1. Set a strong SECRET_KEY
2. Disable debug mode
3. Use a production WSGI server (e.g., Gunicorn)
4. Set up proper SSL/TLS certificates
5. Configure a reverse proxy (e.g., Nginx)

Technologies Used

• Backend: Flask 2.3.3
• Frontend: Bootstrap 5, Font Awesome
• Internationalization: Flask-Babel
• Containerization: Docker, Docker Compose
• Styling: Custom CSS with CSS variables
• Asset Management: Flask-Assets with CSS/JS minification

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

License

This project is created for demonstration purposes. Feel free to use and modify for your own business needs.

Support

For questions or support, please contact:

• Email: info@kobelly.com
• Phone: +32 486 21 07 07
• Address: Blijkheerstraat 92, 1755 Pajottegem, Belgium

---

Kobelly Web Solutions - Professional web development for small businesses and entrepreneurs.