My project 6 : Top 10 News App(with Flask + Hacker News API)
Source: Dev.to
📖 Introduction
While studying German, I often use news articles as reading practice.
But sometimes it isn’t easy to access news quickly, especially when I just want a simple list of headlines I can read through.
So I decided to build a small project that automatically fetches the latest top stories and displays them in a clean, simple interface.
This way, I can check news easily — and at the same time, learn by building something useful with Flask and an external API.
🧱 1. Project Overview
A minimal Flask web app that retrieves the Top 10 stories from Hacker News and displays their titles and URLs.
What this project demonstrates
- Fetching external API data
- JSON parsing
- Flask routing & template rendering
- Passing backend data to HTML
- UI styling using Tailwind CSS
Small but perfect for learning API integration.
📂 2. Project Structure
news_app/
│
├── app.py # Main Flask app
├── tempCodeRunnerFile.py # Auto‑generated runner file (VS Code)
└── templates/
└── index.html # Front‑end template📝 What is tempCodeRunnerFile.py?
VS Code automatically generates this file when you run a single file or selected code.
It contains the same logic as app.py but is only used for temporary execution.
I included it here in the blog so the project structure matches my real local folder exactly.
🌐 3. API Used — Hacker News API
Hacker News provides a free JSON API hosted on Firebase.
Top stories ID list
https://hacker-news.firebaseio.com/v0/topstories.jsonRetrieve a single story
https://hacker-news.firebaseio.com/v0/item/.jsonWe simply fetch the top‑stories list and take the first 10 items.
🖥️ 4. Backend Code — app.py
from flask import Flask, render_template
import requests
app = Flask(__name__)
TOP_STORIES_URL = "https://hacker-news.firebaseio.com/v0/topstories.json"
ITEM_URL = "https://hacker-news.firebaseio.com/v0/item/{}.json"
@app.route("/")
def index():
# 1) Fetch top story IDs
ids = requests.get(TOP_STORIES_URL).json()
# 2) Retrieve the top 10 stories
news_list = []
for item_id in ids[:10]:
item = requests.get(ITEM_URL.format(item_id)).json()
news_list.append({
"title": item.get("title"),
"url": item.get("url")
})
# 3) Render the HTML template
return render_template("index.html", news=news_list)
if __name__ == "__main__":
app.run(debug=True)📄 5. tempCodeRunnerFile.py (Auto‑generated)
from flask import Flask, render_template
import requests
app = Flask(__name__)
TOP_STORIES_URL = "https://hacker-news.firebaseio.com/v0/topstories.json"
ITEM_URL = "https://hacker-news.firebaseio.com/v0/item/{}.json"
@app.route("/")
def index():
ids = requests.get(TOP_STORIES_URL).json()
news_list = []
for item_id in ids[:10]:
item = requests.get(ITEM_URL.format(item_id)).json()
news_list.append({
"title": item.get("title"),
"url": item.get("url")
})
return render_template("index.html", news=news_list)
if __name__ == "__main__":
app.run(debug=True)🎨 6. Front‑end Template — templates/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Top News</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
body { font-family: 'Inter', sans-serif; }
</style>
</head>
<body>
<h2>Top News</h2>
<h3>Hacker News Top 10</h3>
{% for item in news %}
<div>
<span>{{ loop.index }}</span>
<strong>{{ item.title }}</strong>
{% if item.url %}
<a href="{{ item.url }}">{{ item.url }}</a>
{% else %}
<span>No link available</span>
{% endif %}
</div>
{% endfor %}
</body>
</html>That’s it! Run app.py, open http://127.0.0.1:5000/ in your browser, and you’ll see the latest ten Hacker News headlines displayed with a clean Tailwind‑styled UI. Happy coding!
7. How to Run
Install dependencies
pip install flask requestsRun the app
python app.pyOpen in a browser
http://127.0.0.1:5000📚 8. What I Learned
- How to work with public APIs
- How to parse JSON properly
- How Flask routing + rendering works
- How to pass API data into HTML templates
- Basic UI building with TailwindCSS
A lightweight but very practical project.
📌 9. Future Improvements (Easy Tasks)
- Show 20, 30, or 50 top stories
- Display author name and score
- Add “time ago” formatting
- Add dark/light mode toggle
- Add search/filter features
Template snippet (for reference)
{{ item.url }}
{% endif %}
{% endfor %}
{% if not news %}
No news available.
{% else %}
Data provided by Hacker News API
{% endif %}