A space for African voices — articles, opinions, and stories.

Live Site: https://afriblog.onrender.com
Repository: https://github.com/f-lajoc/AfriBlog

• Overview
• Features
• Design System
• Tech Stack
• Project Structure
• Setup Instructions
• Environment Variables
• Running the Project
• Deployment
• Capstone Requirements Checklist
• Demo Video
• Author

AfriBlog is a full-stack community blogging platform built as a capstone project for the IDA/3MTT Software Development programme. It celebrates African writers, stories, and perspectives by providing a space to publish, discover, and discuss content across a range of categories.

The project covers content-heavy layout design, Django CRUD operations, user authentication, a draft/publish workflow, comment system, SEO-friendly slugs, and a responsive editorial UI — all built without CSS frameworks.

• Browse all published articles on a paginated homepage (6 per page)
• Featured article hero section with cover image, title overlay, author, and read time
• Filter articles by category via the category bar
• Search articles by title or body content
• Read full articles with author sidebar, related posts, and social share buttons
• Leave comments on articles (no account required)
• Dark / Light mode toggle with localStorage persistence
• Reading progress bar on article pages

• Register and log in to an author account
• Write and publish articles with a free-text category input (creates new categories automatically)
• Upload a cover image per article
• Save articles as drafts and return to edit them later
• Publish, update, or delete your own posts
• View all your drafts in a dedicated Drafts page
• Author profile page showing all posts by that writer

• Auto-generated SEO-friendly slugs from post titles (collision-safe)
• Estimated read time calculated from word count
• Success and error messages across all key actions (login, register, post, delete)
• Django admin panel for moderating posts, categories, and comments
• Responsive design — works on mobile, tablet, and desktop

The design follows an editorial, warm, and literary aesthetic — inspired by premium African print magazines.

AfriBlog/
├── blog/
│   ├── migrations/
│   ├── static/
│   │   ├── css/
│   │   │   └── style.css
│   │   ├── js/
│   │   │   └── main.js
│   │   └── images/
│   │       └── favicon.png
│   ├── templates/
│   │   └── blog/
│   │       ├── base.html
│   │       ├── index.html
│   │       ├── detail.html
│   │       ├── form.html
│   │       ├── drafts.html
│   │       ├── category.html
│   │       ├── profile.html
│   │       ├── login.html
│   │       ├── register.html
│   │       └── post_confirm_delete.html
│   ├── models.py
│   ├── views.py
│   ├── urls.py
│   └── admin.py
├── afriblog/
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── media/
├── requirements.txt
├── .gitignore
└── README.md

• Python 3.10 or higher
• pip
• Git

git clone https://github.com/f-lajoc/AfriBlog.git
cd AfriBlog

# Windows
python -m venv venv
venv\Scripts\activate

# macOS / Linux
python3 -m venv venv
source venv/bin/activate

pip install -r requirements.txt

python manage.py makemigrations
python manage.py migrate

python manage.py createsuperuser

python manage.py collectstatic

Create a .env file in the root directory with the following (or set them directly in settings.py for local development):

SECRET_KEY=your-secret-key-here
DEBUG=True
ALLOWED_HOSTS=127.0.0.1,localhost

For production on Render, set DEBUG=False and add your Render domain to ALLOWED_HOSTS.

python manage.py runserver

Visit http://127.0.0.1:8000 in your browser.

To access the admin panel, go to http://127.0.0.1:8000/admin and log in with your superuser credentials.

This project is deployed on Render using the following build configuration:

Build command:

pip install -r requirements.txt && python manage.py makemigrations && python manage.py migrate

Start command:

gunicorn afriblog.wsgi:application

Static files are served via WhiteNoise. Media files (cover images) are stored in the media/ directory and served via Django's media URL configuration in development.

• Semantic HTML throughout all pages (article, aside, section, header, footer)
• Featured article hero section with cover image, title overlay, author, and read time
• Article card component with category chip, title, excerpt, author avatar, and date
• Magazine-style CSS Grid layout for article listing
• Full Article Detail page with author bio sidebar, social share buttons, and related articles
• Reading progress bar linked to scroll position
• Category filter via category bar
• Comment form with DOM append and success/error notices
• Dark / Light mode toggle with localStorage persistence
• Fully responsive — mobile, tablet, and desktop
• Featured badge (gold ribbon) on featured articles
• Font Awesome icons throughout
• Favicon and custom animations

• Django models: Post, Category, Comment
• Post fields: title, slug, body, cover_image, category, author, status, featured, created_at
• List, detail, create, update, and delete views for posts
• Auto-generated SEO-friendly slugs via slugify (collision-safe)
• Author restriction — only the post's author can edit or delete
• Comment submission view with approved comments displayed under posts
• Draft / Published status — authors can save drafts before publishing
• Search across post title and body using Django Q objects
• Pagination — 6 articles per page
• Django admin panel configured for posts, categories, and comments
• User authentication — register, login, logout
• Django messages framework for success/error notifications
• .gitignore file included

📹 Watch the demo presentation

Bolaji Funmilola (Lajoc_devs)
Frontend Developer & Technical Writer

• GitHub: @f-lajoc
• LinkedIn: linkedin.com/in/funmilola-b-b4044b13b
• Twitter/X: @lajoc__
• Instagram: @lajoc_devs

Built as part of the IDA/3MTT Software Development Capstone — 2026