DEV Community: ngemuantony

Building a Sustainable Living Tips Generator with Next.js, Flask, and Google Gemini AI - Part 2: Frontend Development

ngemuantony — Wed, 26 Mar 2025 10:12:49 +0000

Introduction

In this second part of our tutorial series, we'll build a beautiful and responsive frontend for our sustainability tips generator using Next.js and React Bootstrap. We'll focus on creating an intuitive user interface with smooth animations and proper error handling.
Check out Part 1

Project Overview

The frontend of SustainAI Tips features:

A clean, modern user interface
Responsive design for all screen sizes
Beautiful card-based tips display
Loading states and error handling
Category-based organization with icons
Smooth animations and transitions

Prerequisites

Before starting, ensure you have:

Node.js 14 or higher installed
The backend server from Part 1 running
Basic knowledge of React and TypeScript
Familiarity with CSS and animations

Project Structure

frontend/
├── pages/
│   └── index.tsx    # Main application page
├── styles/
│   └── globals.css  # Global styles
├── package.json     # Project dependencies
└── README.md       # Frontend documentation

Step 1: Setting Up the Frontend Project

Create the Next.js project:

npx create-next-app@latest frontend --typescript
cd frontend

Install required dependencies:

npm install react-bootstrap bootstrap axios react-markdown

Update package.json with the following scripts:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

Step 2: Implementing the Main Application

Create pages/index.tsx with the following code:

/**
 * SustainAI Tips Frontend
 * 
 * Main page component for the SustainAI Tips application.
 * Provides a user interface for generating personalized sustainability tips
 * based on location and habits. Features a responsive design with
 * animated cards and category-based organization.
 * 
 * @author Antony Ngemu
 * @date March 2025
 */

import { useState } from 'react';
import axios from 'axios';
import { Form, Button, Alert, Container, Row, Col, Card, Spinner } from 'react-bootstrap';
import ReactMarkdown from 'react-markdown';
import 'bootstrap/dist/css/bootstrap.min.css';

/**
 * Interface for category tips organization
 */
interface CategoryTips {
  [key: string]: string[];
}

/**
 * Main page component
 */
const Home = () => {
  // State management for form inputs and API response
  const [location, setLocation] = useState<string>('');
  const [habits, setHabits] = useState<string>('');
  const [tips, setTips] = useState<string[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<string | null>(null);

  /**
   * Handle form submission and API call to generate tips
   * @param e - Form submission event
   */
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError(null);
    setTips([]);

    try {
      // Make API request to backend
      const response = await axios.post('http://localhost:5000/api/tips', {
        location,
        habits,
      });
      setTips(response.data.tips);
    } catch (err) {
      setError('Failed to generate tips. Please try again.');
      console.error('Error:', err);
    } finally {
      setLoading(false);
    }
  };

  /**
   * Get the appropriate icon for each category
   * @param category - Category name
   * @returns Emoji icon for the category
   */
  const getCategoryIcon = (category: string): string => {
    const icons: { [key: string]: string } = {
      'Quick Wins': '⚡',
      'Sustainable Living': '🌿',
      'Transportation & Mobility': '🚲',
      'Community & Social Impact': '🤝',
      'Environmental Protection': '🌍',
    };
    return icons[category] || '🌱';
  };

  /**
   * Render tips organized in category-based cards
   * @returns JSX element containing the organized tips
   */
  const renderTipCards = () => {
    // Initialize categories for organizing tips
    const categories: CategoryTips = {
      'Quick Wins': [],
      'Sustainable Living': [],
      'Transportation & Mobility': [],
      'Community & Social Impact': [],
      'Environmental Protection': [],
    };

    // Track current category and its tips
    let currentCategory = '';
    let currentTips: string[] = [];

    // Organize tips into categories
    tips.forEach((tip) => {
      // Check if this is a category header
      if (tip.startsWith('## ')) {
        const categoryMatch = tip.match(/## \d+\.\s*(.*?)(?:\s*\(.*\))?$/);
        if (categoryMatch) {
          currentCategory = categoryMatch[1];
          currentTips = [];
        }
      } else if (currentCategory && Object.keys(categories).includes(currentCategory)) {
        // Add the tip to the current category
        currentTips.push(tip);
        categories[currentCategory] = currentTips;
      }
    });

    // Render category cards
    return (
      <Row xs={1} md={2} lg={3} className="g-4 tips-container">
        {Object.entries(categories).map(([category, categoryTips]) => (
          categoryTips.length > 0 && (
            <Col key={category}>
              <Card className="tip-card h-100">
                <Card.Header className="category-header">
                  <div className="category-icon">
                    {getCategoryIcon(category)}
                  </div>
                  <Card.Title className="m-0">{category}</Card.Title>
                </Card.Header>
                <Card.Body className="d-flex flex-column">
                  <div className="tip-content">
                    <ReactMarkdown>
                      {categoryTips.join('\n\n')}
                    </ReactMarkdown>
                  </div>
                  <div className="tip-footer">
                    <small className="text-muted">
                      {categoryTips.length} sustainable {categoryTips.length === 1 ? 'tip' : 'tips'}
                    </small>
                  </div>
                </Card.Body>
              </Card>
            </Col>
          )
        ))}
      </Row>
    );
  };

  return (
    <div className="app-wrapper">
      {/* Header Section */}
      <header className="app-header">
        <Container>
          <Row className="justify-content-center">
            <Col xs={12} className="text-center">
              <h1 className="main-title">
                <span className="eco-icon">🌱</span> SustainAI Tips
              </h1>
              <p className="main-subtitle">
                Personalized sustainability tips powered by AI
              </p>
            </Col>
          </Row>
        </Container>
      </header>

      {/* Main Content */}
      <Container className="main-content">
        <Row className="justify-content-center">
          <Col xs={12} md={10} lg={8}>
            {/* Input Form */}
            <Card className="form-card">
              <Card.Body>
                <Form onSubmit={handleSubmit}>
                  <Form.Group className="mb-4" controlId="location">
                    <Form.Label className="input-label">Your Location</Form.Label>
                    <Form.Control
                      type="text"
                      value={location}
                      onChange={(e) => setLocation(e.target.value)}
                      placeholder="e.g., San Francisco, CA"
                      required
                      className="custom-input"
                    />
                    <Form.Text className="text-muted">
                      Enter your city or region for location-specific tips
                    </Form.Text>
                  </Form.Group>

                  <Form.Group className="mb-4" controlId="habits">
                    <Form.Label className="input-label">Current Habits</Form.Label>
                    <Form.Control
                      as="textarea"
                      rows={3}
                      value={habits}
                      onChange={(e) => setHabits(e.target.value)}
                      placeholder="Tell us about your daily habits (e.g., 'I drive to work, use single-use plastics')"
                      required
                      className="custom-input"
                    />
                  </Form.Group>

                  <div className="text-center">
                    <Button
                      variant="success"
                      type="submit"
                      disabled={loading}
                      className="submit-button"
                    >
                      {loading ? (
                        <>
                          <Spinner as="span" animation="border" size="sm" className="me-2" />
                          Generating Tips...
                        </>
                      ) : (
                        'Get Personalized Tips'
                      )}
                    </Button>
                  </div>
                </Form>
              </Card.Body>
            </Card>

            {/* Error Display */}
            {error && (
              <Alert variant="danger" className="mt-4 error-alert">
                {error}
              </Alert>
            )}
          </Col>
        </Row>

        {/* Tips Display */}
        {tips.length > 0 && (
          <section className="tips-section">
            <h2 className="section-title">Your Personalized Tips</h2>
            {renderTipCards()}
          </section>
        )}
      </Container>

      {/* Footer */}
      <footer className="app-footer">
        <Container>
          <p className="text-center mb-0">
            Made with 💚 for a sustainable future
          </p>
        </Container>
      </footer>

      {/* Global Styles */}
      <style jsx global>{`
        /* Root Variables */
        :root {
          --primary-color: #198754;
          --primary-dark: #146c43;
          --bg-color: #f8f9fa;
          --text-color: #2c3e50;
          --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          --hover-transform: translateY(-5px);
          --transition-speed: 0.3s;
        }

        /* Global Styles */
        body {
          background-color: var(--bg-color);
          color: var(--text-color);
        }

        /* Header Styles */
        .app-header {
          padding: 4rem 0;
          background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
          color: white;
        }

        /* Card Animations */
        .tip-card {
          transition: all var(--transition-speed);
          animation: cardAppear 0.5s ease-out;
        }

        .tip-card:hover {
          transform: var(--hover-transform);
          box-shadow: var(--card-shadow);
        }

        @keyframes cardAppear {
          from {
            opacity: 0;
            transform: translateY(20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        /* Responsive Design */
        @media (max-width: 768px) {
          .app-header {
            padding: 2rem 0;
          }

          .main-title {
            font-size: 2rem;
          }

          .tip-card {
            margin-bottom: 1rem;
          }
        }
      `}</style>
    </div>
  );
};

export default Home;

Step 3: Understanding the Implementation

Let's break down the key components of our frontend:

Component Structure
- Single page application using Next.js
- Functional component with React hooks
- TypeScript for type safety
- Modular styling with CSS-in-JS
State Management
- Form inputs tracked with useState
- Loading and error states for UX
- Tips data organized by categories
UI Components
- React Bootstrap for layout and forms
- Custom card design for tips display
- Loading spinner and error alerts
- Responsive grid system
Styling Features
- CSS variables for theming
- Smooth animations and transitions
- Mobile-first responsive design
- Custom card and form styling
Error Handling
- Form validation
- API error handling
- User-friendly error messages
- Loading states for feedback

Step 4: Running the Application

Start the development server:

npm run dev

Open http://localhost:3000 in your browser

Enhancing the Application

Here are some potential improvements you could add:

State Management
- Add Redux or Context for larger applications
- Implement local storage for tip history
- Add user preferences
UI Enhancements
- Add dark mode support
- Implement tip sharing
- Add tip favoriting
- Include progress indicators
Performance
- Implement SSR for SEO
- Add image optimization
- Implement code splitting

Resources

Building a Sustainable Living Tips Generator with Next.js, Flask, and Google Gemini AI - Part 1: Backend Development

ngemuantony — Wed, 26 Mar 2025 10:12:21 +0000

Introduction

In this first part of our tutorial series, we'll focus on building a robust Flask backend that integrates with Google's Gemini AI to generate personalized sustainability tips. We'll cover setting up the development environment, implementing the API endpoints, and handling AI interactions.

Project Overview

SustainAI Tips is a modern web application that helps users adopt sustainable living practices through personalized recommendations. The backend serves as the bridge between our frontend interface and the Gemini AI model, handling:

User input processing and validation
AI model interactions and prompt engineering
Response formatting and error handling
Cross-Origin Resource Sharing (CORS) configuration

Prerequisites

Before we begin, ensure you have:

Python 3.8 or higher installed
A Google Gemini AI API key
Basic knowledge of Python and REST APIs
A code editor (VS Code recommended)

Project Structure

backend/
├── app.py              # Main application file
├── requirements.txt    # Project dependencies
├── .env               # Environment variables
└── README.md          # Backend documentation

Step 1: Setting Up the Development Environment

First, create the project directory and set up a virtual environment:

mkdir -p sustainai-web-tips/backend
cd sustainai-web-tips/backend
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

Create and populate requirements.txt:

# Flask - Web framework for building the API
flask==2.0.1

# Flask-CORS - Handle Cross-Origin Resource Sharing
flask-cors==3.0.10

# Google Generative AI - Interface with Gemini AI
google-generativeai==0.3.0

# Python-dotenv - Load environment variables
python-dotenv==0.19.0

Install the dependencies:

pip install -r requirements.txt

Create .env file:

# Google Gemini AI API key
# Get your key from: https://makersuite.google.com/app/apikey
GOOGLE_API_KEY=your_gemini_api_key_here

Step 2: Implementing the Backend Server

Create app.py with the following code:

"""
SustainAI Tips Backend Server

This Flask application serves as the backend for the SustainAI Tips web application.
It uses the Google Gemini 1.5 Pro AI model to generate personalized sustainability tips
based on user location and habits.

Key Components:
    - Flask server with CORS support
    - Google Gemini AI integration
    - Structured prompt engineering
    - Error handling and validation

Author: Antony Ngemu
Date: March 2025
"""

import os
from flask import Flask, request, jsonify
from flask_cors import CORS
import google.generativeai as genai
from dotenv import load_dotenv
from typing import List, Dict, Union, Optional

# Load environment variables from .env file
load_dotenv()

# Initialize Flask application
app = Flask(__name__)

# Configure CORS for frontend integration
# This allows our Next.js frontend to make requests to this backend
CORS(app, resources={
    r"/api/*": {
        "origins": ["http://localhost:3000", "http://127.0.0.1:3000"],
        "methods": ["POST", "OPTIONS"],
        "allow_headers": ["Content-Type"]
    }
})

def initialize_ai_model() -> None:
    """
    Initialize the Google Gemini AI model with API key.

    Raises:
        ValueError: If GOOGLE_API_KEY is not found in environment variables
        Exception: If model initialization fails
    """
    try:
        api_key = os.getenv('GOOGLE_API_KEY')
        if not api_key:
            raise ValueError("GOOGLE_API_KEY not found in environment variables")
        genai.configure(api_key=api_key)
    except Exception as e:
        print(f"Error initializing AI model: {str(e)}")
        raise

def construct_ai_prompt(location: str, habits: str) -> str:
    """
    Construct a detailed prompt for the AI model.

    Args:
        location (str): User's location for location-specific tips
        habits (str): User's current habits for targeted recommendations

    Returns:
        str: Formatted prompt string for the AI model
    """
    return f"""
    Generate practical and personalized sustainability tips for someone in {location} 
    with the following habits: {habits}.

    Format the response in markdown with the following categories:
    1. Quick Wins (Easy to implement immediately)
    2. Sustainable Living
    3. Transportation & Mobility
    4. Community & Social Impact
    5. Environmental Protection

    For each tip:
    - Make it specific to {location}
    - Include cost implications or savings
    - Make it actionable and practical
    - Consider local resources and infrastructure
    - Use bullet points with bold headers

    Start each category with a markdown header (##) and number.
    Format each tip as a markdown bullet point (*).
    Use bold (**) for tip headers.
    """

def generate_ai_tips(location: str, habits: str) -> List[str]:
    """
    Generate personalized sustainability tips using Google Gemini AI.

    Args:
        location (str): User's location for location-specific tips
        habits (str): User's current habits for targeted recommendations

    Returns:
        List[str]: List of markdown-formatted tips organized by categories

    Raises:
        Exception: If there's an error generating tips from the AI model
    """
    try:
        # Initialize Gemini 1.5 Pro model
        model = genai.GenerativeModel('gemini-1.5-pro')

        # Generate AI response using the constructed prompt
        prompt = construct_ai_prompt(location, habits)
        response = model.generate_content(prompt)

        if not response or not response.text:
            raise ValueError("Empty response from AI model")

        # Process and clean the response
        tips = response.text.strip().split('\n')
        return [tip.strip() for tip in tips if tip.strip()]

    except Exception as e:
        print(f"Error generating tips: {str(e)}")
        raise

def validate_input(data: Dict[str, str]) -> Optional[str]:
    """
    Validate the input data from the request.

    Args:
        data (Dict[str, str]): Request data containing location and habits

    Returns:
        Optional[str]: Error message if validation fails, None if successful
    """
    if not data:
        return "Request body is empty"

    location = data.get('location', '').strip()
    habits = data.get('habits', '').strip()

    if not location:
        return "Location is required"
    if not habits:
        return "Habits are required"

    return None

@app.route('/api/tips', methods=['POST'])
def get_tips() -> Union[Dict, tuple]:
    """
    API endpoint to generate sustainability tips.

    Expects POST request with JSON body containing:
        - location: string
        - habits: string

    Returns:
        Union[Dict, tuple]: JSON response with generated tips or error message
    """
    try:
        # Extract and validate input data
        data = request.get_json()
        validation_error = validate_input(data)

        if validation_error:
            return jsonify({
                'error': validation_error
            }), 400

        # Generate tips using AI
        tips = generate_ai_tips(
            location=data['location'].strip(),
            habits=data['habits'].strip()
        )

        return jsonify({'tips': tips})

    except Exception as e:
        # Log error and return safe error message
        print(f"Error processing request: {str(e)}")
        return jsonify({
            'error': 'Failed to generate tips. Please try again.'
        }), 500

if __name__ == '__main__':
    try:
        # Initialize AI model before starting the server
        initialize_ai_model()
        # Run Flask development server
        app.run(debug=True)
    except Exception as e:
        print(f"Failed to start server: {str(e)}")

Step 3: Understanding the Implementation

Let's break down the key components of our backend:

Environment Setup
- We use python-dotenv to manage environment variables
- CORS is configured to allow requests from our Next.js frontend
- Type hints are used throughout for better code maintainability
AI Model Integration
- The initialize_ai_model() function sets up Gemini AI
- Error handling ensures graceful failure if API key is missing
- Model initialization happens before server start
Prompt Engineering
- The construct_ai_prompt() function creates structured prompts
- Categories are clearly defined for consistent output
- Markdown formatting is specified for frontend rendering
Input Validation
- The validate_input() function checks request data
- Empty or missing fields are caught early
- Validation errors return clear messages
Error Handling
- Try-except blocks catch and log errors
- User-facing error messages are sanitized
- Detailed logs help with debugging

Step 4: Testing the Backend

Start the server:

python app.py

Test the API endpoint using curl:

curl -X POST http://localhost:5000/api/tips \
  -H "Content-Type: application/json" \
  -d '{"location":"San Francisco","habits":"driving car, using plastic bags"}'

Next Steps

In Part 2 of this tutorial, we'll:

Build the Next.js frontend
Create a responsive UI with React Bootstrap
Implement the tips display with animations
Add error handling and loading states

The complete source code is available on GitHub [].

Resources

Building a Project Budget Manager with Django - Part 1: Project Setup and Structure

ngemuantony — Mon, 24 Mar 2025 10:24:12 +0000

Introduction

Welcome to the Django Project Budget Manager tutorial series! This guide is designed for beginners who want to learn Django by building a practical project management application. We'll walk through each step in detail, explaining not just what to do, but why we're doing it.

Getting the Project Template

To get started quickly, you can use(create a copy of the project template in your github without commits) our project template from GitHub:

# Use the project template
https://github.com/ChrisDevCode-Technologies/django-starter.git

#Click "use template" button at the top right corner which will provide you with a copy of the project template

#clone the repository you created using the template
git clone https://github.com/your_github_username/django-starter.git

# Navigate to the project directory
cd django-starter

# Create a virtual environment
python -m venv venv

# Activate the virtual environment
# On Windows:
venv\Scripts\activate
# On macOS/Linux:
source venv/bin/activate

# Install dependencies
pip install -r requirements.txt

Project Structure

Our project follows a clean and organized structure. Here's what each directory and file is for:

django-starter/
├── app/                    # Main application directory
│   ├── migrations/        # Database migrations
│   ├── static/           # Static files (CSS, JS, images)
│   ├── templates/        # HTML templates
│   ├── __init__.py      # Makes this directory a Python package
│   ├── admin.py         # Admin interface configuration
│   ├── apps.py          # App configuration
│   ├── forms.py         # Form definitions
│   ├── models.py        # Database models
│   ├── tests.py         # Unit tests
│   ├── urls.py          # URL routing for the app
│   └── views.py         # View functions/classes
├── config/               # Project configuration directory
│   ├── __init__.py
│   ├── asgi.py          # ASGI configuration for async servers
│   ├── settings.py      # Project settings
│   ├── urls.py          # Main URL routing
│   └── wsgi.py          # WSGI configuration for web servers
├── docs/                # Documentation directory
├── static/             # Project-level static files
├── templates/          # Project-level templates
├── .env               # Environment variables (create this)
├── .gitignore        # Git ignore file
├── manage.py         # Django management script
└── requirements.txt  # Project dependencies

Environment Setup

Create a .env file in your project root:

# .env
DEBUG=True
SECRET_KEY=your-secret-key-here
ALLOWED_HOSTS=localhost,127.0.0.1
DATABASE_URL=sqlite:///db.sqlite3

Update settings.py to use environment variables:

# config/settings.py

import os
from pathlib import Path
from dotenv import load_dotenv

# Load environment variables
load_dotenv()

# Build paths inside the project
BASE_DIR = Path(__file__).resolve().parent.parent

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = os.getenv('SECRET_KEY')

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = os.getenv('DEBUG', 'False') == 'True'

ALLOWED_HOSTS = os.getenv('ALLOWED_HOSTS', '').split(',')

# Application definition
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app.apps.AppConfig',  # Our main application
]

# ... rest of the settings ...

URL Configuration

Let's set up the URL routing:

# config/urls.py

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # Admin interface URLs
    path('admin/', admin.site.urls),

    # Our app URLs
    path('', include('app.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

# app/urls.py

from django.urls import path
from . import views

app_name = 'app'  # Namespace for our URLs

urlpatterns = [
    # Home page
    path('', views.dashboard_view, name='dashboard'),

    # Project URLs
    path('projects/', views.project_list, name='project_list'),
    path('projects/create/', views.project_create, name='project_create'),
    path('projects/<int:pk>/', views.project_detail, name='project_detail'),

    # ... more URL patterns will be added later ...
]

Database Configuration

By default, we're using SQLite for development. The database configuration is in settings.py:

# config/settings.py

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}

Static and Media Files

Configure static and media files in settings.py:

# config/settings.py

# Static files (CSS, JavaScript, Images)
STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR / 'static']
STATIC_ROOT = BASE_DIR / 'staticfiles'

# Media files (User uploads)
MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

Initial Setup Commands

Run these commands to set up your database and create a superuser:

# Make migrations
python manage.py makemigrations

# Apply migrations
python manage.py migrate

# Create a superuser (admin)
python manage.py createsuperuser

# Run the development server
python manage.py runserver

Testing the Setup

Visit http://127.0.0.1:8000/ - You should see the default landing page
Visit http://127.0.0.1:8000/admin/ - You should be able to log in with your superuser credentials

Next Steps

In Part 2, we'll create our database models and set up the Django admin interface. We'll define the structure for our projects, tasks, and user profiles.

Common Issues and Solutions

ModuleNotFoundError: No module named 'dotenv'
- Solution: Run pip install python-dotenv
Database migration errors
- Solution: Delete the db.sqlite3 file and all files in migrations folders (except __init__.py), then run migrations again
Static files not loading
- Solution: Make sure DEBUG=True in development
- Run python manage.py collectstatic
Import errors
- Solution: Make sure your virtual environment is activated
- Check that all requirements are installed: pip install -r requirements.txt

Additional Resources

Remember to never commit sensitive information like secret keys or database credentials to version control. Always use environment variables for such data.

Continue to Part 2: Authentication and Models to learn how to implement user authentication and create our data models.

Building a Project Budget Manager with Django - Part 2: Authentication and Models

ngemuantony — Mon, 24 Mar 2025 10:23:45 +0000

Introduction

In this part, we'll set up user authentication and create our database models. We'll use Django's built-in authentication system and create custom models for our project management system. This guide assumes you're a beginner, so we'll explain each step in detail.

Setting Up Authentication

Django provides a robust authentication system out of the box. Let's configure it:

First, ensure these apps are in your INSTALLED_APPS (they should be there by default):

# config/settings.py

INSTALLED_APPS = [
    # ...
    'django.contrib.auth',  # Core authentication framework
    'django.contrib.contenttypes',  # Django content type system
    # ...
]

# Authentication settings
LOGIN_REDIRECT_URL = 'dashboard'  # Where to redirect after login
LOGOUT_REDIRECT_URL = 'home'      # Where to redirect after logout
LOGIN_URL = 'login'              # URL name for the login page

Create user-related URLs:

# config/urls.py

from django.contrib import admin
from django.urls import path, include
from django.contrib.auth import views as auth_views

urlpatterns = [
    path('admin/', admin.site.urls),

    # Authentication URLs
    path('login/', auth_views.LoginView.as_view(
        template_name='account/login.html',  # Our custom login template
        redirect_authenticated_user=True      # Redirect if already logged in
    ), name='login'),

    path('logout/', auth_views.LogoutView.as_view(), name='logout'),

    path('password-change/', auth_views.PasswordChangeView.as_view(
        template_name='account/password_change.html',
        success_url='/password-change/done/'
    ), name='password_change'),

    path('password-change/done/', auth_views.PasswordChangeDoneView.as_view(
        template_name='account/password_change_done.html'
    ), name='password_change_done'),

    # Our app URLs
    path('', include('app.urls')),
]

Creating the Models

Let's create our database models. We'll need models for Projects, Categories, and Expenses:

# app/models.py

from django.db import models
from django.conf import settings
from django.urls import reverse
from django.utils import timezone
from decimal import Decimal

class Category(models.Model):
    """
    Categories for organizing expenses (e.g., 'Marketing', 'Development', 'Operations')

    Fields:
        name: The category name
        description: Optional description of the category
        created_at: When the category was created
        created_by: User who created the category
    """
    name = models.CharField(
        max_length=100,
        unique=True,
        help_text="Enter a category name (e.g., Marketing)"
    )
    description = models.TextField(
        blank=True,
        help_text="Optional: Provide more details about this category"
    )
    created_at = models.DateTimeField(
        auto_now_add=True,
        help_text="When this category was created"
    )
    created_by = models.ForeignKey(
        settings.AUTH_USER_MODEL,
        on_delete=models.PROTECT,  # Don't delete category if user is deleted
        related_name='categories',
        help_text="User who created this category"
    )

    class Meta:
        verbose_name_plural = "Categories"
        ordering = ['name']  # Sort alphabetically by name

    def __str__(self):
        """String representation of the category"""
        return self.name

    def get_absolute_url(self):
        """Get the URL for this category's detail view"""
        return reverse('category_detail', kwargs={'pk': self.pk})

class Project(models.Model):
    """
    Main project model for tracking budgets and expenses

    Fields:
        name: Project name
        description: Project description
        budget: Total budget allocated
        start_date: When the project starts
        end_date: When the project ends
        status: Current project status
        created_by: User who created the project
        team_members: Users assigned to this project
    """
    # Status choices for projects
    STATUS_CHOICES = [
        ('planning', 'Planning'),
        ('in_progress', 'In Progress'),
        ('completed', 'Completed'),
        ('on_hold', 'On Hold'),
        ('cancelled', 'Cancelled'),
    ]

    name = models.CharField(
        max_length=200,
        help_text="Enter the project name"
    )
    description = models.TextField(
        help_text="Describe the project and its objectives"
    )
    budget = models.DecimalField(
        max_digits=10,
        decimal_places=2,
        help_text="Total budget allocated for this project"
    )
    start_date = models.DateField(
        help_text="When does this project start?"
    )
    end_date = models.DateField(
        help_text="When should this project be completed?"
    )
    status = models.CharField(
        max_length=20,
        choices=STATUS_CHOICES,
        default='planning',
        help_text="Current status of the project"
    )
    created_by = models.ForeignKey(
        settings.AUTH_USER_MODEL,
        on_delete=models.PROTECT,
        related_name='created_projects',
        help_text="User who created this project"
    )
    team_members = models.ManyToManyField(
        settings.AUTH_USER_MODEL,
        related_name='assigned_projects',
        blank=True,
        help_text="Users assigned to this project"
    )
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    class Meta:
        ordering = ['-created_at']  # Newest first

    def __str__(self):
        """String representation of the project"""
        return f"{self.name} ({self.get_status_display()})"

    def get_absolute_url(self):
        """Get the URL for this project's detail view"""
        return reverse('project_detail', kwargs={'pk': self.pk})

    def get_budget_remaining(self):
        """
        Calculate remaining budget

        Returns:
            Decimal: Amount of budget remaining
        """
        total_expenses = self.expenses.aggregate(
            total=models.Sum('amount')
        )['total'] or Decimal('0')
        return self.budget - total_expenses

    def is_over_budget(self):
        """Check if project has exceeded its budget"""
        return self.get_budget_remaining() < 0

    def get_completion_percentage(self):
        """
        Calculate project completion percentage based on expenses

        Returns:
            float: Percentage of budget used (0-100)
        """
        if self.budget <= 0:
            return 0
        used = (self.budget - self.get_budget_remaining()) / self.budget * 100
        return min(used, 100)  # Cap at 100%

class Expense(models.Model):
    """
    Track individual expenses within a project

    Fields:
        project: Project this expense belongs to
        category: Type of expense
        description: What this expense is for
        amount: How much was spent
        date: When it was spent
        receipt: Optional receipt image
    """
    project = models.ForeignKey(
        Project,
        on_delete=models.CASCADE,  # Delete expenses if project is deleted
        related_name='expenses',
        help_text="Project this expense belongs to"
    )
    category = models.ForeignKey(
        Category,
        on_delete=models.PROTECT,
        related_name='expenses',
        help_text="Type of expense"
    )
    description = models.TextField(
        help_text="What is this expense for?"
    )
    amount = models.DecimalField(
        max_digits=10,
        decimal_places=2,
        help_text="Amount spent"
    )
    date = models.DateField(
        default=timezone.now,
        help_text="When was this expense incurred?"
    )
    receipt = models.ImageField(
        upload_to='receipts/',
        blank=True,
        null=True,
        help_text="Upload a receipt image (optional)"
    )
    created_by = models.ForeignKey(
        settings.AUTH_USER_MODEL,
        on_delete=models.PROTECT,
        related_name='expenses',
        help_text="User who recorded this expense"
    )
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    class Meta:
        ordering = ['-date', '-created_at']  # Most recent first

    def __str__(self):
        """String representation of the expense"""
        return f"{self.category.name}: {self.amount} ({self.date})"

    def get_absolute_url(self):
        """Get the URL for this expense's detail view"""
        return reverse('expense_detail', kwargs={'pk': self.pk})

    def is_recent(self):
        """Check if expense is from the last 7 days"""
        return timezone.now().date() - self.date <= timezone.timedelta(days=7)

Model Forms

Create forms for our models:

# app/forms.py

from django import forms
from .models import Project, Expense, Category

class ProjectForm(forms.ModelForm):
    """
    Form for creating and editing projects

    Features:
    - Date picker widgets for start and end dates
    - Multi-select for team members
    - Custom validation for dates and budget
    """
    class Meta:
        model = Project
        fields = [
            'name', 'description', 'budget',
            'start_date', 'end_date', 'status',
            'team_members'
        ]
        widgets = {
            # Use date picker widgets
            'start_date': forms.DateInput(attrs={'type': 'date'}),
            'end_date': forms.DateInput(attrs={'type': 'date'}),
            # Use multi-select for team members
            'team_members': forms.SelectMultiple(attrs={
                'class': 'select2',  # For enhanced select widget
            }),
        }

    def clean(self):
        """
        Custom validation:
        - End date must be after start date
        - Budget must be positive
        """
        cleaned_data = super().clean()
        start_date = cleaned_data.get('start_date')
        end_date = cleaned_data.get('end_date')
        budget = cleaned_data.get('budget')

        if start_date and end_date and end_date < start_date:
            raise forms.ValidationError(
                "End date cannot be before start date"
            )

        if budget and budget <= 0:
            raise forms.ValidationError(
                "Budget must be greater than zero"
            )

        return cleaned_data

class ExpenseForm(forms.ModelForm):
    """
    Form for recording expenses

    Features:
    - Date picker for expense date
    - File upload for receipts
    - Custom validation for amount
    """
    class Meta:
        model = Expense
        fields = [
            'project', 'category', 'description',
            'amount', 'date', 'receipt'
        ]
        widgets = {
            'date': forms.DateInput(attrs={'type': 'date'}),
            'description': forms.Textarea(attrs={'rows': 3}),
        }

    def __init__(self, *args, **kwargs):
        """Initialize form with user's projects only"""
        user = kwargs.pop('user', None)
        super().__init__(*args, **kwargs)
        if user:
            # Show only projects the user is involved with
            self.fields['project'].queryset = Project.objects.filter(
                models.Q(created_by=user) |
                models.Q(team_members=user)
            ).distinct()

    def clean_amount(self):
        """Ensure expense amount is positive"""
        amount = self.cleaned_data.get('amount')
        if amount and amount <= 0:
            raise forms.ValidationError(
                "Expense amount must be greater than zero"
            )
        return amount

Admin Interface

Customize the admin interface for our models:

# app/admin.py

from django.contrib import admin
from .models import Project, Expense, Category

@admin.register(Category)
class CategoryAdmin(admin.ModelAdmin):
    """Admin interface for categories"""
    list_display = ['name', 'created_by', 'created_at']
    search_fields = ['name', 'description']
    list_filter = ['created_at']

@admin.register(Project)
class ProjectAdmin(admin.ModelAdmin):
    """Admin interface for projects"""
    list_display = [
        'name', 'status', 'budget',
        'start_date', 'end_date', 'created_by'
    ]
    list_filter = ['status', 'start_date', 'end_date']
    search_fields = ['name', 'description']
    filter_horizontal = ['team_members']

    # Custom columns
    def get_budget_used(self, obj):
        """Show percentage of budget used"""
        return f"{obj.get_completion_percentage():.1f}%"
    get_budget_used.short_description = "Budget Used"

@admin.register(Expense)
class ExpenseAdmin(admin.ModelAdmin):
    """Admin interface for expenses"""
    list_display = [
        'project', 'category', 'amount',
        'date', 'created_by'
    ]
    list_filter = ['project', 'category', 'date']
    search_fields = [
        'description', 'project__name',
        'category__name'
    ]
    date_hierarchy = 'date'

Migrations

After creating our models, we need to create and apply migrations:

# Create migrations
python manage.py makemigrations app

# Review the migrations (optional but recommended)
python manage.py sqlmigrate app 0001

# Apply migrations
python manage.py migrate

Testing the Models

Create some basic tests:

# app/tests/test_models.py

from django.test import TestCase
from django.contrib.auth import get_user_model
from django.utils import timezone
from decimal import Decimal
from ..models import Project, Category, Expense

class ProjectModelTests(TestCase):
    """Test cases for the Project model"""

    def setUp(self):
        """Set up test data"""
        # Create a test user
        self.user = get_user_model().objects.create_user(
            username='testuser',
            password='testpass123'
        )

        # Create a test project
        self.project = Project.objects.create(
            name='Test Project',
            description='A test project',
            budget=Decimal('1000.00'),
            start_date=timezone.now().date(),
            end_date=timezone.now().date(),
            created_by=self.user
        )

        # Create a test category
        self.category = Category.objects.create(
            name='Test Category',
            created_by=self.user
        )

    def test_project_budget_calculations(self):
        """Test budget calculations"""
        # Create some expenses
        Expense.objects.create(
            project=self.project,
            category=self.category,
            amount=Decimal('300.00'),
            description='Test Expense 1',
            created_by=self.user
        )

        Expense.objects.create(
            project=self.project,
            category=self.category,
            amount=Decimal('200.00'),
            description='Test Expense 2',
            created_by=self.user
        )

        # Test calculations
        self.assertEqual(
            self.project.get_budget_remaining(),
            Decimal('500.00')
        )
        self.assertEqual(
            self.project.get_completion_percentage(),
            50.0
        )
        self.assertFalse(self.project.is_over_budget())

Next Steps

In Part 3, we'll create views and templates to interact with our models. We'll build:

Project listing and detail views
Forms for creating and editing projects
Expense tracking interface
Dashboard with budget summaries

Common Issues and Solutions

Migration conflicts
- Delete all migrations and start fresh
- Use python manage.py migrate --fake if needed
Related name conflicts
- Ensure unique related_name for each relationship
- Use descriptive names like 'created_projects'
Form validation errors
- Check form.errors in views
- Use clean() method for cross-field validation

Additional Resources

This article is part of the "Building a Project Budget Manager with Django" series. Check out Part 1 if you haven't already!

Building a Project Budget Manager with Django - Part 3: Views and Templates

ngemuantony — Mon, 24 Mar 2025 10:23:03 +0000

In this third part of our series, we'll create views and templates for our Project Budget Manager. We'll use Tailwind CSS for styling and HTMX for dynamic interactions.

Setting Up Tailwind CSS

First, install Tailwind CSS dependencies:

npm install -D tailwindcss
npx tailwindcss init

Create a tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./templates/**/*.html",
    "./static/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Create static/css/input.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles */
@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700;
  }
  .btn-secondary {
    @apply px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700;
  }
  .form-input {
    @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm;
  }
}

Creating Base Templates

Create templates/layout/base.html:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Project Budget Manager{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'css/output.css' %}">
    <script src="{% static 'js/htmx.min.js' %}" defer></script>
    {% block extra_head %}{% endblock %}
</head>
<body class="bg-gray-50">
    {% include "layout/nav.html" %}

    <main class="container mx-auto px-4 py-8">
        {% if messages %}
        <div class="messages mb-8">
            {% for message in messages %}
            <div class="p-4 mb-4 rounded-lg {% if message.tags == 'success' %}bg-green-100 text-green-700{% elif message.tags == 'error' %}bg-red-100 text-red-700{% else %}bg-blue-100 text-blue-700{% endif %}">
                {{ message }}
            </div>
            {% endfor %}
        </div>
        {% endif %}

        {% block content %}{% endblock %}
    </main>

    <footer class="bg-gray-800 text-white py-8 mt-16">
        <div class="container mx-auto px-4">
            <p>&copy; {% now "Y" %} Project Budget Manager. All rights reserved.</p>
        </div>
    </footer>

    {% block extra_js %}{% endblock %}
</body>
</html>

Creating Views

Update app/views.py with our views:

from django.shortcuts import render, redirect, get_object_or_404
from django.contrib.auth.decorators import login_required
from django.contrib import messages
from django.http import HttpResponse
from .models import Project, Expense
from .forms import ProjectForm, ExpenseForm
from decimal import Decimal

@login_required
def dashboard(request):
    user_projects = Project.objects.filter(
        created_by=request.user
    ).order_by('-created_at')
    assigned_projects = Project.objects.filter(
        assigned_to=request.user
    ).order_by('-created_at')

    context = {
        'user_projects': user_projects,
        'assigned_projects': assigned_projects,
    }
    return render(request, 'app/dashboard.html', context)

@login_required
def project_list(request):
    projects = Project.objects.filter(
        created_by=request.user
    ).order_by('-created_at')
    return render(request, 'app/project_list.html', {'projects': projects})

@login_required
def project_detail(request, pk):
    project = get_object_or_404(Project, pk=pk)
    expenses = project.expenses.all().order_by('-date')

    context = {
        'project': project,
        'expenses': expenses,
        'total_expenses': project.get_total_expenses(),
        'budget_remaining': project.get_budget_remaining(),
    }
    return render(request, 'app/project_detail.html', context)

@login_required
def project_create(request):
    if request.method == 'POST':
        form = ProjectForm(request.POST)
        if form.is_valid():
            project = form.save(commit=False)
            project.created_by = request.user
            project.save()
            messages.success(request, 'Project created successfully.')
            return redirect('project_detail', pk=project.pk)
    else:
        form = ProjectForm()

    return render(request, 'app/project_form.html', {'form': form})

@login_required
def expense_create(request, project_pk):
    project = get_object_or_404(Project, pk=project_pk)

    if request.method == 'POST':
        form = ExpenseForm(request.POST, request.FILES)
        if form.is_valid():
            expense = form.save(commit=False)
            expense.project = project
            expense.created_by = request.user
            expense.save()

            if request.htmx:
                return HttpResponse(
                    f'<div id="expense-{expense.id}" class="expense-item">'
                    f'<p>{expense.description} - ${expense.amount}</p></div>'
                )

            messages.success(request, 'Expense added successfully.')
            return redirect('project_detail', pk=project.pk)
    else:
        form = ExpenseForm()

    context = {
        'form': form,
        'project': project,
    }
    return render(request, 'app/expense_form.html', context)

Create app/forms.py:

from django import forms
from .models import Project, Expense

class ProjectForm(forms.ModelForm):
    class Meta:
        model = Project
        fields = ['title', 'description', 'total_budget', 'start_date', 'end_date', 'assigned_to']
        widgets = {
            'start_date': forms.DateInput(attrs={'type': 'date'}),
            'end_date': forms.DateInput(attrs={'type': 'date'}),
        }

class ExpenseForm(forms.ModelForm):
    class Meta:
        model = Expense
        fields = ['description', 'amount', 'category', 'date', 'receipt']
        widgets = {
            'date': forms.DateInput(attrs={'type': 'date'}),
        }

Creating Templates

Create templates/app/dashboard.html:

{% extends "layout/base.html" %}

{% block title %}Dashboard - Project Budget Manager{% endblock %}

{% block content %}
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
    <div>
        <h2 class="text-2xl font-bold mb-4">Your Projects</h2>
        {% if user_projects %}
            {% for project in user_projects %}
            <div class="bg-white p-6 rounded-lg shadow-md mb-4">
                <h3 class="text-xl font-semibold mb-2">
                    <a href="{% url 'project_detail' pk=project.pk %}" class="text-blue-600 hover:text-blue-800">
                        {{ project.title }}
                    </a>
                </h3>
                <p class="text-gray-600 mb-2">{{ project.description|truncatewords:30 }}</p>
                <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-500">Budget: ${{ project.total_budget }}</span>
                    <span class="px-3 py-1 rounded-full text-sm 
                        {% if project.status == 'approved' %}bg-green-100 text-green-800
                        {% elif project.status == 'pending' %}bg-yellow-100 text-yellow-800
                        {% elif project.status == 'rejected' %}bg-red-100 text-red-800
                        {% else %}bg-gray-100 text-gray-800{% endif %}">
                        {{ project.get_status_display }}
                    </span>
                </div>
            </div>
            {% endfor %}
        {% else %}
            <p class="text-gray-600">No projects created yet.</p>
        {% endif %}

        <a href="{% url 'project_create' %}" class="btn-primary inline-block mt-4">
            Create New Project
        </a>
    </div>

    <div>
        <h2 class="text-2xl font-bold mb-4">Assigned Projects</h2>
        {% if assigned_projects %}
            {% for project in assigned_projects %}
            <div class="bg-white p-6 rounded-lg shadow-md mb-4">
                <h3 class="text-xl font-semibold mb-2">
                    <a href="{% url 'project_detail' pk=project.pk %}" class="text-blue-600 hover:text-blue-800">
                        {{ project.title }}
                    </a>
                </h3>
                <p class="text-gray-600 mb-2">{{ project.description|truncatewords:30 }}</p>
                <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-500">Created by: {{ project.created_by.get_full_name|default:project.created_by.username }}</span>
                    <span class="px-3 py-1 rounded-full text-sm 
                        {% if project.status == 'approved' %}bg-green-100 text-green-800
                        {% elif project.status == 'pending' %}bg-yellow-100 text-yellow-800
                        {% elif project.status == 'rejected' %}bg-red-100 text-red-800
                        {% else %}bg-gray-100 text-gray-800{% endif %}">
                        {{ project.get_status_display }}
                    </span>
                </div>
            </div>
            {% endfor %}
        {% else %}
            <p class="text-gray-600">No projects assigned to you.</p>
        {% endif %}
    </div>
</div>
{% endblock %}

Setting Up URLs

Update app/urls.py:

from django.urls import path
from . import views

app_name = 'app'

urlpatterns = [
    path('', views.dashboard, name='dashboard'),
    path('projects/', views.project_list, name='project_list'),
    path('projects/create/', views.project_create, name='project_create'),
    path('projects/<int:pk>/', views.project_detail, name='project_detail'),
    path('projects/<int:project_pk>/expenses/create/', 
         views.expense_create, name='expense_create'),
]

Next Steps

In Part 4 of this series, we'll:

Implement project approval workflow
Add email notifications
Create project reports and analytics
Set up production deployment

Resources

This article is part of the "Building a Project Budget Manager with Django" series. Check out Part 1 and Part 2 if you haven't already!

Building a Project Budget Manager with Django - Part 4: Deployment and Production Setup On Ubuntu Server

ngemuantony — Mon, 24 Mar 2025 10:22:18 +0000

In this final part of our series, we'll prepare our Project Budget Manager for production deployment. We'll cover security configurations, performance optimizations, and deployment steps.

Production Settings

Update config/settings/production.py with production-specific settings:

from .base import *

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = False

# SECURITY WARNING: configure the secret key for production
SECRET_KEY = os.environ.get('DJANGO_SECRET_KEY')

# Database configuration
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': os.environ.get('DB_NAME'),
        'USER': os.environ.get('DB_USER'),
        'PASSWORD': os.environ.get('DB_PASSWORD'),
        'HOST': os.environ.get('DB_HOST'),
        'PORT': os.environ.get('DB_PORT', '3306'),
        'OPTIONS': {
            'init_command': "SET sql_mode='STRICT_TRANS_TABLES'",
            'charset': 'utf8mb4',
        }
    }
}

# Email settings
EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = os.environ.get('EMAIL_HOST', 'smtp.gmail.com')
EMAIL_PORT = int(os.environ.get('EMAIL_PORT', 587))
EMAIL_USE_TLS = True
EMAIL_HOST_USER = os.environ.get('EMAIL_HOST_USER')
EMAIL_HOST_PASSWORD = os.environ.get('EMAIL_HOST_PASSWORD')
DEFAULT_FROM_EMAIL = os.environ.get('DEFAULT_FROM_EMAIL', EMAIL_HOST_USER)

# Security settings
SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
SECURE_SSL_REDIRECT = True
SESSION_COOKIE_SECURE = True
CSRF_COOKIE_SECURE = True
SECURE_BROWSER_XSS_FILTER = True
SECURE_CONTENT_TYPE_NOSNIFF = True

# Static files configuration
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

# Enable WhiteNoise for static file serving
MIDDLEWARE.insert(1, 'whitenoise.middleware.WhiteNoiseMiddleware')
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

# Site settings
SITE_ID = 1
ALLOWED_HOSTS = os.environ.get('ALLOWED_HOSTS', '').split(',')
USE_X_FORWARDED_HOST = True

Environment Variables

Create a production .env file template (.env.example):

# Django settings
DJANGO_SETTINGS_MODULE=config.settings.production
DJANGO_SECRET_KEY=your-secret-key-here
ALLOWED_HOSTS=your-domain.com,www.your-domain.com

# Database settings
DB_NAME=budget_db
DB_USER=budget_user
DB_PASSWORD=your-secure-password
DB_HOST=localhost
DB_PORT=3306

# Email settings
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_HOST_USER=your-email@gmail.com
EMAIL_HOST_PASSWORD=your-app-specific-password
DEFAULT_FROM_EMAIL=your-email@gmail.com

# Security settings
SECURE_SSL_REDIRECT=True
SESSION_COOKIE_SECURE=True
CSRF_COOKIE_SECURE=True

Production Dependencies

Update requirements.txt with production dependencies:

Django==5.0.2
django-allauth==0.61.1
django-crispy-forms==2.3
mysqlclient==2.2.4
whitenoise==6.9.0
python-dotenv==1.0.1
gunicorn==21.2.0

Setting Up MySQL Database

Install MySQL server:

sudo apt update
sudo apt install mysql-server

Create database and user:

CREATE DATABASE budget_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE USER 'budget_user'@'localhost' IDENTIFIED BY 'your-secure-password';
GRANT ALL PRIVILEGES ON budget_db.* TO 'budget_user'@'localhost';
FLUSH PRIVILEGES;

Nginx Configuration

Install Nginx:

sudo apt install nginx

Create Nginx configuration (/etc/nginx/sites-available/project-budget):

server {
    listen 80;
    server_name your-domain.com www.your-domain.com;

    location = /favicon.ico { access_log off; log_not_found off; }

    location /static/ {
        root /path/to/your/project;
    }

    location /media/ {
        root /path/to/your/project;
    }

    location / {
        include proxy_params;
        proxy_pass http://unix:/run/gunicorn.sock;
    }
}

Enable the site:

sudo ln -s /etc/nginx/sites-available/project-budget /etc/nginx/sites-enabled
sudo nginx -t
sudo systemctl restart nginx

Gunicorn Service

Create a systemd service file (/etc/systemd/system/gunicorn.service):

[Unit]
Description=gunicorn daemon
Requires=gunicorn.socket
After=network.target

[Service]
User=your-user
Group=www-data
WorkingDirectory=/path/to/your/project
ExecStart=/path/to/your/venv/bin/gunicorn \
    --access-logfile - \
    --workers 3 \
    --bind unix:/run/gunicorn.sock \
    config.wsgi:application

[Install]
WantedBy=multi-user.target

Create socket file (/etc/systemd/system/gunicorn.socket):

[Unit]
Description=gunicorn socket

[Socket]
ListenStream=/run/gunicorn.sock

[Install]
WantedBy=sockets.target

Start and enable the service:

sudo systemctl start gunicorn.socket
sudo systemctl enable gunicorn.socket

SSL Certificate with Let's Encrypt

Install Certbot:

sudo apt install certbot python3-certbot-nginx

Obtain SSL certificate:

sudo certbot --nginx -d your-domain.com -d www.your-domain.com

Deployment Checklist

Prepare the environment:

# Create and activate virtual environment
python -m venv venv
source venv/bin/activate

# Install dependencies
pip install -r requirements.txt

Set up the database:

python manage.py migrate
python manage.py createsuperuser

Collect static files:

python manage.py collectstatic --noinput

Set up environment variables:

cp .env.example .env
# Edit .env with your production values

Test the application:

python manage.py check --deploy

Monitoring and Maintenance

Set up logging in production settings:

LOGGING = {
    'version': 1,
    'disable_existing_loggers': False,
    'handlers': {
        'file': {
            'level': 'ERROR',
            'class': 'logging.FileHandler',
            'filename': '/path/to/django-error.log',
        },
    },
    'loggers': {
        'django': {
            'handlers': ['file'],
            'level': 'ERROR',
            'propagate': True,
        },
    },
}

Regular maintenance tasks:

# Backup database
mysqldump -u budget_user -p budget_db > backup.sql

# Check for updates
pip list --outdated

# Monitor logs
tail -f /path/to/django-error.log

Performance Optimization Tips

Enable caching:

CACHES = {
    'default': {
        'BACKEND': 'django.core.cache.backends.redis.RedisCache',
        'LOCATION': 'redis://127.0.0.1:6379/1',
    }
}

Use database connection pooling:

DATABASES = {
    'default': {
        # ... other settings ...
        'CONN_MAX_AGE': 60,
    }
}

Resources

This article is part of the "Building a Project Budget Manager with Django" series. Check out Part 1, Part 2, and Part 3 if you haven't already!

Building a Project Budget Manager with Django - Part 5: Templates and Documentation

ngemuantony — Mon, 24 Mar 2025 10:21:20 +0000

Introduction

In this part, we'll dive into creating beautiful and functional templates for our project using Django's template system and Tailwind CSS. We'll also focus on writing clear documentation and comments to make our code more maintainable.

Template Organization

Our templates are organized in a hierarchical structure:

templates/
├── layout/                 # Base layout templates
│   ├── base.html          # Main base template
│   └── dashboard/         # Dashboard-specific layouts
│       ├── base.html      # Dashboard base template
│       ├── _header.html   # Header component
│       ├── _sidebar.html  # Sidebar component
│       └── _footer.html   # Footer component
├── projects/              # Project-related templates
│   ├── list.html         # Project list view
│   ├── detail.html       # Project detail view
│   ├── form.html         # Project create/edit form
│   └── _project_card.html # Reusable project card component
└── components/           # Reusable UI components
    ├── alerts.html       # Alert messages
    ├── forms/           # Form-related components
    └── modals/          # Modal dialogs

Base Template

Here's our base template with detailed comments:

<!-- templates/layout/base.html -->
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    {# Meta tags for proper rendering and SEO #}
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="{% block meta_description %}Project Budget Manager{% endblock %}">

    {# Dynamic title block #}
    <title>{% block title %}Project Budget Manager{% endblock %}</title>

    {# Favicon #}
    <link rel="icon" type="image/png" href="{% static 'img/favicon.png' %}">

    {# Tailwind CSS #}
    <link href="{% static 'css/output.css' %}" rel="stylesheet">

    {# Custom CSS #}
    {% block extra_css %}{% endblock %}

    {# Alpine.js for interactivity #}
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body class="bg-gray-50 dark:bg-gray-900">
    {# Main content wrapper #}
    <div class="min-h-screen flex flex-col">
        {# Content block for page-specific content #}
        {% block content %}{% endblock %}

        {# Footer block #}
        {% block footer %}
            {% include "layout/_footer.html" %}
        {% endblock %}
    </div>

    {# Flash messages #}
    {% if messages %}
        <div class="fixed bottom-4 right-4 z-50">
            {% for message in messages %}
                <div class="alert alert-{{ message.tags }} mb-2">
                    {{ message }}
                </div>
            {% endfor %}
        </div>
    {% endif %}

    {# JavaScript block for page-specific scripts #}
    {% block extra_js %}{% endblock %}
</body>
</html>

Dashboard Layout

The dashboard layout extends the base template and adds navigation:

<!-- templates/layout/dashboard/base.html -->
{% extends "layout/base.html" %}

{% block content %}
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
    {# Sidebar navigation #}
    {% include "layout/dashboard/_sidebar.html" %}

    {# Main content area #}
    <div class="flex-1 flex flex-col overflow-hidden">
        {# Top navigation bar #}
        {% include "layout/dashboard/_header.html" %}

        {# Main content #}
        <main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-100 dark:bg-gray-900">
            <div class="container mx-auto px-6 py-8">
                {# Page header #}
                <div class="mb-8">
                    <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">
                        {% block page_title %}Dashboard{% endblock %}
                    </h1>
                </div>

                {# Page-specific content #}
                {% block dashboard_content %}{% endblock %}
            </div>
        </main>
    </div>
</div>
{% endblock %}

Form Templates

Here's an example of a form template with proper styling and validation:

<!-- templates/projects/form.html -->
{% extends "layout/dashboard/base.html" %}

{% block dashboard_content %}
<div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
    <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-6">
        {% if form.instance.pk %}
            Edit Project
        {% else %}
            Create New Project
        {% endif %}
    </h2>

    <form method="post" enctype="multipart/form-data" class="space-y-6">
        {% csrf_token %}

        {# Form errors #}
        {% if form.non_field_errors %}
            <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
                {{ form.non_field_errors }}
            </div>
        {% endif %}

        {# Project name field #}
        <div>
            <label for="{{ form.name.id_for_label }}" 
                   class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                Project Name
            </label>
            <div class="mt-1">
                {{ form.name }}
                {% if form.name.errors %}
                    <p class="mt-2 text-sm text-red-600">
                        {{ form.name.errors.0 }}
                    </p>
                {% endif %}
            </div>
        </div>

        {# Project description field #}
        <div>
            <label for="{{ form.description.id_for_label }}"
                   class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                Description
            </label>
            <div class="mt-1">
                {{ form.description }}
                {% if form.description.errors %}
                    <p class="mt-2 text-sm text-red-600">
                        {{ form.description.errors.0 }}
                    </p>
                {% endif %}
            </div>
        </div>

        {# Form actions #}
        <div class="flex justify-end space-x-4">
            <a href="{% url 'project_list' %}"
               class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50">
                Cancel
            </a>
            <button type="submit"
                    class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700">
                {% if form.instance.pk %}Save Changes{% else %}Create Project{% endif %}
            </button>
        </div>
    </form>
</div>
{% endblock %}

Component Templates

Create reusable components to maintain consistency:

<!-- templates/components/alerts.html -->
{% comment %}
Alert Component
Usage: {% include "components/alerts.html" with type="success" message="Operation successful" %}
Types: success, error, warning, info
{% endcomment %}

<div class="rounded-md p-4 mb-4
    {% if type == 'success' %}
        bg-green-50 text-green-800 border border-green-200
    {% elif type == 'error' %}
        bg-red-50 text-red-800 border border-red-200
    {% elif type == 'warning' %}
        bg-yellow-50 text-yellow-800 border border-yellow-200
    {% else %}
        bg-blue-50 text-blue-800 border border-blue-200
    {% endif %}">
    <div class="flex">
        <div class="flex-shrink-0">
            {% if type == 'success' %}
                {# Success icon #}
                <svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                </svg>
            {% elif type == 'error' %}
                {# Error icon #}
                <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                </svg>
            {% endif %}
        </div>
        <div class="ml-3">
            <p class="text-sm">{{ message }}</p>
        </div>
    </div>
</div>

Documentation Best Practices

File Headers: Add descriptive headers to all files:

"""
project_budget/app/views.py

This module contains the views for the Project Budget Manager application.
It handles all HTTP requests and returns appropriate responses.

Author: Your Name
Created: March 20, 2025
"""

Function/Class Documentation:

def calculate_project_budget(project):
    """
    Calculate the total budget and expenses for a project.

    Args:
        project (Project): The project instance to calculate budget for

    Returns:
        tuple: A tuple containing (total_budget, total_expenses, remaining_budget)

    Example:
        >>> project = Project.objects.get(id=1)
        >>> total, expenses, remaining = calculate_project_budget(project)
    """
    total_budget = project.budget_set.aggregate(Sum('amount'))['amount__sum'] or 0
    total_expenses = project.expense_set.aggregate(Sum('amount'))['amount__sum'] or 0
    remaining_budget = total_budget - total_expenses

    return total_budget, total_expenses, remaining_budget

Code Comments:

class ProjectListView(ListView):
    model = Project
    template_name = 'projects/list.html'
    context_object_name = 'projects'

    def get_queryset(self):
        # Get the base queryset
        queryset = super().get_queryset()

        # Filter by user's projects only
        queryset = queryset.filter(owner=self.request.user)

        # Apply search filter if provided
        search_query = self.request.GET.get('q')
        if search_query:
            queryset = queryset.filter(
                Q(name__icontains=search_query) |
                Q(description__icontains=search_query)
            )

        # Sort by status and due date
        return queryset.order_by('status', 'due_date')

Template Tags and Filters

Create custom template tags for reusable functionality:

# app/templatetags/project_tags.py

from django import template
from django.template.defaultfilters import floatformat

register = template.Library()

@register.filter
def currency(value):
    """
    Format a number as currency.

    Usage:
        {{ project.budget|currency }}

    Example:
        Input: 1234.5
        Output: $1,234.50
    """
    if value is None:
        return '$0.00'
    return f'${floatformat(value, 2)}'

@register.simple_tag
def get_project_status_class(status):
    """
    Return the appropriate CSS class for a project status.

    Usage:
        {% get_project_status_class project.status as status_class %}
        <span class="{{ status_class }}">{{ project.status }}</span>
    """
    status_classes = {
        'planning': 'bg-blue-100 text-blue-800',
        'in_progress': 'bg-yellow-100 text-yellow-800',
        'completed': 'bg-green-100 text-green-800',
        'on_hold': 'bg-gray-100 text-gray-800',
    }
    return status_classes.get(status, 'bg-gray-100 text-gray-800')

Testing Templates

Create tests for your templates:

# app/tests/test_templates.py

from django.test import TestCase, Client
from django.urls import reverse
from django.contrib.auth import get_user_model

class ProjectTemplateTests(TestCase):
    def setUp(self):
        self.client = Client()
        self.user = get_user_model().objects.create_user(
            username='testuser',
            password='testpass123'
        )
        self.client.login(username='testuser', password='testpass123')

    def test_project_list_template(self):
        """Test that the project list template renders correctly"""
        response = self.client.get(reverse('project_list'))

        # Check response
        self.assertEqual(response.status_code, 200)
        self.assertTemplateUsed(response, 'projects/list.html')

        # Check context
        self.assertIn('projects', response.context)

        # Check page content
        self.assertContains(response, 'Projects')
        self.assertContains(response, 'Create New Project')

Next Steps

In Part 6, we'll cover advanced features like custom user management, admin dashboard customization, and utility functions. We'll also look at JavaScript integration and Tailwind configuration.

Additional Resources

This article is part of the "Building a Project Budget Manager with Django" series. Check out Part 1, Part 2,Part 3, and Part 4 if you haven't already!

Building a Project Budget Manager with Django - Part 6: Advanced Features

ngemuantony — Mon, 24 Mar 2025 10:20:34 +0000

Custom User Management

Create a custom user app (users/models.py):

from django.contrib.auth.models import AbstractUser
from django.db import models

class CustomUser(AbstractUser):
    """
    Custom user model with additional fields
    """
    department = models.CharField(max_length=100, blank=True)
    position = models.CharField(max_length=100, blank=True)

    def get_full_name(self):
        return f"{self.first_name} {self.last_name}"

Update settings to use custom user (config/settings/base.py):

AUTH_USER_MODEL = 'users.CustomUser'

Create user forms (users/forms.py):

from django.contrib.auth.forms import UserCreationForm, UserChangeForm
from .models import CustomUser

class CustomUserCreationForm(UserCreationForm):
    class Meta:
        model = CustomUser
        fields = ('username', 'email', 'department', 'position')

class CustomUserChangeForm(UserChangeForm):
    class Meta:
        model = CustomUser
        fields = ('username', 'email', 'department', 'position')

Admin Dashboard Customization

Create a custom admin dashboard (app/admin.py):

from django.contrib import admin
from django.db.models import Sum
from django.utils.html import format_html
from .models import Project, Expense, ProjectComment

@admin.register(Project)
class ProjectAdmin(admin.ModelAdmin):
    list_display = ('title', 'created_by', 'status', 'total_budget', 'budget_usage', 'created_at')
    list_filter = ('status', 'created_at')
    search_fields = ('title', 'description', 'created_by__username')
    readonly_fields = ('created_at', 'updated_at')

    def budget_usage(self, obj):
        total_expenses = obj.get_total_expenses()
        percentage = (total_expenses / obj.total_budget * 100) if obj.total_budget else 0
        color = 'green' if percentage <= 75 else 'orange' if percentage <= 100 else 'red'
        return format_html(
            '<div style="color: {};">{:.1f}% (${:,.2f} / ${:,.2f})</div>',
            color, percentage, total_expenses, obj.total_budget
        )
    budget_usage.short_description = 'Budget Usage'

@admin.register(Expense)
class ExpenseAdmin(admin.ModelAdmin):
    list_display = ('description', 'project', 'amount', 'category', 'date')
    list_filter = ('category', 'date', 'project')
    search_fields = ('description', 'project__title')
    date_hierarchy = 'date'

    def get_queryset(self, request):
        qs = super().get_queryset(request)
        if not request.user.is_superuser:
            qs = qs.filter(project__created_by=request.user)
        return qs

Utility Functions

Create email utilities (app/utils/emails.py):

from django.core.mail import send_mail
from django.template.loader import render_to_string
from django.conf import settings

def send_project_status_notification(project, recipient_list):
    """
    Send email notification when project status changes

    Args:
        project: Project instance that was updated
        recipient_list: List of email addresses to notify
    """
    context = {
        'project': project,
        'status': project.get_status_display(),
    }

    # Render email templates
    html_message = render_to_string(
        'account/email/project_status_update.html',
        context
    )
    plain_message = render_to_string(
        'account/email/project_status_update.txt',
        context
    )

    send_mail(
        subject=f'Project Status Update: {project.title}',
        message=plain_message,
        html_message=html_message,
        from_email=settings.DEFAULT_FROM_EMAIL,
        recipient_list=recipient_list
    )

JavaScript Integration

Create project form handling (static/js/project-form.js):

document.addEventListener('DOMContentLoaded', function() {
    // Initialize date pickers
    const datePickers = document.querySelectorAll('input[type="date"]');
    datePickers.forEach(picker => {
        // Add any date picker initialization here
    });

    // Budget calculation
    const budgetInput = document.getElementById('id_total_budget');
    const expenseInputs = document.querySelectorAll('.expense-amount');

    function updateTotalExpenses() {
        const total = Array.from(expenseInputs)
            .reduce((sum, input) => sum + (parseFloat(input.value) || 0), 0);
        document.getElementById('total-expenses').textContent = total.toFixed(2);

        const budget = parseFloat(budgetInput.value) || 0;
        const remaining = budget - total;
        const remainingElement = document.getElementById('budget-remaining');

        remainingElement.textContent = remaining.toFixed(2);
        remainingElement.classList.toggle('text-red-600', remaining < 0);
        remainingElement.classList.toggle('text-green-600', remaining >= 0);
    }

    expenseInputs.forEach(input => {
        input.addEventListener('change', updateTotalExpenses);
    });
    budgetInput.addEventListener('change', updateTotalExpenses);
});

HTMX Integration (templates/projects/detail.html):

{% extends "layout/dashboard/layout.html" %}
{% load static %}

{% block extra_head %}
<script src="{% static 'js/htmx.min.js' %}" defer></script>
{% endblock %}

{% block content %}
<div class="container mx-auto px-4">
    <!-- Quick Add Expense Form -->
    <form hx-post="{% url 'expense_create' project.id %}"
          hx-target="#expense-list"
          hx-swap="afterbegin"
          class="mb-8">
        {% csrf_token %}
        <div class="flex gap-4">
            <input type="text" 
                   name="description" 
                   placeholder="Expense description"
                   class="form-input flex-1">
            <input type="number" 
                   name="amount" 
                   placeholder="Amount"
                   class="form-input w-32">
            <button type="submit" 
                    class="btn-primary">
                Add Expense
            </button>
        </div>
    </form>

    <!-- Expense List -->
    <div id="expense-list">
        {% for expense in expenses %}
            {% include "expenses/_expense_item.html" %}
        {% endfor %}
    </div>
</div>
{% endblock %}

Tailwind Configuration

Update tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./templates/**/*.html",
    "./static/**/*.js",
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          // ... other shades
          900: '#0c4a6e',
        },
      },
      spacing: {
        '128': '32rem',
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

Create build script in package.json:

{
  "scripts": {
    "build": "tailwindcss -i ./static/css/input.css -o ./static/css/output.css --watch"
  },
  "dependencies": {
    "tailwindcss": "^3.0.0",
    "@tailwindcss/forms": "^0.5.0"
  }
}

Testing

Create tests for models (app/tests/test_models.py):

from django.test import TestCase
from django.contrib.auth import get_user_model
from app.models import Project, Expense
from decimal import Decimal

User = get_user_model()

class ProjectTests(TestCase):
    def setUp(self):
        self.user = User.objects.create_user(
            username='testuser',
            password='testpass123'
        )
        self.project = Project.objects.create(
            title='Test Project',
            description='Test Description',
            created_by=self.user,
            total_budget=Decimal('1000.00')
        )

    def test_project_creation(self):
        self.assertEqual(self.project.title, 'Test Project')
        self.assertEqual(self.project.status, 'draft')
        self.assertEqual(self.project.get_total_expenses(), Decimal('0'))

    def test_budget_calculations(self):
        Expense.objects.create(
            project=self.project,
            description='Test Expense',
            amount=Decimal('500.00'),
            category='materials',
            created_by=self.user
        )

        self.assertEqual(self.project.get_total_expenses(), Decimal('500.00'))
        self.assertEqual(self.project.get_budget_remaining(), Decimal('500.00'))
        self.assertFalse(self.project.is_over_budget())

Security Enhancements

Add security middleware (config/settings/production.py):

MIDDLEWARE += [
    'django.middleware.security.SecurityMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

# Security settings
SECURE_BROWSER_XSS_FILTER = True
SECURE_CONTENT_TYPE_NOSNIFF = True
X_FRAME_OPTIONS = 'DENY'
CSRF_COOKIE_SECURE = True
SESSION_COOKIE_SECURE = True
SECURE_SSL_REDIRECT = True
SECURE_HSTS_SECONDS = 31536000  # 1 year
SECURE_HSTS_INCLUDE_SUBDOMAINS = True
SECURE_HSTS_PRELOAD = True

Resources

This article is part of the "Building a Project Budget Manager with Django" series. Check out Part 1, Part 2,Part 3, Part 4, and Part 5 if you haven't already!

Part 7: Deploying to PythonAnywhere

ngemuantony — Mon, 24 Mar 2025 10:04:49 +0000

Introduction

In this final part, we'll walk through deploying our Django Project Budget Manager to PythonAnywhere, a popular platform for hosting Python web applications. We'll cover each step in detail to ensure a smooth deployment process.

Prerequisites

Create a PythonAnywhere account:
- Visit www.pythonanywhere.com
- Sign up for a free account (or choose a paid plan for more features)
Prepare your project:

   # Create requirements.txt
   pip freeze > requirements.txt

   # Create runtime.txt (specify Python version)
   echo "python-3.9" > runtime.txt

Step 1: Configure Production Settings

Create a production settings file:

# config/settings/production.py

from .base import *

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = False

# Allow only your PythonAnywhere domain
ALLOWED_HOSTS = ['yourusername.pythonanywhere.com']

# Security settings
SECURE_SSL_REDIRECT = True
SESSION_COOKIE_SECURE = True
CSRF_COOKIE_SECURE = True
SECURE_BROWSER_XSS_FILTER = True
SECURE_CONTENT_TYPE_NOSNIFF = True
X_FRAME_OPTIONS = 'DENY'

# Static files configuration
STATIC_ROOT = '/home/yourusername/project_budget/staticfiles'
MEDIA_ROOT = '/home/yourusername/project_budget/media'

# Database configuration (using MySQL on PythonAnywhere)
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'yourusername$project_budget',
        'USER': 'yourusername',
        'PASSWORD': 'your-mysql-password',
        'HOST': 'yourusername.mysql.pythonanywhere-services.com',
        'OPTIONS': {
            'init_command': "SET sql_mode='STRICT_TRANS_TABLES'",
        },
    }
}

# Email configuration (using SMTP)
EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_PORT = 587
EMAIL_USE_TLS = True
EMAIL_HOST_USER = 'your-email@gmail.com'
EMAIL_HOST_PASSWORD = 'your-app-specific-password'

Step 2: Upload Project to PythonAnywhere

Open a Bash console on PythonAnywhere and clone your repository:

   # Navigate to home directory
   cd ~

   # Clone your repository
   git clone https://github.com/yourusername/project_budget.git

   # Create virtual environment
   mkvirtualenv --python=/usr/bin/python3.9 project_budget

   # Activate virtual environment
   workon project_budget

   # Install dependencies
   pip install -r project_budget/requirements.txt

Create necessary directories:

   mkdir ~/project_budget/staticfiles
   mkdir ~/project_budget/media

Step 3: Configure PythonAnywhere Web App

Go to the Web tab in PythonAnywhere dashboard
Click "Add a new web app" and choose:
- Your domain name (e.g., yourusername.pythonanywhere.com)
- Python version (3.9)
- Manual configuration
Configure the virtual environment:
- Virtual environment path: /home/yourusername/.virtualenvs/project_budget
Configure WSGI file (/var/www/yourusername_pythonanywhere_com_wsgi.py):

   import os
   import sys

   # Add project directory to Python path
   path = '/home/yourusername/project_budget'
   if path not in sys.path:
       sys.path.append(path)

   # Set environment variables
   os.environ['DJANGO_SETTINGS_MODULE'] = 'config.settings.production'
   os.environ['SECRET_KEY'] = 'your-secret-key'

   # Initialize Django
   from django.core.wsgi import get_wsgi_application
   application = get_wsgi_application()

Configure static files in the Web tab:
- URL: /static/
- Directory: /home/yourusername/project_budget/staticfiles

URL: /media/
Directory: /home/yourusername/project_budget/media

Step 4: Set Up Database

Go to the Databases tab and create a MySQL database:

   CREATE DATABASE yourusername$project_budget CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

Set a password for your MySQL database
Apply migrations:

   cd ~/project_budget
   python manage.py migrate

Create a superuser:

   python manage.py createsuperuser

Step 5: Collect Static Files

python manage.py collectstatic

Step 6: Final Configuration

Set up environment variables in the Web tab:

Click on the "Environment variables" section
Add the following variables:

 DJANGO_SETTINGS_MODULE=config.settings.production
 SECRET_KEY=your-secret-key
 DATABASE_URL=mysql://yourusername:password@yourusername.mysql.pythonanywhere-services.com/yourusername$project_budget

Enable HTTPS:
- In the Web tab, enable "Force HTTPS"
Reload your web app

Testing the Deployment

Visit your site at https://yourusername.pythonanywhere.com
Test the following:
- User registration and login
- Project creation and management
- File uploads
- Email functionality

Common Issues and Solutions

Static files not loading
- Check STATIC_ROOT and MEDIA_ROOT paths
- Run collectstatic again
- Verify static files configuration in Web tab
Database connection errors
- Verify database credentials
- Check database configuration in settings
- Ensure MySQL server is running
500 Server Error
- Check error logs in the Web tab
- Verify WSGI file configuration
- Check permissions on media and static directories
Email not working
- Verify email settings
- Check if your email provider allows SMTP
- Use app-specific password for Gmail

Maintenance Tasks

Updating the application:

   # Pull latest changes
   cd ~/project_budget
   git pull

   # Activate virtual environment
   workon project_budget

   # Install new dependencies
   pip install -r requirements.txt

   # Apply migrations
   python manage.py migrate

   # Collect static files
   python manage.py collectstatic

   # Reload web app from PythonAnywhere dashboard

Backing up data:

   # Backup database
   python manage.py dumpdata > backup.json

   # Backup media files
   zip -r media_backup.zip media/

Security Considerations

Keep secrets secure:
- Never commit sensitive data to version control
- Use environment variables for secrets
- Regularly rotate passwords and keys
Regular updates:
- Keep Django and other packages updated
- Monitor security advisories
- Apply security patches promptly
Monitor logs:
- Check access logs regularly
- Monitor error logs
- Set up alerts for suspicious activity

Additional Resources

Remember to regularly backup your database and media files, and keep your application and dependencies updated with security patches.

This article is part of the "Building a Project Budget Manager with Django" series. Check out Part 1, Part 2,Part 3, Part 4, Part 5,and Part 6 if you haven't already!

Getting Help

If you encounter issues during deployment:

Check the PythonAnywhere error logs
Visit the PythonAnywhere forums
Review Django deployment documentation
Join Django communities for support:
- Django Forum
- Django Discord
- Stack Overflow with tags: [django] and [pythonanywhere]

Project Budget Manager Tutorial Series

ngemuantony — Mon, 24 Mar 2025 09:54:16 +0000

This directory contains a comprehensive tutorial series on building a Project Budget Manager with Django. The series is designed to walks you through the entire process of creating a production-ready Django application.

Article Series

Project Setup and Structure
- Initial project setup
- Project structure and organization
- Development environment configuration
- Basic settings and dependencies
Authentication and Models
- User authentication with django-allauth
- Database models design
- Model relationships and methods
- Django admin customization
Views and Templates
- Setting up Tailwind CSS
- Creating base templates
- Implementing views and forms
- HTMX integration for dynamic interactions
Deployment and Production
- Production settings configuration
- Database setup with MySQL
- Server setup with Nginx and Gunicorn
- SSL certificate configuration
- Monitoring and maintenance

Key Features Covered

User authentication and authorization
Project creation and management
Budget tracking and expense management
Email notifications
Modern UI with Tailwind CSS
Interactive features with HTMX
Production deployment
Security best practices

Technologies Used

Django 5.0.2
Python 3.8+
MySQL
Tailwind CSS
HTMX
Nginx
Gunicorn
Let's Encrypt

Getting Started

To follow along with the tutorial series:

Start with Part 1: Project Setup
Follow each article in sequence
Code along with the examples
Refer to the complete source code in this repository

Contributing

If you find any issues or have suggestions for improvements:

Open an issue describing the problem or suggestion
Submit a pull request with proposed changes
Follow the existing code style and documentation patterns

License

This tutorial series and accompanying code are available under the MIT License. See the LICENSE file for more details.

https://dev.to/ngemuantony/building-a-project-budget-manager-with-django-part-6-advanced-features-48id

The evolution of social media platform

ngemuantony — Mon, 27 May 2024 09:07:10 +0000

The evolution of social media platform
Table of contents

Introduction
Early Days (1990s - early 2000s)
Rise of Blogging and Early Social Networks (2000-2005)
Dominance of Facebook and Expansion (2004-2010)
The Smartphone Era (2007 - 2015):
Diversification and Mobile Era (2010-2015)
The Era Of Visual Content (2010-2020)
Current Trends and Future Directions
Positive impacts of social media platforms
Negative impacts of social media platforms
Challenges of social media platforms
References

Introduction
Social media platforms are online services or websites which allow users to create and share content, interact with others, and be part of virtual communities. Examples include Facebook, Twitter, Instagram, Tiktok, LinkedIn, Snapchat, Pinterest, Reddit, Tumblr and YouTube.
The evolution of social media platforms has changed the way we connect, communicate and collaborate.
This evolution has been brought about by technology advancement, previous limitations and the ever growing user needs.
In this article we will cover the evolution of the social media platforms from early years to the present.

Early Days (1990s - early 2000s)

The foundations of social media were laid in the late 1990s and early 2000s with the emergence of platforms like Six Degrees, Friendster, and LiveJournal. These early platforms focused on building online communities and allowing users to create personal profiles, connect with friends, and share content:
BBS and Usenet: Bulletin Board Systems (BBS) and Usenet groups were early forms of online communities, allowing users to post messages and share files.
Six Degrees (1997): Often considered the first recognizable social media site, it allowed users to create profiles and friend others.

Rise of Blogging and Early Social Networks (2000-2005)

LiveJournal (1999): A platform for journaling and blogging, emphasizing community building.

https://www.livejournal.com

Friendster (2002): Focused on connecting friends and meeting new people, though it struggled with technical issues.

https://friendster.com

MySpace (2003): Became hugely popular for its customizable profiles and music sharing, attracting a large youth demographic.

https://myspace.com

LinkedIn (2003): Targeted professional networking, helping users to establish business connections.

https://www.linkedin.com

Dominance and Expansion of social media platforms (2004-2010)

Facebook (2004): Initially launched by Harvard student Mark Zuckerberg gaining popularity to college students. It is later expanded to the general public in 2006 and quickly became the dominant social network due to its user-friendly interface and wide range of features.
Monthly active users: 2.96 billion, Daily active users: 2 billion.

https://www.facebook.com

YouTube (2005): Revolutionized video sharing, becoming a platform for user-generated content and a new form of social media.
Monthly active users: 2.6 billion, Daily active users: 122 million.

https://www.youtube.com

X, formerly twitter: Introduced the concept of microblogging with its 140-character limit, providing a platform for short real-time updates, conversations and trending topics.
Monthly active users: 450 million, Daily active users: 206 million.

https://x.com

The Smartphone Era (2007 - 2015):
The introduction of the iPhone in 2007 and the subsequent proliferation of smartphones significantly impacted the social media landscape. Platforms like Instagram (2010) and Snapchat (2011) were designed with mobile-first experiences, capitalizing on the growing use of smartphones and the desire to share visual content.

Diversification and Mobile Era (2010-2015)

Instagram (2010): Focused on photo and video sharing with a simple, visually appealing interface, becoming a key player in the social media landscape.

https://www.instagram.com

Features:

1. Photo and Video Sharing:
    - Users can upload photos and videos to their profile.
    - Editing tools, filters, and tags can be added to enhance the posts.
    - Users can caption their posts, tag other users, and add location information.
2. Stories:
    - Photos and videos that disappear after 24 hours.
    - Stories can include text, stickers, music, and interactive elements like polls and questions.
    - Highlights allow users to save and showcase their Stories on their profile.
3. Reels:
    - Short, engaging videos similar to TikTok.
    - Users can add music, effects, and new creative tools.
    - Reels can be shared on the Explore page to reach a wider audience.
4. IGTV:
    - A platform for longer videos.
    - Users can create and upload videos up to an hour long (or longer for verified accounts).
    - IGTV videos can be previewed in the feed.
5. Direct Messaging:
    - Private messaging for direct communication.
    - Includes text, photos, videos, and disappearing messages.
    - Group chats and video calls are also supported.

Pinterest (2010): Allowed users to "pin" images to virtual boards, catering to interests and hobbies.

https://www.pinterest.com

Features:

1. Pins:
    - Users can save (pin) images, videos, and links to their boards.
    - Pins can be customized with descriptions, tags, and links back to the original source.
2. Boards:
    - Collections of pins organized by themes or topics.
    - Boards can be public or private, and users can invite others to collaborate on them.
3. Home Feed:
    - A personalized feed of pins based on user interests and activity.
    - Includes content from followed accounts and recommended pins.
4. Explore:
    - A section for discovering trending and popular content across various categories.
    - Provides curated content and inspiration based on themes like fashion, home decor, food, and travel.

Snapchat (2011): Introduced ephemeral content with disappearing messages and stories, appealing to a younger audience.

https://www.snapchat.com

Features:

Snaps:
- Send photos and videos that disappear after being viewed.
- Add text, drawings, stickers, and filters to personalize Snaps.
- Snaps can be sent to individual friends or added to your Story.
Stories:
- Share Snaps that stay live for 24 hours.
- Friends can view Stories as many times as they like within that period.
- My Story is visible to all your friends, while Custom Stories can be shared with selected friends or groups.
Chat:
- Send text messages, photos, videos, and voice notes.
- Messages disappear after they are viewed, unless saved in the chat.
- Includes stickers, Bitmojis, and GIFs for more expressive chats.

WhatsApp (2009) and WeChat (2011): Emerged as major messaging platforms with social features.

https://whatsapp.com

Features:

Text Messaging:
- Send and receive text messages.
- Supports rich text formatting like bold, italics, and strikethrough.
Multimedia Messaging:
- Share photos, videos, and audio recordings.
- Supports GIFs and stickers for more expressive conversations.
Voice and Video Calls:
- Make free voice and video calls over the internet.
- Supports one-on-one and group calls.

Other Features:

Group communication
End-To-End Encryption
Whatsapp Status

Wechat:
https://www.wechat.com

Features:

Text Messaging:
- Send and receive text messages.
- Supports rich text features like emojis and stickers.
Voice and Video Calls:
- Make free voice and video calls over the internet.
- Supports one-on-one and group calls.
Multimedia Messaging:
- Share photos, videos, audio messages, and documents.
- Supports GIFs, stickers, and short videos.
Group Chats:
- Create group chats with up to 500 members.
- Share messages, media, and documents within the group.
- Admin controls for managing group settings and participants.

The Era Of Visual Content (2010-2020)
Social media platforms evolved to cater to the demand of more visual forms of content since there was an advancement in the user preferences.
Instagram, Snapchat, and later TikTok (2016) gained widespread popularity, enabling users to capture, edit, and share photos, videos, and short-form content.

Live Streaming and Short-Form Content (2015-Present)

Periscope (2015): Pioneered live streaming, integrated with Twitter for real-time broadcasts.

https://www.periscope.tv

TikTok (2016): Originally launched as Douyin in China, it gained global popularity for its short, engaging video content, using powerful algorithms to surface trending content.

https://tiktok.com

Clubhouse (2020): Popularized audio-based social networking, focusing on live, drop-in conversations.

https://www.clubhouse.com

Current Trends and Future Directions

Integration with E-commerce: Platforms like Instagram and Facebook have integrated shopping features, enabling social commerce.
Augmented Reality (AR) and Virtual Reality (VR): Platforms like Snapchat and emerging metaverse platforms are exploring immersive experiences.
Privacy and Data Security: Growing concerns over data privacy and handling of user information led to social media platforms facing increased scrutiny and had to adapt their policies and practices. This led to the implementation of stronger privacy controls, data transparency measures, and user empowerment features.
AI and Personalization: Enhanced algorithms and AI are driving more personalized content and advertisements.
The Integration Of Emerging Technologies
Social media platforms have integrated emerging technologies, such as artificial intelligence, augmented reality, and virtual reality, to enhance user experiences, content creation, and engagement. This has led to the development of features like AR filters, interactive experiences, and AI-powered content recommendations. Positive impacts of social media platforms

Social media platforms have brought about several positive impacts on individuals, societies, and various aspects of our lives:

Connection and Communication: Social media enables people to connect and communicate with friends, family, and acquaintances regardless of geographical barriers. It fosters relationships, facilitates staying in touch, and provides a platform for sharing updates, photos, and memories.
Information Sharing and Awareness: Social media serves as a powerful tool for sharing information, news, and updates on a wide range of topics. It helps raise awareness about social issues, current events, and humanitarian causes, mobilizing support and driving positive change.
Community Building: Social media platforms facilitate the formation of online communities based on shared interests, hobbies, identities, or causes. These communities provide support and a sense of belonging to individuals who may feel isolated or marginalized in offline spaces.
Education and Learning: Social media platforms offer access to a wealth of educational resources, including tutorials, webinars, and online courses. They provide opportunities for lifelong learning, skill development, and knowledge sharing in various fields, from academics to hobbies to professional development.
Business and Entrepreneurship: Social media has transformed the way businesses engage with customers, market their products or services, and build brand awareness. It offers cost-effective marketing tools, targeted advertising options, and opportunities for businesses to connect directly with their target audiences.
Crisis Response and Support: Social media plays a crucial role in crisis response, providing real-time updates, emergency alerts, and information dissemination during natural disasters, humanitarian crises, or public health emergencies. It also facilitates fundraising efforts and mobilizes support for affected communities.
Political Engagement and Activism: Social media platforms empower individuals to participate in political discourse, express their opinions, and advocate for social and political change. It facilitates grassroots activism, mobilizes communities, and holds governments and institutions accountable.
Cultural Exchange and Diversity: Social media exposes users to diverse perspectives, cultures, and experiences from around the world, fostering cross-cultural understanding, empathy, and appreciation for diversity. It breaks down barriers and promotes intercultural dialogue and exchange. Negative impacts of social media platforms

Social media platforms have brought about several negative impacts on individuals, societies, and various aspects of our lives:

Addiction and Dependence: Social media can be addictive.Individuals may find it difficult to disconnect from social media, leading to distractions and decreased productivity.
Cyberbullying and Harassment: Social media provides a platform for cyberbullying, harassment, and online abuse.
Privacy Concerns: Social media platforms often collect vast amounts of user data, raising concerns about privacy breaches, data misuse, and surveillance.
Distorted Self-Image: Social media often portrays unrealistic standards of beauty, success, and lifestyle, leading to feelings of inadequacy, body image issues, and self-esteem problems, especially among young users.
Sleep Disturbance: The use of social media before bedtime can disrupt sleep patterns and quality. The blue light emitted by screens interferes with the production of melatonin, making it harder to fall asleep and negatively affecting overall sleep health.
Decreased Attention Span: Constant exposure to short-form content and notifications on social media platforms can lead to decreased attention spans and difficulties in focusing on tasks requiring sustained concentration. Challenges of social media platforms

Social media platforms face various challenges, including:

Privacy Concerns: Social media platforms collect vast amounts of user data, raising concerns about privacy breaches, data misuse, and surveillance. Users may be unaware of how their data is being used and may have limited control over their privacy settings.
Misinformation and Fake News: Social media facilitates the rapid spread of misinformation, rumors, and fake news. False or misleading information can easily go viral, leading to public confusion, polarization, and undermining trust in traditional media and institutions.
Cyberbullying and Harassment: Social media provides a platform for cyberbullying, harassment, and online abuse. Individuals, particularly young people, may experience bullying, hate speech, or threats, leading to psychological distress and negative mental health outcomes.
Addiction and Mental Health Impacts: Social media can be addictive, leading to excessive use and dependency. Excessive use of social media has been linked to various mental health issues, including anxiety, depression, loneliness, and low self-esteem.
Online Safety and Security: Social media platforms face challenges related to online safety and security, including hacking, account hijacking, phishing scams, and identity theft. Users may be vulnerable to online predators, fraudsters, and malicious actors seeking to exploit personal information.
Regulatory and Legal Issues: Social media platforms operate in a complex regulatory environment, facing scrutiny from lawmakers and regulators regarding issues such as data privacy, content moderation, antitrust concerns, and the spread of harmful content online. Compliance with diverse regulatory frameworks across different jurisdictions poses challenges for global platforms.
Content Moderation and Trust: Social media platforms grapple with the challenge of moderating user-generated content to prevent the spread of harmful or illegal content, including hate speech, violence, misinformation, and extremist propaganda, while upholding principles of free speech and user expression. Inconsistent or opaque moderation policies can erode trust and credibility.
Monetization and Advertiser Trust: Social media platforms rely heavily on advertising revenue, which can incentivize attention-grabbing content and clickbait, potentially compromising user experience and trust. Advertiser trust may be undermined by concerns about brand safety, ad fraud, and the effectiveness of advertising metrics.
Ethical and Societal Impacts: Social media platforms raise broader ethical and societal questions about their role in shaping public discourse, influencing behavior, and exacerbating societal challenges such as misinformation, polarization, and mental health issues. Platforms must grapple with these complex ethical dilemmas while striving to uphold user trust and social responsibility. Conclusion

The evolution of social media has been a rapid journey, fundamentally altering how we interact with the world around us. As we move forward, it's important to remain aware of both the possibilities and pitfalls that lie ahead. By fostering open dialogue, holding platforms accountable, and advocating for ethical practices, we can shape the future of social media to be a positive force for connection, creativity, and positive social change.

Moreover, the social media landscape continues to evolve, with change and shift in user preferences, emergence of new platforms and the ongoing integration of emerging technologies. As the roles of social media in daily life continue to grow, platforms will need to adapt to meet new expectations of the users, as that will be addressing the challenges posed by privacy, content moderation and the impact of social media in the society at large.

References
https://www.youtube.com/watch?v=x1caQa_7CpE&

https://phrasee.co/news/the-history-of-social-media-a-timeline/#:~:text=August%202003%3A%20Myspace%20is%20founded,of%20America's%20Funniest%20Home%20Videos.

https://online.maryville.edu/blog/evolution-social-media/

Deploying a Django Application ON "pythonanywhere".

ngemuantony — Mon, 27 May 2024 08:25:06 +0000

Table Of Content

Introduction
Setting up Django Project Locally
GitHub Upload Guide
Deploying Project on PythonAnywhere Guide
Conclusion
References

Introduction

“Pythonanywhere” is a popular cloud-based platform that allows developers to host Python applications effortlessly. It provides a user-friendly environment for deploying Django applications, making it a preferred choice for both beginners and seasoned developers. This document is a step by step guide on how to deploy django application on "pythonanywhere".

Step 1: Set up your Django Project (Local Changes)

Create a Projects Directory

Create a directory to keep your Django projects organized and navigate into it.

mkdir -p ~/Desktop/Projects
cd ~/Desktop/Projects

I have created Projects Folder in Desktop and run the commands above, you should see something like:

Set Up and Activate a Virtual Environment

Create a virtual environment to isolate your project's dependencies.

python3 -m venv env
source env/bin/activate

You will see (env) at the beginning, this ensures that you are on activated virtual environment.

Install Django

With the virtual environment activated, install Django.

pip install django

Wait until the installation is complete:

Create a New Django Project

Now, create your Django project named "deploy_on_pythonanywhere".

django-admin startproject deploy_on_pythonanywhere

if you encounter an error similar to:

Don’t panic, run the command below starting with the path where you installed django:

 ~/Desktop/Projects/env/bin/django-admin startproject deploy_on_pythonanywhere

Navigate into the Project Directory

Change the directory to the newly created project.

cd deploy_on_pythonanywhere

Create a New App within the Project
Create a new app named "deploy_on_anywhere".

python manage.py startapp deploy_on_anywhere
Generate requirements.txt File

Generate the requirements.txt file to list all the dependencies.

Ensure you are on same path as manage.py before running the command below:

pip freeze > requirements.txt

Finally, Open your locally created Project on editor of your Choice, I will go with Visual Studio Code.

The file structure of your project should look like:

Configure “deploy_on_anywhere” app in your project settings.

Navigate to:

deploy_on_pythonanywhere/settings.py

Configures the URLs in your project settings.

Navigate to:

deploy_on_pythonanywhere/url.py

Set up the app’s URL configuration for your app:

Navigate to urls.py or create one if it doesn’t exist:

deploy_on_anywhere/urls.py

Create your first view for the app:

Views are a critical component that handles the logic for processing user requests and returning appropriate responses.

Navigate to:

deploy_on_anywhere/views

Apply database migrations:

Database migrations in Django are a way to propagate changes you make to your models (like adding a field or changing a field type) into your database schema.

Run the following command on the integrated terminal:

  python manage.py migrate

Run the development server:

python manage.py runserver

STEP 2 : UPLOADING PROJECT ON GITHUB.

Create new Repository on your Github account, name it deploy_on_anywhere

You can choose either Private or Public repo, I will choose public for everyone to view my project, I will attach the link to the project in reference.

Save the changes.

Back on your IDE integrated terminal, run the commands below;

(Note: you must have git installed on your machine and also globally configure it. refer to {Link to git setup documentation on reference}.

git init
git add README.md
git remote add origin git@github.com:DevNathanHub/deploy_on_anywhere.git
git add .
git commit -m "first commit for deploying django on pythonanywhere"
git branch -M main
git push -u origin main

Finally, Refresh your github after few minutes and you will see the changes updated,

Step 3: DEPLOYING PROJECT ON "Pythonanywhere"

Create an account on "Pythonanywhere".
After registering you can see the page dashboard below:

On the dashboard page on the top right next to Dashboard click Console and select Bash.

Clone your own project, copy the link from your github repository;

Then run the command on bash;

git clone [paste the copied link]

Create and setup environment variables and copy the path of your directories which you installed on bash similar to how you did locally. The commands and their respective outputs are shown below:

Navigate to your project directory and install requirements using the commands below:

cd deploy_on_anywhere
pip install -r requirements.txt

On the dashboard page, top right click on the Web option and select " Add a new web app".

Click on next and follow the procedure
Select Django as the framework:

Select the python version to use. In this case, we are using Python version 3.10

Open the WSGI Configuration file under the web section.

Edit WSGI configuration file on line no. 12 and 17 replace the word mysite with your project name which you cloned from GitHub.

Now it looks like this and then click on save:

Select Virtualenv section under Web:

Enter the path of Virtualenv as we created using bash (refer above pwd command for path)

Click on Reload under the Web section and visit the link.

Conclusion

By following this comprehensive guide, you should now have a fully functioning Django project set up and running on "pythonanywhere.com".

References:

How to Install git on;
Linux, Windows and macOs.
Startup Github Repo Click Here.
Create Account on Python Anywhere
YouTube Video Reference on How to Deploy Django Project Watch Tutorial.

https://www.geeksforgeeks.org/how-to-deploy-django-project-on-pythonanywhere/