🚀 TechieTrends - Your Daily Tech Intelligence Hub

link:https://techetrends-copy-1af5.vercel.app/

TechTrends is a modern news aggregation platform that curates the latest tech news, trending GitHub repositories, and developer discussions from multiple sources into one beautiful, personalized feed.

🎯 What This App Does

TechTrends solves the problem of information overload for developers and tech enthusiasts.

Instead of checking multiple websites daily (Hacker News, GitHub Trending, TechCrunch, Product Hunt), users get:

• Morning Bytes: Top 5 curated stories delivered fresh daily
• Personalized Feed: AI-categorized content based on your interests
• Enhanced Cards: Rich content with metadata, stats, and context
• Clean Interface: Distraction-free reading experience
• Smart Categorization: Auto-tagged by AI Frontier, Web Dev, Dev Tools, Startups

---

🏗️ Project Architecture

Frontend (Next.js)

frontend/
├── 📁 components/           # React components
│   ├── 📁 layout/          # Header, Footer, Navigation
│   └── 📁 ui/              # Reusable UI components
├── 📁 pages/               # Next.js pages (routes)
├── 📁 lib/                 # API clients and utilities
├── 📁 config/              # Site configuration
├── 📁 styles/              # Tailwind CSS styles
├── 📁 hooks/               # Custom React hooks
└── 📁 utils/               # Helper functions

Backend (Node.js + Express)

backend/
├── 📁 models/              # MongoDB data models
├── 📁 routes/              # API endpoint handlers
├── 📁 services/            # Business logic & external APIs
├── 📁 middleware/          # Authentication, error handling
├── 📁 utils/               # Helper functions
└── server.js               # Express server entry point

---

🔄 How The Code Flows

1. Data Collection Flow

graph TD
    A[News Scheduler] --> B[Aggregator Service]
    B --> C[HackerNews Service]
    B --> D[GitHub Service] 
    B --> E[TechCrunch Service]
    C --> F[Content Processing]
    D --> F
    E --> F
    F --> G[Cache Storage]
    G --> H[API Endpoints]

Loading

Step by Step:

1. Scheduler runs every 30 minutes (newsScheduler.js)
2. Aggregator calls all news services in parallel (newsAggregatorService.js)
3. Individual Services scrape/fetch data:
   • hackerNewsService.js - Gets top HN stories with scores, comments
   • githubService.js - Fetches trending repositories with stars, forks
   • techCrunchService.js - Pulls latest tech news articles
4. Enhanced Processing adds metadata:
   • AI categorization (AI Frontier, Web Dev, Dev Tools, Startups)
   • Difficulty assessment (Beginner/Intermediate/Advanced)
   • Read time estimation
   • Tag extraction
   • Rich summaries
5. Caching stores processed data for fast API responses
6. API Routes serve data to frontend

2. Frontend Data Flow

graph TD
    A[User Visits Page] --> B[Next.js SSR]
    B --> C[API Client Fetch]
    C --> D[Backend API]
    D --> E[Cached News Data]
    E --> F[Enhanced News Cards]
    F --> G[Beautiful UI Display]

Loading

Step by Step:

1. User loads page (pages/index.js)
2. Server-Side Rendering fetches initial data (getServerSideProps)
3. API Client calls backend endpoints (lib/newsApi.js)
4. Enhanced Cards display rich content (components/ui/EnhancedNewsCard.js)
5. Interactive Features like bookmarking, filtering work client-side

3. Authentication Flow

graph TD
    A[User Signup/Login] --> B[Auth Route Handler]
    B --> C[Password Hashing]
    C --> D[MongoDB Storage]
    D --> E[JWT Token Generation]
    E --> F[Frontend Storage]
    F --> G[Authenticated Requests]

Loading

5. Key Features Category Features Authentication & Authorization User registration, login, logout, role-based access (Admin/User) CRUD Operations Admin can create, read, update, delete trend items; users can bookmark trends Frontend Routing Pages: Home, Login, Category Feed, Trend Details, Profile/Bookmarks Category Feed Users select category (AI, Web Dev, Startups, Dev Tools) to view trends Trend Display Shows title, description, source, and link to original content Bookmark / Save Users can save favorite trends to view later Scraper Integration Periodically fetches new tech content and updates the database Searching Users can search for trends by title, keyword, or source Sorting Trends can be sorted by date (latest), popularity, or source Filtering Users can filter by category, source (GitHub, Product Hunt, etc.), or date range Pagination Trends feed is paginated for performance and better UX Hosting Frontend on Vercel, Backend on Render, Database on MongoDB Atlas