A responsive, theme-aware, and API-driven tech news blog—TechForge fetches the latest headlines from GNews & NewsAPI, and displays them in a clean, modern interface built with Tailwind CSS, vanilla JavaScript, and a sprinkle of 🚀 performance optimizations.
Coming soon…
You can also serve thedist/folder with any static-file host (GitHub Pages, Netlify, Surge, etc.).
- Real-time Tech Headlines from GNews & NewsAPI
- Six Categories: All, AI, Gadgets, Robotics, Mobile, Startups (customizable)
- Dark / Light Mode toggle, with system-preference detection and
localStoragepersistence - Skeleton Loading States for smooth UX while articles load
- Responsive Grid: adapts from mobile (1-col) to desktop (3-col)
- Lazy-loaded Images to save bandwidth
- Clean, Accessible Markup with semantic HTML and ARIA labels
techforge/
├── public/
│ └── index.html
├── src/
│ ├── config.js # your GNEWS & NEWSAPI keys
│ ├── script.js # main theme + fetch + render logic
│ └── styles.css # custom utilities (if any)
├── assets/
│ ├── logo.svg
│ └── placeholder.png
├── dist/ # production-ready build (optional)
├── .gitignore
├── LICENSE
└── README.md
git clone https://github.com/your-username/techforge.git
cd techforgeNo build step required—everything is vanilla. If you want to run a local dev server:
# Using http-server (install globally if needed)
npm install -g http-server
http-server public/ -c-1Or with VS Code’s Live Server extension.
Create src/config.js (it’s gitignored) in the project root:
// src/config.js
window.API_KEYS = {
GNEWS: 'YOUR_GNEWS_API_KEY_HERE',
NEWSAPI: 'YOUR_NEWSAPI_KEY_HERE'
};Navigate to http://localhost:8080 (or your chosen port) to see TechForge in action!
- Theme Initialization
Inline script in
<head>readslocalStorage+ system settings, and immediately adds/removes thedarkclass to avoid flicker. - Theme Toggle
A button toggles
document.documentElement.classListand syncs state tolocalStorage, swapping 🌙 / 🌞 icons. - Category Buttons
Click to highlight a category, then fire off
fetchNews(category). - Data Fetching
Parallel calls to GNews & NewsAPI, merge and truncate to 6 articles, then
renderArticles(). - Skeleton Loader While awaiting API data, placeholder cards animate to keep the UI feeling snappy.
- Add pagination or “Load more”
- Search bar for custom queries
- Article bookmarking (localStorage)
- Offline support with service workers
- Multi-language support
- Fork it
- Create your feature branch (
git checkout -b feature/fooBar) - Commit your changes (
git commit -am 'Add some fooBar') - Push to the branch (
git push origin feature/fooBar) - Open a Pull Request
This project is licensed under the MIT License. See LICENSE for details.
Soham Babrekar
- 🔗 GitHub
Built with ❤️ and ☕ by Soham Babrekar. Enjoy your daily dose of tech news!