📡 StackRadar — Frontend

Next.js · TypeScript · Tailwind CSS · Recharts

The UI layer of StackRadar — AI-powered tech stack trend analyzer

Live Demo · Backend Repo · Report Bug

---

📌 Table of Contents

• Overview
• Pages
• Components
• Tech Stack
• Project Structure
• Prerequisites
• Local Setup
• Environment Variables
• Deployment
• Author

---

🧭 Overview

This is the frontend repository for StackRadar. It connects to the FastAPI backend to display real-time market demand data, technology growth trends, skill analysis results, and tech battle comparisons.

The UI is built with Next.js 14 App Router, styled with Tailwind CSS, and uses Recharts for all data visualizations. The color palette uses Coral and Warm Yellow as primary accents on a clean white background.

Backend repository: https://github.com/haseebio/stackradar-backend

---

📄 Pages

Route	Description
/	Main dashboard — all 4 sections
/about	What StackRadar is, why it was built, FAQs
/developer	Developer profile and contact

---

🧩 Components

Component	Description
Sidebar	Fixed left navigation with anchor + page links
Footer	4-column footer with links and data sources
PageLayout	Shared wrapper for About and Developer pages
LoadingScreen	Animated loading screen shown on first data fetch
MarketDemand	Horizontal bar chart — top 15 technologies
GrowthTrends	Line chart with 5-year history and forecast
SkillAnalysis	Skill input, match score, learn next, gap chart
TechBattle	VS comparison cards with bar charts

---

🛠 Tech Stack

Technology	Version	Purpose
Next.js	14	React framework with App Router and SSR
TypeScript	5.0	Type safety across all components
Tailwind CSS	3.4	Utility-first styling
Recharts	2.12	Bar charts, line charts, data visualization
Axios	1.7	HTTP client for API requests
Lucide React	0.383	Icon library

---

📁 Project Structure

frontend/ ├── src/ │ ├── app/ │ │ ├── layout.tsx # Root layout, SEO metadata, JSON-LD │ │ ├── page.tsx # Homepage — dashboard │ │ ├── globals.css # CSS variables, animations, utility classes │ │ ├── sitemap.ts # Auto-generated sitemap.xml │ │ ├── robots.ts # Auto-generated robots.txt │ │ ├── about/ │ │ └── developer/ │ ├── components/ │ └── lib/ │ └── api.ts # API call functions └── public/

---

✅ Prerequisites

• Node.js 18+
• npm

---

🚀 Local Setup

git clone https://github.com/haseebio/stackradar-frontend.git
cd stackradar-frontend
npm install
npm run dev

Open http://localhost:3000.

---

🔑 Environment Variables

Create a .env.local file in the root:

NEXT_PUBLIC_API_URL=https://stackradar-backend.onrender.com

For local backend development, point this to http://localhost:8000 instead.

---

📦 Deployment

Deployed on Vercel. Auto-deploys on every push to main.

git add .
git commit -m "your message"
git push

---

👨‍💻 Author

Muhammad Haseeb Ur Rehman Full Stack + AI Engineer · Lahore, Pakistan

• GitHub: @haseebio
• LinkedIn: haseebio
• Portfolio: haseebio-portfolio.netlify.app