← Back to Projects
MkViewer - UpgradedBlog [Read-Only]
ZIP
EXPLORER
Initializing MkViewer...
README.md

(Proj. 59) - 🌅 Dawn Blogs (Flask App)

A Flask-based blogging platform that fetches blog posts from an external JSON API. Users can view all posts on the homepage, navigate to individual posts, and access additional pages like About and Contact. (README generated by AI)

📌 Features

  • Fetches blog data from an external API
  • Displays blog titles and subtitles on the homepage dynamically
  • Dynamic routing for individual blog posts
  • Supports static pages: About and Contact
  • 404 page for invalid routes
  • Uses Flask + Jinja2 templating
  • Responsive UI with Bootstrap

🛠️ Tech Stack

  • Python
  • Flask
  • HTML/CSS (Bootstrap + Jinja2 templates)
  • Requests library
  • Font Awesome & Google Fonts

📂 Project Structure

. ├── main.py ├── templates │ ├── index.html │ ├── post.html │ ├── about.html │ ├── contact.html │ └── error.html ├── static │ ├── css │ │ └── styles.css │ └── assets │ └── images, favicon.ico, etc.

🚀 Getting Started

1️⃣ Install Dependencies

Make sure Python is installed, then install Flask and Requests:

bash pip install flask requests

2️⃣ Run the Application

bash python main.py

Flask will start a local development server in debug mode.

3️⃣ Open in Browser

Visit:

http://127.0.0.1:5000/

🧠 How It Works

main.py

  • Fetches blog data from:

https://api.npoint.io/ed8fac99f5ee10634689

  • Routes:

  • / → Renders index.html with all posts

  • /posts/<id> → Renders post.html for a specific post ID; shows error.html if not found
  • /about.html and /contact.html → Renders corresponding static pages
  • Any other route → error.html (custom 404 page)

index.html

  • Loops through all posts and displays:

  • Title

  • Subtitle
  • Author & date
  • "View Post" button linking to /posts/<id>

post.html

  • Displays a single blog post:

  • Title

  • Subtitle
  • Author & date
  • Full post content

about.html & contact.html

  • About page with author info and description
  • Contact page with a functional SB Forms contact form
  • Both pages use consistent navigation and footer components

error.html

  • Custom 404 page with message and a "Return Home" button
  • Matches the blog’s aesthetic and branding

⚠️ Notes

  • Runs in debug mode for development
  • Blog data is read-only and fetched from the API on each server start
  • No database is required
  • External assets include Bootstrap, Font Awesome, and Google Fonts

📚 Learning Goals

This project helps you practice:

  • Flask routing with dynamic URLs
  • Jinja2 templating for dynamic pages
  • Integrating external APIs in Python
  • Responsive web design with Bootstrap
  • Handling 404 errors gracefully

✅ Changes from Previous Blog Project

Compared to NewGen Blogs, Dawn Blogs introduces:

  • Additional pages: about.html and contact.html
  • Custom 404 page (error.html)

  • Improved routing:

  • Supports /posts/<id> for individual posts

  • Handles arbitrary routes dynamically
  • Better front-end integration with Bootstrap and Font Awesome
  • Static assets management (CSS, images, favicon)
  • Overall more polished, user-friendly interface and branding