=## 🧠 Inspiration
The tech industry evolves rapidly, and keeping up with the top news daily can be overwhelming. I imagined a platform that could automatically gather, summarize, and visually present the top 10 tech news stories every day — all powered by AI. That idea became DailyTechTop10.
My inspiration came from the rise of AI-driven content tools, and I wanted to combine them with my interest in tech journalism and frontend development. This project is my first step into exploring how AI can power smarter, faster news experiences.
🚧 What it does
Right now — it doesn't do much, and that’s okay.
DailyTechTop10 is currently just a demo landing page. The core features — fetching news, summarizing content, and generating images — are not functional yet because the API keys for services like NewsAPI.org and Stability AI haven’t been activated.
Planned Features (not yet implemented):
- Real-time tech news aggregation (via NewsAPI)
- AI summarization (via OpenAI or Gemini)
- Image generation for news headlines (via Stability AI)
- Daily auto-refresh of top 10 news
- Tagging, scoring, and intelligent filtering
This submission is a proof of concept meant to showcase the idea and UI/UX flow of what this project could become in the future.
🛠️ How we built it
I built the landing page using the following stack:
- React 18 + TypeScript – for structured frontend development
- Vite – as the build tool and dev server
- Tailwind CSS – for fast, utility-based styling
- Lucide Icons – for simple, scalable UI icons
- Bolt.new – for rapid prototyping
The architecture follows a JAMstack pattern, where all backend operations are designed to happen via client-side API calls (e.g., NewsAPI, Stability AI). No server or backend database is involved.
Deployment was done using Netlify as a static site.
🧱 Challenges we ran into
- API Activation Delays: Couldn't enable the required API keys (NewsAPI, Stability AI, Gemini) in time, so all features relying on those are inactive.
- Learning Curve: I’m still learning how to work with AI and APIs, so building a full AI-powered system was out of reach for this hackathon.
- No Real-Time News: Since there's no active API, the site doesn’t refresh or display live news — it's just a placeholder UI.
✅ Accomplishments that we're proud of
- Designed and built a clean landing page that clearly communicates the project vision.
- Learned how to structure a JAMstack-based AI integration plan.
- Successfully deployed a static frontend with a modular, API-ready architecture.
- Took the initiative to participate in a hackathon with a future-facing idea even though I’m still learning the skills required to build it.
📚 What we learned
- You don’t need a fully working backend to share a big idea.
- How to build scalable and API-ready frontend architecture.
- Basics of how AI services like NewsAPI, Gemini, and Stability AI are structured and how to plan their integration.
- How to work with tools like Vite, Tailwind CSS, and Bolt.new to quickly prototype ideas.
🚀 What's next for DailyTechTop10
- Activate API keys for NewsAPI, OpenAI/Gemini, and Stability AI.
- Implement real-time news fetching, AI summarization, and image generation.
- Add daily refresh functionality to update the top 10 tech stories.
- Explore user engagement features like comments, reactions, or community voting.
- Continue learning AI development to bring this idea to life as a fully functional product.
For now, this project is just a demo — but it’s a first step toward a real AI-powered news platform. I hope to continue building and improving it in the future.
Built With
- css
- googlegemini
- html
- javascript
- newsapi.org
- react
- stability.ai
- tailwindcss
Log in or sign up for Devpost to join the conversation.